Nouveaux widgets de story Instagram pour n'importe quel site web : modèles et démos

Nos clients disent que nos widgets Story sont l’une de leurs façons préférées d’engager les visiteurs du site web.

De nombreux utilisateurs qui veulent afficher leurs stories exactement comme Instagram le dit que les dispositions EmbedSocial les ont aidés à afficher gracieusement le contenu des stories pour renforcer la messagerie de marque avec une expérience client réelle, explique Marija, notre gestionnaire de succès client.

Les utilisateurs sont vraiment sans voix sur la façon dont il est facile de configurer leur widget Story sur leurs sites web en utilisant un simple code. La disposition des stories Instagram peut réunir les images, les vidéos et le texte dans un flux visuel beau et animé qui attire l’attention des clients immédiatement. Comme ils le disent, cela apporte un niveau totalement nouveau de contenu personnalisé et s’adapte parfaitement à n’importe quelle expérience web bien conçue, et ils n’ont même pas besoin d’utiliser des outils comme Adobe Photoshop pour y parvenir. Ils adorent simplement ça !

Marija Vlasceva, agent de succès client chez EmbedSocial

Donc, nous avons décidé de surprendre nos utilisateurs actuels et futurs et de développer une meilleure version ultra-moderne de nos modèles Story avec plus de capacités de personnalisation à notre disposition.

Nous nous sommes concentrés sur l’actualisation des anciennes dispositions et l’ajout d’éléments de design plus modernes à nos widgets. L’objectif principal était de créer de beaux et uniques widgets story que les utilisateurs adoreraient afficher et intégrer sur leurs sites web.

De plus, nous avons implémenté quelques améliorations dans le code, créé la flexibilité d’appliquer du CSS personnalisé par n’importe quel utilisateur, et standardisé les éléments généraux du widget afin que les dispositions puissent avoir une structure standard.

Nevrie, notre développeuse, qui a précédemment travaillé dans l’équipe de succès client, a dirigé ce projet.

Nous avons pensé qu’elle était la bonne personne à charge de cette refonte des modèles Story parce qu’elle comprend complètement comment les clients pensent et ce qu’ils recherchent dans les widgets Story. Et nous avions raison.

Il s’avère que c’était un vrai remue-méninges quand on combine les opinions d’un designer UX et d’un développeur front-end.

La bataille était améliorer les anciennes dispositions par rapport à en créer de toutes nouvelles

Ils ne pouvaient être satisfaits pour moins, donc ils ont fait un compromis pour créer 10 nouvelles dispositions de widget À PARTIR DE ZÉRO :

• 5 dispositions pour les widgets Stories
• 5 dispositions pour les widgets de galerie Story

C’est parti ! Les widgets sont maintenant disponibles et dans tous les plans de prix payants.

Le processus de design des nouveaux widgets story

C’était un long mois de travail sur cette transformation.

La refonte a été divisée en quelques étapes simples :

1. Angela, notre designer UX, fait le design graphique pour les différentes options de modèle
2. Nevrie donne du feedback, répondant à la question suivante : Est-ce que les utilisateurs seront déclenchés pour cliquer sur ceci ?
3. Angela implémente le feedback
4. En fonction du design final, Nevrie crée les widgets

Bien que ce processus ait fonctionné à merveille, le défi a demeuré : assurer que le widget aurait une belle apparence sur tous les appareils.

Dans les paroles de Nevrie :

Il était critique de travailler sur un widget qui sera intégré sur le site web de quelqu’un car vous ne pouvez pas savoir à l’avance quelle marque l’utilisera. Vous ne pouvez pas savoir à quoi ça ressemblera sur son appareil mobile ou différents ordinateurs de bureau. Après tout, nous devions nous assurer que le widget aurait une belle apparence, indépendamment de l’appareil que vous utilisiez.

Après un mois, Nevrie dit qu’elle est ravie du résultat, et elle est sûre que les utilisateurs les ADORERONT !

Et nous pouvons voir pourquoi.

Consultez le résultat final en action, ci-dessous !

Nouveaux widgets de story unique

