Un bouton WhatsApp sur votre site supprime l’étape la plus lente entre un visiteur et une conversation : trouver votre numéro, l’enregistrer et taper un premier message. Un appui, et WhatsApp s’ouvre avec la discussion prête. Bonne nouvelle : pas besoin de plugin, d’abonnement ni de JavaScript, un bouton WhatsApp n’est qu’un lien ordinaire habillé d’un peu de style. Ce guide montre d’abord la version HTML pur, puis la voie la plus rapide sur WordPress, Shopify et les grands créateurs de sites.
Étape 1 : obtenez votre lien click-to-chat
Chaque bouton WhatsApp, sur toutes les plateformes, pointe vers la même chose : un lien click-to-chat wa.me. Il contient votre numéro de téléphone et, en option, un message prérédigé. Le format ressemble à ceci :
https://wa.me/15551234567?text=Bonjour%21%20J%27ai%20une%20question%20sur%20vos%20services
Le numéro doit être au format international complet, uniquement des chiffres, l’indicatif du pays d’abord, sans signe plus, espaces ni tirets, et le message doit être encodé en URL. Le moyen le plus simple de réussir les deux est le Générateur de Liens WhatsApp gratuit : tapez votre message, regardez l’aperçu en direct et copiez le lien terminé. Pour la syntaxe complète, voyez notre guide complet de wa.me.
HTML pur : un bouton à coller sur n’importe quel site
Dans sa forme la plus simple, le bouton est une balise de lien avec votre URL. Cela fonctionne dans toute page HTML, générateur de site statique ou bloc « HTML personnalisé » d’un créateur de sites :
<a href="https://wa.me/15551234567?text=Bonjour%21" target="_blank" rel="noopener">Discutez avec nous sur WhatsApp</a>
Pour qu’il ressemble à un vrai bouton WhatsApp plutôt qu’à un lien texte, ajoutez des styles en ligne, vert WhatsApp (#25D366), texte blanc, coins arrondis et un peu de rembourrage :
<a href="https://wa.me/15551234567?text=Bonjour%21" target="_blank" rel="noopener" style="display:inline-block;background:#25D366;color:#fff;padding:12px 24px;border-radius:50px;font-weight:600;text-decoration:none;">💬 Discuter sur WhatsApp</a>
Pour la fameuse « bulle » flottante dans le coin inférieur, enveloppez le même lien dans un style à position fixe : position:fixed, décalages bottom et right d’environ 20px, et un fond circulaire autour de l’icône WhatsApp. Cela reste un simple lien, pas de script, rien qui ralentisse la page.
WordPress : sans plugin
- Dans l’éditeur de blocs, ajoutez un bloc HTML personnalisé (ou un bloc Boutons) là où vous voulez le bouton.
- Collez la balise de lien stylée ci-dessus, avec votre propre lien wa.me.
- Pour un bouton sur tout le site, ajoutez le même HTML à une zone de widgets (Apparence → Widgets) ou au template du pied de page de votre thème.
Des plugins comme « Click to Chat » ajoutent des boutons flottants, des règles d’horaires et des sélecteurs d’agent. Très bien si vous voulez ces extras, mais s’il ne vous faut que le bouton, le bloc HTML fait le même travail avec zéro script ajouté et rien de nouveau à maintenir.
Shopify
- Allez dans Boutique en ligne → Thèmes → Personnaliser.
- Ajoutez une section Liquid personnalisé ou HTML personnalisé (la plupart des thèmes modernes en ont une) et collez le code du bouton.
- Pour l’afficher sur toutes les pages, modifiez la section pied de page du thème, ou ajoutez l’extrait à theme.liquid juste avant la balise de fermeture du body.
Wix, Squarespace et autres créateurs
Tous les grands créateurs ont un élément « intégrer du HTML » ou « code », collez-y la même balise de lien. Beaucoup ont aussi un bouton WhatsApp natif dans leurs éléments sociaux ou de contact ; ceux-ci ne demandent que le numéro de téléphone, donc si vous voulez un message prérédigé, utilisez l’intégration HTML avec votre lien généré.
Vous préférez que les visiteurs partagent votre page plutôt que de vous écrire ?
Un bouton de discussion démarre une conversation avec vous. Si ce que vous voulez vraiment, c’est que les visiteurs envoient votre page à leurs contacts (une pétition, un produit, un article) utilisez plutôt le Widget de Partage WhatsApp gratuit. Il récupère le titre, la description et la vignette de votre page et produit une carte de partage prête à intégrer avec un bouton « Partager sur WhatsApp », en une version pour les sites web et une autre qui survit à Gmail et Outlook pour les campagnes e-mail. Si la carte arrive dans la conversation avec le mauvais titre ou sans image, voyez pourquoi l’aperçu des liens WhatsApp ne s’affiche pas.
Suivez les clics
Un clic WhatsApp quitte votre site, votre outil d’analyse ne verra donc pas la conversation, mais vous pouvez compter les clics. Ajoutez un paramètre UTM à l’URL de la page mentionnée dans le message, ou suivez le clic du bouton comme un événement dans Google Analytics / Tag Manager (un simple déclencheur de clic sur les liens contenant wa.me). Si le bouton apparaît à plusieurs endroits, donnez à chacun un message prérédigé différent pour savoir d’où vient une discussion rien qu’en lisant sa première ligne.
Foire aux questions
Faut-il WhatsApp Business pour un bouton sur son site ?
Non. Un lien wa.me fonctionne avec WhatsApp personnel comme avec WhatsApp Business. Un compte WhatsApp Business gratuit ajoute toutefois des extras utiles derrière le même bouton, un profil professionnel, des messages d’absence et des réponses rapides.
Le bouton fonctionnera-t-il sur ordinateur ?
Oui. Sur un téléphone, le lien ouvre l’application WhatsApp ; sur un ordinateur, il ouvre WhatsApp Web ou l’application de bureau si le visiteur est connecté. Le même lien gère les deux.
Puis-je utiliser le logo officiel de WhatsApp sur le bouton ?
Meta publie des directives de marque avec des fichiers de logo approuvés exactement pour cet usage. Tenez-vous-en au pictogramme officiel, ne le déformez pas, ne changez pas sa couleur, et ne laissez pas entendre que WhatsApp cautionne votre activité.