Bouton WhatsApp pour site web : code, plugin ou widget

SendSeven Team, Editorial Team

Intégrer un bouton WhatsApp sur votre site web : code HTML à copier, lien wa.me correct avec accents, solutions pour WordPress, Shopify et Wix, comportement sur ordinateur, RGPD, mesure et suite après le clic. Avec démo en direct.

Beaucoup de clients préfèrent écrire plutôt qu'appeler, et ils ont de toute façon WhatsApp sur leur smartphone. Un bouton WhatsApp sur votre site web transforme cette habitude en canal de contact : un clic, et la conversation avec votre entreprise est ouverte. Installer le bouton ne prend que quelques minutes. Cet article présente le code à copier, la marche à suivre dans WordPress, Shopify et Wix, ainsi que les points où un bouton échoue dans la pratique : sur ordinateur, côté protection des données, pour la mesure et dans la boîte de réception.

Qu'est-ce qu'un bouton WhatsApp pour un site web ?

Un bouton WhatsApp est un bouton ou un lien sur votre site web qui ouvre directement une conversation WhatsApp avec votre numéro professionnel. Techniquement, il s'appuie sur le Click to Chat de WhatsApp : un lien vers wa.me avec votre numéro et, si vous le souhaitez, un texte déjà prêt dans le champ de saisie. Sur smartphone, le lien ouvre l'application WhatsApp, sur ordinateur WhatsApp Web ou l'application de bureau.

Le visiteur n'a ni à saisir ni à enregistrer votre numéro. Il voit le texte prérempli, le complète ou l'envoie tel quel, et vous recevez dans votre boîte de réception une demande accompagnée d'un numéro de téléphone. Que le bouton soit vert, aux couleurs de votre marque ou affiché en rond au bord de l'écran relève uniquement du design. Le lien qui se cache derrière reste toujours le même.

Démo en direct

Essayez par vous-même : ces boutons ouvrent une vraie conversation

Chaque bouton ci-dessous est un lien wa.me tout à fait ordinaire vers notre support. Sur smartphone, l'application WhatsApp s'ouvre, sur ordinateur WhatsApp Web ou l'application de bureau.

1. Classique, en vert WhatsApp

Nous écrire sur WhatsApp

Se remarque tout de suite, tout le monde connaît cette couleur.

2. Aux couleurs de votre marque

Démarrer le chat sur WhatsApp

Le bouton reprend votre couleur, le logo WhatsApp reste inchangé.

3. Flottant en bas à droite

www.votre-site.fr

Des questions ? Écrivez-nous

Reste visible pendant le défilement, sur chaque page.

4. QR code pour l'ordinateur

Vous êtes devant un ordinateur ? Scannez le code avec l'appareil photo de votre smartphone, et la conversation s'ouvre directement dans votre application WhatsApp.

Toutes les variantes préremplissent le même message : Bonjour SendSeven, j'ai encore quelques questions sur les boutons WhatsApp pour mon site web. Rien n'est envoyé tant que vous n'appuyez pas sur Envoyer. Ce n'est qu'alors que nous voyons votre numéro, et notre équipe support vous répond dans le chat.

Comment construire correctement le lien wa.me ?

Le lien se compose de https://wa.me/, de votre numéro international complet sans signe plus, sans zéro initial et sans espaces ni caractères spéciaux, et en option de ?text= suivi du message encodé pour une URL. C'est ainsi que WhatsApp le décrit dans l'aide officielle sur Click to Chat.

+49 (0) 821 7898-8853 devient ainsi 4982178988853 : indicatif du pays 49, le zéro de l'indicatif régional disparaît, tout comme les parenthèses, les tirets et les espaces. Le lien final est https://wa.me/4982178988853.

Le message prérempli doit être encodé pour une URL. Les lettres, les chiffres, le tiret, le point, le tiret bas et le tilde restent tels quels, tout le reste devient un code pourcentage. Les lettres accentuées se trompent facilement, car en UTF-8 elles se composent de deux octets :

Un exemple : « déjà » devient d%C3%A9j%C3%A0. Le lien complet vers notre support ressemble à ceci :

https://wa.me/4982178988853?text=Bonjour%20SendSeven%2C%20j'ai%20encore%20quelques%20questions%20sur%20les%20boutons%20WhatsApp%20pour%20mon%20site%20web.

Les erreurs les plus fréquentes sont un signe plus ou un zéro après l'indicatif du pays (wa.me/+49… ou wa.me/490170…), des espaces non encodés et une esperluette ou un dièse dans le texte, qui coupent le reste du message. Si le numéro manque complètement, WhatsApp n'ouvre que la sélection de contacts. Si vous préférez ne rien encoder à la main, notre générateur de lien WhatsApp gratuit crée le lien avec son QR code.

