HEY

Participe au prochain Webflow Challenge

Embed Webflow : 10 Embeds incontournable pour Webflow pour améliorer l’expérience utilisateur

À part les avantages apportés par les embed Webflow. Ils contribuent surtout à faire d'un site, un site web encore plus professionnel.

Mis à jour le

19/12/2020

Embed Webflow : 10 Embeds incontournable pour Webflow
Embed Webflow : 10 Embeds incontournable pour Webflow

Embed Webflow : Tu veux désormais voir plus grand. Se contenter d’un site basique créé sur Webflow, ce n’est plus pour toi. C’est vrai que c’est déjà beau, performant... mais tu sais que tu peux encore faire mieux. Tu peux encore le rendre “plus professionnel” qu’il n’en a déjà l’air.

Or, il existe différentes sortes de embed webflow : formulaires, réseaux sociaux, médias, avis, annonces, etc. En quoi est-ce différent des éléments créés manuellement sur le site ? En effet, tu peux créer un formulaire manuellement via l’interface de Webflow. Tu peux ajouter des médias, ou encore diriger les internautes vers des liens externes pour les annonces ou sondages...

#embed #embedwebflow #code #webflow

🌈 Sondage

Si je te demande de choisir entre utiliser une URL ou un embed code, lequel d’entre eux préfères-tu ?
URL, simple à utiliser !
Code embed, plus avantageux à mon avis.
ça dépend du contexte
N’hésite surtout pas à donner ton avis en commentaire 🌈❤️

Si tu ne sais pas encore quelle est la différence entre un code embed webflow et une URL, reste bien attentif à ce qui suit :

Sommaire

Code embed vs URL

Quand utiliser un code embed

Les 10 embed Webflow

  1. Formulaires
  2. Audio
  3. Instagram
  4. Témoignages
  5. Facebook
  6. Vidéo
  7. Sondage
  8. Annonces & Liens d’affiliation
  9. Commentaire
  10. Airtable

Conclusion

Il manque quelque chose ?

Embed Webflow vs URL

La principale différence concerne l’emplacement des données et de la manière dont elles sont actualisées ensuite.

Pour l’URL, le fichier est lié au fichier source (données stockées dans le fichier source, et donc, mises à jour dans le fichier source lui-même) tandis que pour le embed, le fichier est intégré au fichier source (données stockées dans le fichier, et donc, aucun lien avec le fichier source).

J’avoue que c’est un peu compliqué, mais au cours de ta lecture, tu verras que ce sera plus clair.

Quand utiliser un code embed ?

Ce sont généralement les fichiers complexes qui sont intégrés sur un site ou un blog : réseaux sociaux, formulaires, sondages, etc. (nous y reviendrons un peu plus tard).

C’est un moyen pour toi ou tes clients de soigner leur image, de montrer leur professionnalisme. Au lieu de diriger les visiteurs, clients et prospects vers un lien extérieur, le fichier ou réseau social est de suite accessible sur ton site.

Prenons le cas des réseaux sociaux plus particulièrement. En les intégrant sur ton site, tu as plus de chances de gagner plus de visiteurs et ensuite, des followers. Tu agrandis alors ta communauté, une bonne manière de promouvoir davantage ton activité.

Quant aux embed webflow code qui servent à recueillir des informations auprès des internautes, ils sont très pratiques. Imagine en effet qu’on te demande de remplir un formulaire ou de participer à un sondage, mais qu’en plus, le fichier à remplir en question est externe au site. Cela te prendra alors plus de temps, si bien que tu as la flemme de participer au final. Par contre, si le fichier se trouve sur le site, facile d’accès et fonctionnel, tu n’auras aucun mal. 🤓

Vois également les code embed comme une occasion d’établir un lien avec les internautes. Ce n’est pas la même chose, avec les URLs.

Maintenant que tu peux mesurer l’impact des codes embed, il ne reste plus qu’à savoir quels sont les différents embed qui matchent avec un site webflow, et puis aussi comment les intégrer. 👇

Embed Webflow

Les 10 embed Webflow