Ci-dessous se trouve une vitrine des nouveaux widgets de story unique. Ces widgets afficheront votre dernière story et ses diapositives dans des dispositions modernes telles que : Carousel, Swiper, Slider, Popover et Highlight. Voici les détails pour chacun de ces nouveaux modèles :

Widget Carousel

Utilisation : Parfait pour les pages produit dédiées ou les pages d’accueil

Caractéristiques :

• Affichage responsive et complet des diapositives de story
• Sélectionnez les Stories que vous voulez montrer
• Glissez-déposez pour réorganiser l’apparition de la Story
• Options d’ordre de média
• Format de story AMP
• Voir les Stories dans Lightbox
• Ajouter un bouton CTA à chaque média story ou à tous
• Utiliser Bookend à la fin du widget
• Afficher le titre et la navigation du widget
• Auto-sync des nouvelles images ou vidéos
• Modifier la disposition, la police, la couleur et le titre du widget
• Éditeur CSS personnalisé
• Afficher widget après l’expiration de la story

Widget Swiper

Utilisation : Disposition moderne qui a l’air géniale sur les pages d’accueil ou les pages de renvoi

Caractéristiques :

• Expérience de balayage responsive « comme Instagram »
• Sélectionnez les Stories que vous voulez montrer
• Glissez-déposez pour réorganiser l’apparition des Stories
• Options d’ordre de média
• Format de story AMP
• Ajouter un bouton CTA à chaque média story ou à tous
• Utiliser Bookend à la fin du widget
• Afficher le titre et la navigation du widget
• Auto-sync des nouvelles images ou vidéos
• Modifier la disposition, la police, la couleur et le titre du widget
• Éditeur CSS personnalisé
• Afficher widget après l’expiration de la story

Widget Slider

Utilisation : fonctionne bien pour les barres latérales ou le contenu du blog

Caractéristiques :

• Expérience de balayage responsive « comme Instagram »
• Sélectionnez les Stories que vous voulez montrer
• Glissez-déposez pour réorganiser l’apparition de la Story
• Options d’ordre de média
• Format de story AMP
• Ajouter un bouton CTA à chaque média story ou à tous
• Utiliser Bookend à la fin du widget
• Afficher le titre et la navigation du widget
• Auto-sync des nouvelles images ou vidéos
• Modifier la disposition, la police, la couleur et le titre du widget
• Éditeur CSS personnalisé
• Afficher widget après l’expiration de la story

Widget Popover

Utilisation : Applicable à toutes les pages web - généralement utilisé pour intégrer le code dans le pied de page et avoir la dernière story affichée sur toutes les pages dans une bannière flottante fixe

Caractéristiques :

• Widget Story flottant qui, lorsque vous cliquez, offre l’expérience de balayage familière des réseaux sociaux
• Sélectionnez les Stories que vous voulez montrer
• Glissez-déposez pour réorganiser l’apparition de la Story
• Options d’ordre de média
• Format de story AMP
• Ajouter un bouton CTA à chaque média story ou à tous
• Utiliser Bookend à la fin du widget
• Afficher le titre et la navigation du widget
• Modifier la position et le délai de la fenêtre contextuelle
• Auto-sync des nouvelles images ou vidéos
• Modifier la disposition, la police, la couleur et le titre du widget
• Éditeur CSS personnalisé
• Afficher widget après l’expiration de la story

Démo :

Widget Highlight

Utilisation : Similaire au Popover, cette disposition peut être utilisée dans les barres latérales, les pages produit spécifiques, à l’intérieur des descriptions ou d’autres placements innovants où les utilisateurs auront besoin d’une version plus petite de la Story activée en plein écran sur un clic

Caractéristiques :

• Widget Story flottant qui, lorsque vous cliquez, offre l’expérience de balayage familière des réseaux sociaux
• Sélectionnez les Stories que vous voulez montrer
• Glissez-déposez pour réorganiser l’apparition de la Story
• Options d’ordre de média
• Format de story AMP
• Ajouter un bouton CTA à chaque média story ou à tous
• Utiliser Bookend à la fin du widget
• Afficher le titre et la navigation du widget
• Modifier la position et le délai de la fenêtre contextuelle
• Auto-sync des nouvelles images ou vidéos
• Modifier la disposition, la police, la couleur et le titre du widget
• Éditeur CSS personnalisé
• Afficher widget après l’expiration de la story

