Ajouter un bouton WhatsApp à WordPress : 3 méthodes

Il existe trois façons d’ajouter un bouton WhatsApp à WordPress : coller un script dans le pied de page du site, installer une extension dédiée ou ajouter un simple lien à une page ou au menu. Ce guide présente chaque méthode, indique où placer le code dans les thèmes classiques et les thèmes basés sur les blocs, et explique les vérifications à effectuer pour que le bouton ne ralentisse pas la page et ne masque aucun élément important.

Vous devez d’abord disposer du lien vers lequel pointera le bouton. Si vous n’en avez pas encore, découvrez comment créer un lien WhatsApp en quelques minutes.

Quelle méthode choisir ?

Bouton flottant avec un script : il s’affiche sur toutes les pages, reste léger et ne nécessite aucune extension supplémentaire.
Extension dédiée : tout se configure depuis le tableau de bord, sans code, mais vous ajoutez une extension à entretenir.
Lien ou bouton simple : il n’alourdit pas le site, mais apparaît uniquement aux endroits où vous le placez.

Méthode 1 : le widget WaLinks, avec une ligne de script

Le widget WhatsApp WaLinks est un bouton flottant vert placé dans un coin inférieur de la page. Un appui ouvre la discussion dans l’application WhatsApp sur téléphone ou dans WhatsApp Web sur ordinateur. Il est inclus dans l’offre Starter. Voici comment le configurer :

Créez votre lien dans WaLinks avec votre numéro et, si vous le souhaitez, un message prérempli.
Dans votre tableau de bord, ouvrez le widget associé à ce lien, puis choisissez une couleur, un côté de l’écran, à droite ou à gauche, et éventuellement un message d’accueil qui apparaît dans une bulle après 3 secondes.
Copiez le code d’installation. Il tient sur une seule ligne de ce type :

<script src="https://wha.mx/w/your-business.js" data-position="left" data-greeting="Hi! Need a hand?" async></script>

Les attributs data- apparaissent seulement lorsque vous modifiez l’aspect par défaut. Votre numéro et votre message sont enregistrés dans le lien lui-même : vous pouvez donc les modifier dans le tableau de bord sans toucher à WordPress. En revanche, la couleur, le côté et le message d’accueil font partie du code. Si vous les changez, recopiez la ligne et remplacez l’ancienne.

Le script doit être placé juste avant la balise de fermeture </body>, sur toutes les pages. WordPress propose trois emplacements possibles.

Option A : un bloc HTML personnalisé dans le pied de page

Si vous collez le script dans un bloc HTML personnalisé à l’intérieur d’un article, le bouton s’affichera uniquement sur cet article. Pour le rendre visible sur tout le site, placez-le dans une zone partagée :

Thème basé sur les blocs, comme Twenty Twenty-Four ou Twenty Twenty-Five : ouvrez Apparence → Éditeur, accédez à la partie de modèle du pied de page, ajoutez un bloc HTML personnalisé, collez la ligne et enregistrez.
Thème classique : ouvrez Apparence → Widgets, choisissez une zone du pied de page et ajoutez un bloc HTML personnalisé. Cette méthode fonctionne uniquement si votre thème propose une zone de widgets dans le pied de page.

Si le script disparaît lors de l’enregistrement, votre compte ne dispose pas de la capacité unfiltered_html. Sur un site classique, les administrateurs et les éditeurs en disposent ; sur un réseau multisite, seuls les super-administrateurs l’ont.

Option B : functions.php et le crochet wp_footer

Si vous êtes à l’aise avec le code, ajoutez l’extrait suivant au fichier functions.php d’un thème enfant. Si vous le placez dans le thème parent, la prochaine mise à jour l’effacera :

add_action( 'wp_footer', function () {
    echo '<script src="https://wha.mx/w/your-business.js" async></script>';
} );

Le crochet wp_footer affiche le code juste avant la balise de fermeture body, aussi bien dans les thèmes classiques que dans les thèmes basés sur les blocs. Vous pouvez modifier le fichier dans Apparence → Éditeur de fichiers des thèmes pour un thème classique, ou dans Outils → Éditeur de fichiers des thèmes pour un thème basé sur les blocs. Une seule erreur de syntaxe peut rendre le site indisponible : gardez donc un accès FTP ou le gestionnaire de fichiers de votre hébergeur à portée de main.

Option C : une extension d’insertion de code dans l’en-tête et le pied de page

C’est la solution la plus simple si vous préférez ne pas modifier les fichiers. La plus populaire est « WPCode – insertion d’en-têtes et de pieds de page », active sur plus de 3 millions de sites. Collez la ligne dans son champ Footer et enregistrez. Comme elle ne dépend pas de votre thème, elle reste en place lorsque vous en changez.

Méthode 2 : une extension WhatsApp dédiée

Recherchez « WhatsApp » dans Extensions → Ajouter une extension : vous trouverez des dizaines d’extensions de bouton et de discussion. Elles fonctionnent toutes de la même manière : installez-en une, saisissez votre numéro au format international, choisissez le libellé et l’emplacement, puis le bouton apparaît. Certaines ajoutent les horaires d’ouverture ou plusieurs conseillers.

Avant d’en installer une, vérifiez sur sa fiche la date de la dernière mise à jour, sa compatibilité avec votre version de WordPress et son nombre d’installations actives. Si vous avez seulement besoin d’un bouton, un script d’une ligne remplit la même fonction avec moins d’éléments à gérer.

Méthode 3 : un bouton simple ou un lien de menu

Tout n’a pas besoin d’être flottant. Un bouton sur votre page de contact ou une entrée « WhatsApp » dans le menu peut suffire, avec un lien wa.me ou un lien court :