1. Embed webflow : Formulaires

L’intégration de formulaires sur un site webflow joue un rôle important dans l’inbound marketing. Si le propriétaire du site a préalablement réussi à réunir plusieurs visiteurs réguliers, les formulaires (inscription à la newsletter, téléchargement d’ebook, etc.) feront la suite du travail.

Seulement, ce ne sont pas de simples formulaires. Il faut qu’ils soient liées à une liste de diffusion, grâce à des services comme Mailchimp, et par le code embed. En général, ces formulaires sont personnalisables, de manière à ce qu’elles correspondent au design de l’ensemble du site (contrairement aux liens).

Mailchimp peut-il donc être intégré sur un site Webflow ? En effet, grâce à Mailchimp HTML Embed.

Mailchimp HTML embed

Mailchimp est relié à une liste de diffusion (regroupant les adresses électroniques que tu as réussi à obtenir via le formulaire), comme je te l’ai expliqué tout à l’heure. D’où la possibilité d’envoyer des contenus à tous ceux qui s’y sont inscrits.

Mais si tu veux que tes mails convertissent réellement tes prospects en clients, il ne faut pas que tu envoies n’importe quel mail. De un, il faut être régulier dans l’envoi. Ensuite, je te conseil de créer un contenu original, qui n’est pas forcément visible sur ton site. Par moments, il serait encore mieux de les accompagner de ebooks, d’inviter les followers à un webinaire, d’organiser une promotion...

Voici un exemple de site web réalisé sur Webflow, et qui intègrent un formulaire d’inscription intégré pour son canal slack, mais encore d’un formulaire d’abonnement à leur newsletter, sur leur site : BYLU (Boss Your Life Up).

- Envoyer un ebook

Recevoir un ebook en guise de cadeau fait toujours plaisir aux gens ! C’est pourquoi il faut en envoyer, peut-être dans ton mail de bienvenue ou de présentation ? Mais que devrait-il contenir ? Du moment que tu montres que tu es expert dans ton domaine, ça peut le faire (un guide, entre autres).

- Organiser un Webinaire

Certains préfèrent rester dans leur zone de confort, mais ce n’est pas forcément le cas pour tout le monde. Il y a ceux qui trouvent plaisir à y participer, car c’est une occasion de faire partie d’un public qui partage quelque chose en commun, quelque chose qui leur tienne à coeur. Les autres voient les webinaires comme une manière de voir qui se cache derrière la marque (eh oui, se voir en temps réel est toujours mieux). Cela leur inspire confiance, ce qui joue un rôle encore plus important dans leur processus de conversion.

- Faire une promotion

Les gens se sont inscrits à votre newsletter, ne penses-tu pas qu’il faut aussi les récompenser en leur donnant une réduction ou un code de promotion pour leur prochain achat ? Ils ne sont pas les seuls à en sortir gagnant, alors, ne t’inquiète pas. Toi aussi, tu auras gagné des clients fidèles. S’ils bénéficient d’une promotion en effet, ils auront une raison de plus pour revenir sur ton site pour faire un achat ou recourir à un service.

2. Embed Webflow Audio

Il n’y a pas que les formulaires qui peuvent être intégrés sur un site web. Les contenus multimédias ont aussi leur place, les fichiers audio entre autres. Y en a-t-il encore ceux qui s’intéressent aux contenus audios ? Bien sûr ! Ils permettent une connexion plus profonde avec les internautes.

Revenons à BYLU (Boss Your Life Up), le site intègre aussi des contenus audios. Il utilise alors un lecteur intégré. Et comme il est “intégré” et non lié par une URL, les internautes auront la possibilité de se rendre sur la plateforme de podcast originale. Il y a même de fortes chances qu’ils te suivent sur la plateforme.

Il y a aussi DreamLife Beats, un autre site conçu sur Webflow qui présente des extraits audio de ses travaux en haut de son site web.

3. Embed code : Instagram