Quelles solutions existent pour intégrer un bouton WhatsApp ?

Il existe trois voies : le lien wa.me sous forme de code HTML personnel, un plugin prêt à l'emploi pour votre système de site web, ou un widget de chat qui relie WhatsApp à d'autres canaux et à une boîte de réception. Le code est le plus léger, le plugin ne demande aucune connaissance en code, et le widget vaut la peine dès que plus d'une personne répond.

Pour un seul bouton sur la page de contact, le code HTML suffit. Un plugin vaut la peine si vous voulez afficher le bouton sur toutes les pages sans connaissances en code. Un widget est la bonne voie si les demandes issues de plusieurs canaux doivent arriver chez une seule équipe.

À quoi ressemble le code HTML d'un bouton WhatsApp ?

Le bouton WhatsApp le plus simple est un lien HTML classique vers wa.me avec target="_blank", afin que votre page reste ouverte dans le navigateur. L'exemple affiche le numéro de notre support. Remplacez-le par le vôtre et adaptez le texte :

<a href="https://wa.me/4982178988853?text=Bonjour%2C%20j%27ai%20une%20question%20sur%20votre%20offre."
   target="_blank" rel="noopener">
  Nous écrire sur WhatsApp
</a>

Pour un bouton flottant placé en bas à droite de chaque page, il faut ajouter un peu de CSS. Le code se place une seule fois avant la balise </body> fermante de votre template :

<a href="https://wa.me/4982178988853?text=Bonjour%2C%20j%27ai%20une%20question."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Démarrer une conversation sur WhatsApp">
  <img src="/images/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Trois détails comptent. L'attribut aria-label : un bouton qui n'affiche qu'un logo a besoin d'un nom pour les lecteurs d'écran. La taille : 56 pixels se touchent facilement sur smartphone, en dessous de 44 pixels, cela devient juste. C'est aussi la taille minimale que recommandent Apple et les WCAG pour les zones tactiles. L'icône : téléchargez le logo WhatsApp depuis les ressources de marque officielles de WhatsApp, ne le modifiez pas, pas même sa couleur, et placez-le sur votre propre serveur. Une icône chargée depuis un serveur tiers transmet l'adresse IP de vos visiteurs à chaque consultation de page.

Comment intégrer le bouton WhatsApp dans WordPress, Shopify ou Wix ?

Le même principe s'applique dans tous les systèmes courants : un bouton isolé s'insère dans la page sous forme de bloc HTML, un bouton flottant se place une seule fois dans le pied de page, avant </body>. Seuls les noms des menus changent.

WordPress

• Bouton dans une page : dans l'éditeur de blocs, ajoutez le bloc « HTML personnalisé » et collez-y le code du lien.
• Bouton flottant sur toutes les pages : le plus sûr est un plugin pour le code d'en-tête et de pied de page comme WPCode. Vous y collez le code dans la zone du pied de page. Si, avec un thème classique, vous modifiez directement footer.php, utilisez un thème enfant, sinon le code disparaît à la prochaine mise à jour du thème. Les thèmes à blocs n'ont pas de footer.php, WPCode y est la voie la plus simple.
• Plugins WhatsApp prêts à l'emploi : le répertoire de plugins en propose beaucoup. Avant l'installation, vérifiez si le plugin charge des fichiers depuis des serveurs tiers, à quand remonte sa dernière mise à jour et s'il fonctionne avec votre bannière cookies.

Shopify

• Bouton flottant dans toute la boutique : sous Boutique en ligne > Thèmes, cliquez sur le menu à trois points du thème actuel, puis sur « Modifier le code ». Ouvrez le fichier layout/theme.liquid et collez le code directement avant </body>. Dupliquez d'abord le thème via le même menu.
• Bouton sur une page ou une page produit : avec les thèmes Online Store 2.0 comme Dawn, ajoutez dans l'éditeur de thème une section « Liquid personnalisé » et placez-y le code du lien.

Wix et Webflow

• Wix : pour un bouton sur une page, utilisez dans l'éditeur l'élément d'intégration de code HTML. Wix affiche le code intégré dans un cadre à part. Un bouton flottant sur l'ensemble du site doit donc aller sous « Settings > Development & integrations > Custom code ». Vous ne pouvez utiliser cette zone qu'avec un site publié, un domaine connecté et donc une offre Premium.
• Webflow : pour tout le site, saisissez le code dans les paramètres du site sous « Custom code », dans le champ « Footer code » ; cela suppose un plan de site payant. Pour un bouton isolé, utilisez l'élément « Code Embed ».

Intégrer un widget de chat avec WhatsApp