Pour un regard plus approfondi sur les widgets de story unique, cliquez sur le lien ci-dessous pour les démos en direct :

Démos : Widgets Story Unique →

Nouveaux widgets de galerie

La plateforme EmbedSocial vous permet de combiner les stories de différentes dates et de créer un widget comme une galerie qui affichera plusieurs stories. Pour styliser l’apparence des widgets, voici les nouveaux modèles que vous pouvez choisir :

Galerie Slider

Utilisation : montrer des exemples pratiques ou du contenu généré par l’utilisateur pour le contenu du blog ou dans les barres latérales

Caractéristiques :

• Expérience de diaporama responsive de prochain niveau
• Définir un bouton d’appel à l’action pour chacun d’eux ou pour tous les médias story de la galerie
• Sélectionnez manuellement les stories que vous voulez montrer dans la galerie
• Sélectionnez l’ordre des stories et des médias
• Option de lecture automatique des vignettes, du curseur et des vidéos
• Option pour afficher la pagination, la navigation, la date et le nom d’utilisateur
• Modifier la disposition du curseur, le titre, la taille, la police ou la couleur
• Éditeur CSS personnalisé

Galerie Highlights

Utilisation : fonctionne mieux pour les pages produit ou dans les barres latérales quand les utilisateurs ont besoin d’un widget Story plus petit qui, une fois cliqué, s’ouvre en plein écran

Caractéristiques :

• Expérience highlights responsive « comme Instagram »
• Définir un bouton d’appel à l’action pour chacun d’eux ou pour tous les médias story de la galerie
• Sélectionnez manuellement les stories que vous voulez montrer dans la galerie
• Sélectionnez le nombre de vignettes
• Option de lecture automatique de la boîte à lumière, des vignettes, du curseur et des vidéos
• Option pour afficher la pagination, la navigation, la date, l’image source et le nom d’utilisateur
• Modifier la disposition du curseur, le titre, la taille, la police ou la couleur
• Éditeur CSS personnalisé

Galerie List

Utilisation : similaire aux Highlights, fonctionne mieux pour la vente incitative et la vente croisée sur les pages produit ou pour montrer du contenu généré par l’utilisateur

Caractéristiques :

• Expérience highlights responsive « comme Instagram » (vertical)
• Définir un bouton d’appel à l’action pour chacun d’eux ou pour tous les médias story de la galerie
• Sélectionnez manuellement les stories que vous voulez montrer dans la galerie
• Sélectionnez le nombre de vignettes
• Option de lecture automatique des vignettes, de la boîte à lumière et des vidéos
• Option pour afficher la pagination, la navigation, la date et le nom d’utilisateur
• Modifier la disposition du curseur, le titre, la taille, la police ou la couleur
• Éditeur CSS personnalisé

Galerie Swiper

Utilisation : disposition moderne pour les pages d’accueil ou les pages de renvoi visuellement attrayantes

Caractéristiques :

• Expérience de curseur responsive
• Définir un bouton d’appel à l’action pour chacun d’eux ou pour tous les médias story de la galerie
• Sélectionnez manuellement les stories que vous voulez montrer dans la galerie
• Option de lecture automatique des vignettes, de la boîte à lumière et des vidéos
• Option pour afficher la pagination, la navigation, la date, l’image source et le nom d’utilisateur
• Modifier la disposition du curseur, le titre, la taille, la police ou la couleur
• Éditeur CSS personnalisé

Galerie Carousel

Utilisation : fonctionne bien sur les pages d’accueil et les pages produit dédiées

Caractéristiques :

• Expérience de curseur responsive
• Définir un bouton d’appel à l’action pour chacun d’eux ou pour tous les médias story de la galerie
• Sélectionnez manuellement les stories que vous voulez montrer dans la galerie
• Option de lecture automatique des vignettes, de la boîte à lumière et des vidéos
• Option pour afficher la pagination, la navigation, la date, l’image source et le nom d’utilisateur
• Modifier la disposition du curseur, le titre, la taille, la police ou la couleur
• Éditeur CSS personnalisé

Comme vous pouvez le voir, ils sont prêts à partir.