https://wa.me/15551234567       (United States)
https://wa.me/5215512345678     (Mexico)
https://wha.mx/your-business    (short link)

Sur une page : ajoutez un bloc Boutons, saisissez « Écrivez-nous sur WhatsApp », cliquez sur l’icône de lien et collez l’URL.
Dans le menu d’un thème classique : Apparence → Menus → Liens personnalisés. Collez l’URL, ajoutez le libellé, puis insérez-le dans le menu.
Dans le menu d’un thème basé sur les blocs : dans Apparence → Éditeur, sélectionnez le bloc Navigation de l’en-tête et ajoutez un lien personnalisé.

Vous hésitez sur le type de lien ? Voici une comparaison entre wa.me et un lien court. La différence pratique : un lien court peut être modifié et suivi sans toucher à votre site.

Vitesse, accessibilité et emplacement sur mobile

Préservez la vitesse du site

Chargez-le de manière asynchrone : conservez l’attribut async afin que le script ne bloque jamais l’affichage. Le code du widget le contient déjà.
Un seul bouton : n’utilisez pas le script en même temps qu’une extension WhatsApp. Cela entraîne deux téléchargements pour la même fonction et deux boutons qui se disputent le même coin.

Rendez-le utilisable par tous

Un bouton qui affiche uniquement une icône a besoin d’un texte pour les lecteurs d’écran. Le widget WaLinks comprend un attribut aria-label. Si vous créez votre propre bouton à partir d’une image, ajoutez un texte alternatif comme « Écrivez-nous sur WhatsApp ». Si vous changez la couleur, veillez également à ce qu’elle se distingue suffisamment de l’arrière-plan.

Évitez qu’il masque un élément sur mobile

Sur les petits écrans, le widget mesure 54 pixels et se place à 16 pixels du bord. Le coin inférieur reste toutefois très encombré : bandeaux de cookies, boutons de retour en haut et barre fixe « Ajouter au panier » utilisée par de nombreux thèmes WooCommerce. En cas de conflit, déplacez le bouton à gauche avec data-position="left" ou remontez-le avec une ligne de CSS personnalisé, depuis Apparence → Personnaliser → CSS additionnel ou le panneau des styles dans l’Éditeur de site :

#walinks-widget-your-business { bottom: 90px !important; }

Remplacez your-business par le nom de votre lien, puis vérifiez le résultat sur un véritable téléphone.

Comment suivre les clics sur le bouton

Le widget pointe vers votre lien court : chaque appui passe donc par celui-ci. Les statistiques des liens WhatsApp indiquent les clics, les appareils, les pays et les heures de pointe. Utilisez un lien pour votre site web et un autre pour Instagram ou votre QR code afin de connaître précisément le nombre de conversations générées par votre site.

Si vous souhaitez également recueillir quelques informations sur le client avant son message, découvrez quand utiliser un formulaire de contact ou un bouton WhatsApp.

Erreurs fréquentes

Le bouton n’apparaît pas après son ajout : le cache est presque toujours en cause. Videz le cache de votre extension de performance, celui de votre hébergeur et celui de votre CDN, puis testez dans une fenêtre de navigation privée.
Il apparaît seulement lorsque vous bougez la souris : certaines extensions de performance retardent tout le JavaScript jusqu’à la première interaction du visiteur. Dans WP Rocket, le réglage s’appelle « Retarder l’exécution JavaScript » ; ajoutez wha.mx/w/ aux fichiers exclus. Les autres extensions d’optimisation proposent des options similaires.
Numéro mal formaté : dans un lien wa.me, le numéro comprend l’indicatif du pays, sans +, espace, tiret ni zéro initial.
Code collé dans un seul article : un bloc HTML placé dans un article affecte uniquement cet article. Pour l’ensemble du site, utilisez le pied de page, wp_footer ou une extension d’insertion de code dans l’en-tête et le pied de page.

Questions fréquentes

Ai-je besoin d’une extension pour ajouter WhatsApp à WordPress ? Non. Vous pouvez coller un script dans le pied de page, ajouter quelques lignes à functions.php ou utiliser un bloc Boutons doté d’un lien. Une extension vous évite simplement de manipuler du code.

Cela fonctionne-t-il avec WooCommerce ? Oui. WooCommerce utilise le même thème que le reste de votre site, le bouton apparaît donc aussi dans la boutique.

Cela fonctionne-t-il sur WordPress.com ? L’ajout de scripts ou l’installation d’extensions sur WordPress.com nécessite une offre qui les autorise. Un site WordPress auto-hébergé ne présente pas cette limite.

Puis-je changer de numéro sans modifier mon site ? Oui, avec le widget ou un lien court : modifiez-le dans le tableau de bord et le bouton pointera déjà vers la nouvelle destination. Avec un lien wa.me saisi manuellement, vous devrez le mettre à jour partout où vous l’avez collé.

En résumé

Le bouton flottant s’installe en collant une ligne de script avant </body>.
Placez-le dans la partie de modèle du pied de page pour un thème basé sur les blocs, dans un widget de pied de page pour un thème classique, dans wp_footer avec un thème enfant ou dans une extension d’insertion de code.
Une extension dédiée évite le code, mais demande de l’entretien : vérifiez qu’elle reste à jour.
Pour un bouton statique, un bloc Boutons ou un lien de menu personnalisé suffit.
Chargez-le avec async, n’utilisez qu’un seul bouton et vérifiez sur mobile qu’il ne masque ni le bandeau de cookies ni le panier.
S’il n’apparaît pas, videz le cache et excluez le script du retardement de JavaScript.
Attribuez un lien propre à votre site web et suivez ses clics.