Language:

Comment intégrer un bouton flottant WhatsApp sur un site Web html

Vous cherchez un moyen de créer un bouton de chat WhatsApp flottant pour votre site web ? Nous vous proposons de le faire à l’aide d’un plugin pratique ! Dans cet article, nous allons voir comment créer votre propre bouton de chat flottant et l’ajouter à votre site en quelques étapes.
Créer un bouton WhatsApp
Share:
Partager sur Facebook
Share on X
Share on LinkedIn
Share on WhatsApp
Copy Link

À propos du plugin de bouton WhatsApp flottant

Vous souhaitez élargir les fonctionnalités de votre site en y ajoutant un bouton WhatsApp flottant, mais vous ne savez pas comment faire ? Voici quelques solutions prêtes à l’emploi qui peuvent vous aider, par exemple un plugin qui peut être intégré dans le code HTML de n’importe quel site — de WordPress et Squarespace à Shopify et Wix. Et nous pouvons partager cette solution avec vous. Il s’agit du plugin bouton WhatsApp flottant par Elfsight. Grâce à ce plugin, vous pouvez facilement créer une fenêtre de chat pour n’importe quel usage sur votre site.

  1. Commencez par choisir un modèle adapté pour le chat.
  2. Connectez votre profil et personnalisez la fenêtre de chat.
  3. Obtenez le code de votre widget WhatsApp Chat.
  4. Intégrez le code sur votre site Web.

Créez votre bouton WhatsApp flottant ici en quelques clics !

Ajouter un bouton WhatsApp flottant dans le code HTML du site

Vous pouvez facilement créer un bouton WhatsApp flottant en quelques clics à intégrer dans le code HTML de votre site. Le HTML vous aide à créer un site Web pour tout objectif. Et si la création du site n’est pas si difficile à réaliser, l’ajout d’éléments supplémentaires comme un bouton flottant peut nécessiter une aide extérieure. Cela peut être fait facilement grâce à notre configurateur simple d’utilisation. Voici comment procéder :

  1. Créez un compte sur Elfsight Apps et connectez-vous au panneau d’administration.
  2. Choisissez le modèle « Flottant » dans le configurateur et personnalisez-le.
  3. Enregistrez votre bouton de chat flottant.
  4. Copiez le code d’installation affiché dans la fenêtre contextuelle.
  5. Intégrez le code du plugin à l’endroit souhaité sur votre site.

C’était plutôt facile, non ? Maintenant, si vous souhaitez un guide plus visuel sur l’ajout du bouton WhatsApp flottant dans le code HTML de votre site, regardez la vidéo ci-dessous :

Comment ajouter un bouton WhatsApp flottant sur WordPress et d’autres plateformes

WordPress est l’un des créateurs de sites les plus populaires au monde, il n’est donc pas surprenant que de nombreux utilisateurs aient besoin d’instructions pour ajouter un bouton de chat flottant sur leur site. Ajouter un bouton WhatsApp Chat sur WordPress est vraiment simple. Ci-dessous, nous expliquons comment le faire via l’éditeur natif de WordPress. Vous verrez qu’il est très simple d’ajouter WhatsApp à WordPress.

Une fois que vous avez créé et modifié votre bouton de chat flottant dans le tableau de bord Elfsight, intégrez le code d’installation dans le champ HTML du panneau d’administration WordPress. C’est très simple ! En général, vous devez ajouter le code dans une section « Code HTML ». Voici les étapes :

  1. Créez votre plugin de bouton WhatsApp flottant dans le panneau d’administration en choisissant le bon modèle.
  2. Enregistrez les résultats et copiez le code d’installation qui s’affiche dans la fenêtre contextuelle.
  3. Connectez-vous au panneau d’administration de votre site WordPress.
  4. Allez dans la section “Pages” et sélectionnez la page où vous souhaitez intégrer le bouton.
  5. Ajoutez un bloc HTML personnalisé à l’endroit souhaité de la page.
  6. Dans ce bloc HTML, insérez le code du bouton flottant obtenu dans le générateur de code.
  7. Cliquez sur “Mettre à jour” pour enregistrer les modifications.