Prenons tout de suite l’exemple de DreamLife Beats. À part les extraits audio intégrés sur son site Webflow, il y expose aussi ses posts instagram (images et vidéos). Difficile pour ses potentiels clients de manquer ses compétences ; en effet, non seulement il y met une vidéo de présentation, mais ses autres posts montrent à quel point il est doué dans son travail de producteur musical.

Ici, DreamLife Beats a utilisé le widget Elfsight pour l’intégration instagram.

Disons qu’un internaute qui utilise également instagram se rend sur ton site, et trouve sur son chemin ton compte. Si ce que tu fais lui plaît, il n’hésitera pas une seule seconde à te suivre sur Instagram. Et un prospect de plus !

4. Embed Webflow : Témoignages sur un site Webflow

Sur la plupart des sites web professionnels, on rencontre les témoignages de leurs clients. Sais-tu pourquoi ? Eh bien ce n’est pas qu’une simple formalité. Si ils ont été mis en place, c’est pour une raison précise : renforcer leur notoriété. Le simple fait de voir que tes clients ont confiance en toi et admirent ton travail donne à tes autres potentiels clients des raisons de travailler avec toi. Une fois un projet terminé, ils seront poussés à faire comme les autres, c’est-à-dire à donner leur avis sur ton site.

Il existe différentes manières d’insérer les témoignages sur un site, mais la meilleure reste évidemment l’intégration grâce au code embed. Les avis que tu reçois sur Yelp apparaîtront alors sur ton site. Je te conseille également le widget Elfsight. Le principe reste le même : copier un code pour ensuite le coller sur la partie de ton site où tu veux que les témoignages s’affichent.

5. Embed Webflow : Facebook & Twitter

Toujours grâce à Elfsight, tu peux intégrer tes posts de médias sociaux sur ton site, sur un endroit stratégique. Les visiteurs de ton site les verront comme une invitation à faire partie de ton réseau. Si tu veux optimiser au mieux leur présence, je te conseille de ne publier que des contenus performants.

6. Embed Webflow : Contenu vidéo intégré

Cette fonctionnalité est très intéressante pour ceux qui sont actifs sur YouTube ou Vimeo. L’objectif étant naturellement d’obtenir le plus grand nombre de vue. En insérant ainsi tes vidéos sur ton site, cela permettra aux visiteurs de te découvrir sur ta chaîne, et pourquoi pas, de s’y abonner.

J’en connais des sites qui truffent leur site de vidéos grâce au code embed. Uploader directement des vidéos sur un site est une très mauvaise idée, car cela alourdit le serveur. Cela crée un impact sur la vitesse de chargement du site et son SEO.

Il ne reste plus qu’à voir comment intégrer une vidéo sur un site Webflow.

C’est tout simple : Webflow possède une fonction vidéo YouTube intégrée qu’il suffit de glisser sur l’écran ; ensuite, tu n’as plus qu’à insérer le lien de la vidéo dans la partie dédiée.

7. Embed Webflow : Sondage intégré

Dans le but d’améliorer l’expérience des internautes sur un site, il est préférable de mener des analyses continuellement. Les sondages sont un moyen tellement efficace et pourtant, simple à mettre en place sur un site webflow.

En effet, les sondages t’aident à avoir des informations précieuses. Les visiteurs de ton site peuvent y répondre directement. Cela leur vient aussi naturellement. Encore une fois, ils n’ont pas besoin d’être redirigés vers un site externe.

De ton côté, tu ne seras pas amené à voir les résultats du sondage comme des chiffres. Tu les verras surtout en tant que personne qui ont visité ton site, et qui ont pris la peine de répondre à ton sondage. Tes décisions seront plus adaptées à ta cible.

Quand tu crées un sondage, je te rappelle de ne pas le faire trop long. Sinon, les internautes n’auront pas envie d’y répondre... Fais donc en sorte de ne poser que les questions importantes. Essaie également de simplifier les réponses pour faire gagner du temps à ta cible, et ainsi, leur inciter à prendre le temps d’y répondre (des QCM seraient le bienvenu par exemple).