Un widget comme celui de SendSeven s'installe de la même manière : vous insérez une seule fois un extrait de script avant </body>. Dans WordPress, cela passe par le pied de page ou WPCode, dans Shopify par theme.liquid, dans Wix et Webflow par la zone de code personnalisé, comme décrit plus haut. Tous les réglages sont détaillés dans notre guide du widget pour site web.

Que se passe-t-il quand quelqu'un clique sur le bouton depuis un ordinateur ?

Sur ordinateur, un lien wa.me ouvre d'abord une page de WhatsApp, d'où l'on passe à l'application de bureau ou à WhatsApp Web. Si le visiteur n'y est pas connecté, il doit d'abord associer son smartphone, et c'est précisément là que beaucoup abandonnent.

Sur smartphone, le chemin est court : un clic, l'application s'ouvre, le message est prêt. Sur ordinateur, tout dépend de savoir si WhatsApp y est déjà configuré. Dans le B2B surtout, où de nombreux visiteurs font leurs recherches à leur poste de travail, ce n'est souvent pas le cas.

La solution est un QR code : le visiteur le scanne avec son smartphone et arrive directement dans la conversation, dans son application. Dans la démo en direct ci-dessus, vous le voyez sur ordinateur en tant que quatrième variante. Avec du HTML pur, vous le réalisez grâce à une règle CSS qui n'affiche le QR code que sur les grands écrans. Le widget SendSeven gère lui-même ce passage : si quelqu'un clique sur WhatsApp depuis un ordinateur, le widget affiche un QR code et propose WhatsApp Web comme seconde voie. Sur smartphone, l'application s'ouvre directement. La fonction est activée pour les nouveaux widgets, les widgets existants conservent leur comportement actuel. Elle vaut aussi pour Telegram, Messenger, Instagram et SMS. Pour savoir où utiliser des QR codes en dehors du site web, consultez notre article sur six emplacements pour le QR code WhatsApp.

Un bouton WhatsApp sur un site web est-il conforme au RGPD ?

Oui, un lien wa.me hébergé par vos soins peut être intégré en conformité avec le RGPD : il ne transmet aucune donnée à WhatsApp au chargement de votre page, seul le clic du visiteur y mène. Il faut regarder de plus près les plugins et widgets qui chargent des scripts, des polices ou des icônes depuis des serveurs tiers, ainsi que l'endroit où la conversation est traitée ensuite.

• Avant le clic : un bouton hébergé par vos soins avec sa propre icône ne charge rien depuis des tiers. Les plugins qui récupèrent des fichiers sur des serveurs tiers transmettent à cette occasion l'adresse IP ; ils doivent donc faire partie de votre examen et, le cas échéant, de la bannière cookies.
• Politique de confidentialité : elle contient généralement une mention de WhatsApp comme canal de contact et des données que vous recevez dans le chat. Le mieux est de clarifier la formulation exacte avec votre délégué à la protection des données.
• Après le clic : si la conversation passe par l'application WhatsApp Business sur un téléphone professionnel, l'application peut accéder au carnet d'adresses si vous lui en donnez l'autorisation, et donc aussi à des numéros de contacts qui n'ont jamais donné leur accord. Avec la WhatsApp Business Platform et un prestataire disposant d'un contrat de sous-traitance (DPA), le carnet d'adresses reste en dehors, et votre équipe travaille dans une seule interface avec des rôles et des droits.

Cette section ne remplace pas un conseil juridique. Vous trouverez les détails sur le consentement, les durées de conservation et le choix du prestataire dans le guide sur WhatsApp Business et le RGPD.

Comment mesurer les clics sur le bouton WhatsApp ?

Le plus simple pour mesurer les clics sur le bouton dans Google Analytics 4 est de passer par Google Tag Manager : un déclencheur réagit aux liens dont l'adresse contient wa.me et envoie un événement personnalisé. Dans l'UE, cette mesure suppose en règle générale un consentement dans la bannière cookies, la balise ne se déclenche donc qu'après accord.

1. Dans Tag Manager, activez les variables de clic intégrées, dont Click URL.
2. Créez un déclencheur de type « Clic - Uniquement les liens », qui se déclenche lorsque Click URL contient wa.me.
3. Associez-le à une balise d'événement GA4, par exemple nommée whatsapp_click, et transmettez la page en paramètre.
4. Liez la balise au consentement de votre bannière cookies, afin qu'elle ne se déclenche pas sans accord.