Vous pouvez effectuer autant de modifications que vous le souhaitez depuis le panneau Elfsight, elles seront automatiquement appliquées à votre bouton de chat flottant. Aucune modification directe du code HTML de votre site WordPress n’est nécessaire.

En savoir plus sur l’ajout de WhatsApp à WordPress et ses fonctionnalités utiles.

Notre Chat WhatsApp est également disponible sur d’autres plateformes, comme par exemple Wix. Voici des tutoriels simples pour ajouter l’application de chat à une page Wix spécifique :

  1. Accédez à l’éditeur Wix en vous connectant à votre compte Wix et en sélectionnant le site où vous souhaitez voir le plugin. Cliquez ensuite sur « Modifier le site ».
  2. Ajoutez un bloc HTML en cliquant sur l’icône Plus, en accédant à la section « Intégrer », puis en choisissant « Intégrer un widget » dans l’onglet « Personnalisé ».
  3. Insérez le code d’installation. Cliquez sur « Entrer le code », collez le snippet d’installation, puis cliquez sur « Mettre à jour ».
  4. Personnalisez la taille et la position du plugin. Déplacez le plugin à l’endroit souhaité et ajustez ses dimensions jusqu’à ce qu’il s’affiche parfaitement sans barres de défilement.
  5. Optimisez le plugin pour les appareils mobiles et publiez. Cliquez sur l’icône mobile pour ouvrir l’éditeur mobile, ajustez la taille si nécessaire, puis cliquez sur « Publier ».

C’est terminé ! Vous avez ajouté votre application Elfsight à une page spécifique de votre site Wix.

Et qu’en est-il de l’ajout d’un chat WhatsApp à Shopify ? C’est très simple. Voici comment faire en quelques étapes :

  1. Connectez-vous à votre panneau d’administration Shopify et accédez à Canaux de vente → Boutique en ligne.
  2. Cliquez sur le bouton Personnaliser pour accéder à l’éditeur visuel.
  3. Pour changer de page, utilisez la liste déroulante en haut.
  4. Cliquez sur Ajouter une section, puis sélectionnez Liquid personnalisé.
  5. Collez le code de votre chat WhatsApp Shopify dans le champ Liquid personnalisé, ajustez les couleurs et les marges si nécessaire, puis enregistrez.

De cette manière, vous pouvez facilement ajouter un chat WhatsApp personnalisé aux pages de votre site Shopify.

Bouton WhatsApp flottant : cas d’utilisation intéressants

Lorsque vous créez et personnalisez votre bouton de chat WhatsApp flottant pour WordPress ou un autre site, vous pouvez rencontrer des difficultés de personnalisation. Par exemple, si vous concevez une intro, il se peut que vous ne sachiez pas comment la styliser dans le code HTML. C’est pourquoi nous avons rassemblé pour vous des exemples de conceptions de boutons pour vous inspirer.

Exemple 1 : bouton de chat intégré

Voici un exemple de bouton flottant pour WordPress ou tout autre site dans un design classique que les utilisateurs reconnaissent. Pour ouvrir une fenêtre de dialogue personnalisée, l’utilisateur n’a qu’à cliquer sur le bouton. La fenêtre de chat est accompagnée d’un message sur le délai de réponse, ce qui augmente la confiance de votre audience, car cela montre que vous êtes attentif et prêt à répondre à tout moment.

Exemple 2 : bouton de consultation

L’icône de chat WhatsApp flottante sur WordPress ou tout autre site est une excellente manière de fournir des conseils aux visiteurs. Grâce aux vastes options de personnalisation du plugin, vous pouvez facilement modifier les couleurs du bouton et de la fenêtre de chat pour les intégrer à la charte graphique de votre site HTML.

Exemple 3 : bouton d’onboarding