Entrons dans la partie la plus importante : comment intégrer un sondage sur un site webflow ?

  • Mon préféré (que tu peux voir sur cet article aussià c’est Typeform
  • SurveyMonkey propose des questionnaires facilement intégrables sur un site Webflow.
  • Il y a aussi Wufoo. En plus des sondages, il propose aussi l’intégration de formulaires.

Ils peuvent tous 3 être personnalisés.

8. Embed Webflow : Annonces et liens d'affiliation

Toujours dans le but d’animer ton site, la mise en place d’annonces est une très bonne idée. Tu peux le faire de 2 différentes manières :

  • En utilisant Google AdSense
  • En utilisant le Carbone

Les liens d’affiliation Amazon sont aussi très prisés. Un beau moyen d’arrondir ses fins de mois. Mais si tu as beaucoup de followers, tu en gagneras beaucoup plus !

9. Embed Webflow : Commentaire “Disqus”

Permettre aux gens de commenter certains de tes contenus, c’est leur donner l’occasion de partager leur avis. On peut dire que vous communiquez (toi et les visiteurs de ton site). Seulement, la gestion de commentaires n’est pas forcément chose facile... Disqus a donc été mis en place pour la faciliter. Et surtout, il convient à Webflow.

Dès qu’un commentaire est écrit sur le site, tu reçois de suite une notification par email. Tu peux alors approuver ou refuser ce commentaire (en effet, il existe des spams qu’il faut absolument refuser !). D’ailleurs, Disqus dispose d’une fonctionnalité de filtrage de spam. Pour ceux qui connaissent Wordpress, le principe est le même que pour Akismet.

Comme nous nous concentrons toujours sur le webdesign, en webflow, je tiens à préciser que l’apparence des commentaires est personnalisable avec Disqus. Que demander de plus ?

10. Embed Webflow : “Airtable”

Enfin et non des moindres, Airtable ! Ce qui est bien avec lui, c’est que les données que tu reçois via ton site ne seront pas stockées sur le serveur du site. Cela ne fait que l’alourdir, et ensuite, ralentit la vitesse du site.

Le fait d’intégrer Airtable sur ton site permet alors au site de stocker les données chez Airtable lui-même. En parallèle, tu auras accès à bien plus de fonctionnalités de gestion de projets.

Conclusion

Le principe des codes embed reste le même pour tous ces types de embed :

  1. copier un code donné par l’outil ou le logiciel source.
  2. se rendre sur le site Webflow pour le coller à un endroit précis.
  3. Pour cela, tu dois utiliser la fonctionnalité “embed” (il suffit de le glisser sur la partie où il sera placé).

Bref, c’est facile. Quelques secondes et 2 clics, c’est tout ce dont tu as besoin. Pourtant, comme je l’ai mentionné pour chaque embed, les avantages sont multiples ! Si ce n’est que le fait d’avoir le serveur de ton site libéré.

C’est vrai que je t’ai listé 10 différents embed :

  1. Formulaires
  2. Audio
  3. Instagram
  4. Témoignages
  5. Facebook & Twitter
  6. Vidéos
  7. Sondage
  8. Annonces & Liens d’affiliations
  9. Commentaires
  10. Airtable

Cependant, tu n’es pas obligé de tous les installer sur ton site. Peut-être n’as-tu pas encore de compte Twitter ou tout simplement que ce n’est pas assez important pour ton activité. Tu te focalises plutôt sur la création d’une communauté, et ainsi, tu as besoin des embeds commentaires ?

Tout dépend alors de ton projet et de tes objectifs

Commentaire

FORMATION GRATUITE

Commence par suivre la Formation Gratuite, tu y découvriras les bases de Webflow et un avant gout de ce qui t’attend dans la formation Webflow Expert et Business Créatif.

Commence gratuitement

Pause cafe

4 articles que tu pourrais aimer

FORMATION GRATUITE

Enregistre-toi ici pour accéder à la
la Formation Gratuite

Commence par suivre la Formation Gratuite, tu y découvriras les bases de Webflow et un avant gout de ce qui t’attend dans la formation Webflow Expert et Business Créatif.

Commence la formation gratuite