Cela signifie une seule chose : c’est l’heure de l’action ! Consultez les démos ci-dessous de tous les modèles de galerie pour vos Stories.

Démos : modèles de galerie Stories →

Applicabilité des nouveaux widgets

Comme vous pouvez le voir, chaque modèle de story a sa propre applicabilité unique. C’est à vous de décider quel design s’adaptera le mieux à l’interface de votre site web.

Voici quelques suggestions que vous pourriez considérer :

Page d’accueil

Les stories Instagram sont du contenu parfait pour les pages d’accueil. C’est l’un des derniers formats qui portera la conception de votre web à un niveau beaucoup plus engageant et moderne, donnant aux visiteurs du web plus de composants uniques pour s’engager.

Page produit

Un exemple excellent d’utilisation du widget story avec un modèle Popover. Ce widget flottant affichera le contenu sur le produit dans une disposition story qui offre aux clients une façon fraîche et unique de s’engager et peut-être d’acheter.

Page de renvoi

Dans cet exemple, nous présentons le widget galerie Highlights intégré sur une page de catégorie. C’est une vitrine des stories produit que les utilisateurs visitant cette page peuvent facilement parcourir et s’engager dans un format plus immersif. Cela peut entraîner une plus grande probabilité de cliquer sur les options d’appel à l’action et d’acheter le produit.

Si vous imaginez déjà les widgets sur votre site web, faites défiler ci-dessous pour savoir comment vous pouvez commencer.

Veuillez noter que la plateforme EmbedSocial est toujours à jour avec les derniers changements de l’API Instagram. Cela signifie que les utilisateurs peuvent continuer à utiliser Instagram pour générer et afficher les feeds Instagram et les stories sur leurs sites web.

Commencer avec les nouveaux modèles

Les nouveaux modèles sont déjà disponibles pour tous les utilisateurs d’EmbedSocial. Pour les appliquer et les intégrer sur votre site web dès maintenant, suivez les étapes ci-dessous :

1. Connectez-vous à votre compte EmbedSocial
2. Connectez le compte Facebook qui est lié au profil Instagram pour générer les stories (si vous n’avez pas encore créé de widget)
3. Accédez à Widgets, choisissez le profil Instagram et cliquez sur « Créer widget »
4. Dans la vue d’édition, accédez à l’option Disposition et design pour personnaliser votre widget
5. Dans le paramètre « Dispositions » se trouvent tous les modèles où vous pouvez sélectionner le modèle story qui vous convient le mieux
6. Copiez le code HTML en haut à droite et collez-le dans votre section body du site web

Voici une capture d’écran, où vous pouvez trouver les nouveaux widgets. Ouvrez le bouton « Disposition et design » dans le volet des paramètres et dans « Dispositions », choisissez le nouveau modèle dans la liste déroulante. Les modifications apparaîtront immédiatement dans la section « Aperçu » de gauche. Pour appliquer les modifications à un widget déjà intégré, cliquez simplement sur « Enregistrer ».

Répétez les mêmes étapes pour les widgets de galerie, avec juste une exception. Au lieu de Widgets, accédez au menu Galerie du menu principal de gauche.

Voici un didacticiel détaillé étape par étape avec des captures d’écran sur la façon d’intégrer les Stories Instagram sur votre site web dès aujourd’hui.

Veuillez noter que EmbedSocial est la première plateforme qui a la fonctionnalité pour générer les stories Instagram. Tous les nouveaux widgets fonctionnent de façon transparente dans n’importe quelles applications basées sur le web qui supportent l’intégration JavaScript ou iframe, les plates-formes de commerce électronique ou n’importe quel générateur web, comme WordPress.

À venir…

Nous ne sommes pas encore terminés.

Jetez un coup d’œil à ce qui est à venir dans notre feuille de route pour notre outil EmbedSocial tout-en-un :

• Fonctionnalité améliorée dans les fonctionnalités de téléchargement
• Une meilleure modération qui apportera la flexibilité de combiner les stories de diverses sources dans un widget
• Nouveaux widgets Highlights

Nous aimerions beaucoup entendre vos suggestions sur la façon d’améliorer davantage nos widgets. N’hésitez pas à nous envoyer une ligne.

En attendant, bon intégration !