Dans Wix, vous intégrez Tag Manager via les intégrations marketing, pas via du code personnalisé. Ce qui se passe ensuite dans la conversation, Google Analytics ne le voit pas. WhatsApp ne transmet ni paramètres UTM ni page d'origine. Une astuce simple apporte de la clarté : donnez à chaque bouton son propre message prérempli, par exemple « J'ai une question sur les tarifs » sur la page des tarifs. Vous voyez alors dans la conversation d'où vient la demande. Dans le widget SendSeven, les statistiques du widget affichent en plus les clics par canal, par exemple le nombre de fois où les visiteurs ont choisi WhatsApp, ainsi que les vues et les interactions. Pour suivre les conversations WhatsApp jusqu'au chiffre d'affaires lorsque des publicités entrent en jeu, consultez le guide sur les publicités Click-to-WhatsApp et wa.me.

Que se passe-t-il après le clic dans votre entreprise ?

Après le clic, le message arrive sur le numéro qui se trouve derrière le bouton. Avec l'application WhatsApp Business, c'est un smartphone. Dès que plusieurs collègues répondent ou que les conversations affluent, une boîte de réception partagée, où votre équipe travaille ensemble, devient rentable. C'est ici que se décide si le bouton vous apporte des clients ou seulement des messages que personne ne lit à temps.

Une boîte de réception pour votre équipe

Dans la boîte de réception partagée de SendSeven, les conversations WhatsApp arrivent à côté des e-mails, des SMS, d'Instagram, de Messenger, du chat en direct et de Telegram. Votre équipe attribue les conversations, voit qui est en train de répondre et rédige des notes internes que le client ne voit pas. À quoi cela ressemble au quotidien, notre article sur WhatsApp Business avec plusieurs utilisateurs le décrit.

Des réponses le soir et le week-end

Une partie des demandes via le bouton arrive après la fin de la journée de travail. Un agent IA répond immédiatement aux questions récurrentes sur les horaires d'ouverture, la livraison ou les prix à partir de votre base de connaissances, et transmet tout le reste à votre équipe. Le lendemain matin, le transfert avec tout l'historique vous attend dans la boîte de réception.

Un widget pour WhatsApp et d'autres canaux

Tous les visiteurs ne souhaitent pas utiliser WhatsApp. Dans le widget SendSeven, vous définissez quels canaux apparaissent : WhatsApp seul, ou WhatsApp à côté du chat en direct, de l'e-mail, de Telegram et d'autres canaux. Si vous désactivez le chat en direct, un nouveau widget affiche les canaux sous forme de liste avec des logos. Avec la sélection rapide, disponible pour les widgets de type bulle, la bulle ronde déploie les canaux au clic. WhatsApp n'est alors qu'à deux clics. Pour la bulle, 15 icônes sont au choix, dont le logo WhatsApp.

Si vous n'avez besoin que de boutons isolés, par exemple pour un article de blog, une landing page ou la signature d'e-mail, vous trouverez dans la section Widgets, sous « Promotion », des liens et des QR codes prêts à l'emploi en PNG ou SVG, ainsi que des extraits HTML pour des boutons de canal, des badges et des signatures d'e-mail. Vous définissez vous-même le message prérempli à cet endroit. Vous construisez ainsi un bouton WhatsApp à partir d'un extrait, sans encoder vous-même le lien. Vous en saurez plus sur ce canal sur notre page WhatsApp pour les entreprises.

Combien coûte un bouton WhatsApp ?

Le bouton lui-même ne coûte rien : un lien wa.me est gratuit, que vous utilisiez l'application WhatsApp Business ou l'API. Des coûts n'apparaissent qu'avec les réponses via la WhatsApp Business Platform et avec le logiciel que votre équipe utilise.

• Les messages entrants sont toujours gratuits.
• Si le client écrit en premier, une fenêtre de 24 heures s'ouvre pour vos réponses.
• Depuis le 1er octobre 2026, Meta facture aussi les messages de service, c'est-à-dire vos réponses dans la fenêtre de 24 heures. Les 1 000 premiers par numéro de téléphone et par mois restent gratuits, à partir du 1 001e message, le tarif utility s'applique, soit 0,0456 € par message délivré en Allemagne. Les détails figurent dans notre aperçu des tarifs WhatsApp 2026 et dans l'aperçu tarifaire de Meta.
• Avec l'application WhatsApp Business, il n'y a pas de frais de messages. En contrepartie, seule la personne qui utilise le smartphone et les appareils qui y sont associés peut répondre.

Chez SendSeven, les widgets de site web sont inclus à partir de l'offre Basic à 49 € par mois, les agents IA et le Flow Builder à partir de l'offre Professional à 79 € par mois. L'utilisation de l'IA est facturée en crédits IA. Tous les prix s'entendent hors taxes, TVA en sus, l'aperçu figure sur la page des tarifs. Vous pouvez tester SendSeven gratuitement pendant 14 jours, avec 100 messages de test et sans carte bancaire.

Vous avez encore une question sur votre bouton ? Utilisez la démo en direct ci-dessus, et elle arrive directement chez notre support.

Questions fréquentes