Le support client et l’onboarding sont essentiels pour tout site commercial. Offrir ces services via une fenêtre de chat intégrée au code HTML de WordPress ou d’un autre site est une très bonne idée. Vous pouvez afficher le bouton de chat flottant sur toutes les pages, pour rester constamment en contact avec vos clients et améliorer la qualité de service.

Exemple 4 : bouton de feedback

Vous souhaitez améliorer la qualité de vos produits ou services grâce à des retours rapides et garantis ? Le bouton de chat flottant ajouté au code HTML du site aidera : chaque utilisateur peut cliquer pour donner son avis à tout moment. Comme pour les exemples précédents, vous pouvez modifier les couleurs pour que le bouton s’intègre parfaitement au design.

Avantages du bouton WhatsApp flottant pour votre entreprise

Pourquoi choisir un bouton WhatsApp flottant à ajouter au code HTML de votre site ? La réponse est simple : pour sa facilité d’utilisation. C’est une opportunité pour votre audience d’entrer en contact avec votre entreprise en 2 clics. Pas besoin de remplir de formulaire, de saisir un numéro ou un message. Un clic sur le site, un clic dans l’app WhatsApp. Rien de plus simple.

La plupart des gens préfèrent communiquer via des messageries instantanées, dont l’interface leur est familière. C’est plus pratique que l’e-mail, l’appel ou le chat en ligne. Voici pourquoi vous devriez envisager d’ajouter un bouton WhatsApp à votre site :

Popularité croissante du bouton

WhatsApp est le deuxième plus grand service au monde après Facebook. Il compte plus de 500 000 utilisateurs actifs quotidiens, selon Statista. Il est le leader des messageries instantanées dans de nombreux pays.

Un moyen rapide de communiquer avec le bouton

Les utilisateurs perçoivent la messagerie comme un moyen de communication rapide. Le vendeur peut répondre rapidement via n’importe quel canal, mais l’utilisateur répond plus vite dans WhatsApp. Pourquoi ?

  • WhatsApp bénéficie d’un haut niveau de confiance. Même si l’utilisateur ne l’aime pas, il l’installera, car il l’utilise pour communiquer avec ses proches.
  • C’est aussi un canal sans spam. Les messages proviennent principalement de contacts connus. Il n’y a ni publicités intrusives ni notifications gênantes.
  • Les notifications de message non lu attirent l’attention. Même sans envie, l’utilisateur l’ouvrira.
  • Rien de tout cela ne s’applique à l’e-mail, qui peut rester non lu ou même ignoré sans que vous ne le sachiez.

WhatsApp dispose aussi de statuts de message : vous savez si le message a été lu, et l’utilisateur sait que vous voyez cela. Cela augmente les chances d’obtenir une réponse, même courte.

Une ambiance plus informelle avec le bouton

Les échanges sur WhatsApp sont perçus comme informels. Cela détend les utilisateurs : ils n’ont pas peur de poser une question, de plaisanter ou de faire une erreur. L’e-mail reste perçu comme formel, structuré, et demande du temps. Ils répondront donc plus facilement à votre concurrent via WhatsApp.

Appel à l’action avec le bouton

Un appel à l’action est essentiel. Le logo WhatsApp seul ne suffit pas. Sans indication claire, l’utilisateur peut ne pas comprendre l’utilité du bouton. Un appel à l’action bien visible dans le plugin améliore fortement les conversions.

Sans CTA, la conversion diminue. Un simple tooltip ne suffit pas. Il est préférable d’avoir un message permanent, intégré au plugin.

Personnalisation du design du bouton

Un critère important pour que le bouton s’intègre harmonieusement à votre site. Des réglages flexibles permettent de l’adapter au design général. Idéalement, le service propose la modification de la police, des couleurs, des tailles et de la position.

Conclusion

Le plugin WhatsApp n’est pas une baguette magique qui génère automatiquement des commandes. Mais bien utilisé, il peut significativement améliorer le taux de conversion du trafic mobile sur votre site.