Ajoutez un widget de chat WhatsApp à WordPress avec un extrait de code à copier-coller plutôt qu'un plugin : trois méthodes de placement, et ce que vous perdez en installant un plugin de plus.
Cherchez « widget de chat WhatsApp WordPress » et la plupart des résultats vous orientent vers un plugin : installez-le, activez-le, configurez-le dans son propre écran de paramètres, et voilà une chose de plus sur votre site qu’il faut mettre à jour à chaque changement du cœur de WordPress ou de votre thème. Il existe une voie plus rapide qui évite complètement le plugin. Un widget WhatsApp est un bouton flottant, et un bouton flottant, c’est quelques lignes de HTML plus une balise de script, deux choses que WordPress sait déjà où coller sans rien ajouter à votre page des plugins.
Voici comment faire, de trois façons différentes selon la manière dont votre site est construit, et les cas où un plugin dédié se justifie réellement à la place.
Un plugin WhatsApp pour WordPress n’a rien de factice ou de défaillant, il ajoute réellement un bouton flottant, tout comme l’approche par extrait de code. La différence, c’est ce qu’il coûte à conserver. Chaque plugin sur un site WordPress est du code qui s’exécute à chaque chargement de page, qui a besoin de ses propres mises à jour quand WordPress ou PHP changent de version, et qui est une entrée de plus qu’un scanner de sécurité signale s’il devient obsolète. Un site avec un constructeur de pages, un plugin SEO, un plugin de cache, un plugin de formulaire, et maintenant un plugin WhatsApp, a cinq éléments distincts qui peuvent entrer en conflit les uns avec les autres, et les plugins de widget WhatsApp en particulier ont tendance à charger leur propre CSS et JavaScript sur chaque page, que le visiteur clique un jour sur le bouton ou non.
Un extrait collé n’a ni écran de paramètres, ni journal des modifications, ni avis de compatibilité. C’est un bloc statique dans le pied de page de votre thème ou un bloc HTML personnalisé dans une page, et WordPress le traite exactement comme n’importe quel autre contenu intégré. Rien à activer, rien à maintenir à jour.
Cela dit, un plugin n’est pas un mauvais choix pour tous les sites. Si vous n’êtes pas à l’aise pour coller du code où que ce soit, ou si vous voulez que les paramètres du widget puissent être modifiés depuis wp-admin par quelqu’un qui ne devrait pas s’approcher d’Apparence → Éditeur de fichiers de thème, l’interface de paramètres d’un plugin est le compromis le plus sûr. La méthode de l’extrait de code suppose que copier-coller un bloc de code une fois, puis n’y revenir que lorsque vous voulez réellement changer quelque chose, vous convient.
Le Générateur de Widget de Chat WhatsApp transforme votre numéro, la couleur du bouton, la position et le message d’accueil en une seule balise de script. Remplissez le formulaire : numéro WhatsApp au format international, sans zéro initial ni signe plus, choisissez une couleur, choisissez le coin où se place le bouton, et l’outil produit quelque chose comme ceci :
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>C’est tout le widget. Aucun fichier d’icône à téléverser, aucune feuille de style à charger, aucun PHP. Copiez-le, et choisissez l’un des trois emplacements ci-dessous selon la façon dont votre site WordPress est construit.
Si votre thème est construit sur l’éditeur de blocs (Gutenberg), l’endroit le plus rapide pour déposer l’extrait est directement sur une page ou dans un bloc réutilisable, mais cela n’affiche le widget que sur cette seule page. Pour un widget présent sur tout le site, l’éditeur de blocs n’est pas vraiment conçu pour une injection à l’échelle du pied de page, sauf si votre thème expose une partie de modèle pour cela.
La plupart des thèmes qui prennent en charge l’édition complète du site vous permettent d’ajouter un bloc HTML personnalisé directement dans le modèle du pied de page :
Comme il se trouve dans la partie de modèle du pied de page, il s’affiche désormais sur chaque page qui utilise ce pied de page, ce qui, sur la plupart des thèmes, représente toutes les pages du site.
Les thèmes classiques (non basés sur les blocs) n’ont pas de partie de modèle de pied de page à modifier visuellement, l’extrait va donc directement dans le fichier PHP du thème à la place :
</body>, généralement vers la fin du fichier.</body>.C’est la seule méthode qui touche directement au code du thème, elle comporte donc la véritable mise en garde de l’approche par extrait de code : une mise à jour du thème peut écraser footer.php et supprimer silencieusement le collage. Si votre thème prend en charge un thème enfant, effectuez cette modification dans le footer.php du thème enfant à la place, puisque les fichiers d’un thème enfant survivent aux mises à jour du thème parent. Si vous n’utilisez pas de thème enfant et ne voulez pas en configurer un, un plugin comme Insert Headers and Footers (un plugin à usage unique et à faible maintenance, pas un plugin complet de widget WhatsApp) vous donne un champ de pied de page dédié qui n’est lié à aucun fichier de thème, et qui survit automatiquement à chaque mise à jour du thème.
Si le site est construit avec un constructeur de pages, il existe généralement un widget conçu exactement pour ça :
Les deux constructeurs affichent le HTML brut et la balise de script tels quels, aucune désinfection ne supprime la balise <script> comme le font certaines zones de contenu WYSIWYG, donc le widget se charge et se comporte exactement comme s’il avait été collé directement dans footer.php.
Quelle que soit la méthode utilisée pour le coller, chargez le site dans une fenêtre de navigation privée pour qu’une page en cache ne vous affiche pas une version périmée, et vérifiez chaque modèle sur lequel le widget est censé apparaître : la page d’accueil, un article de blog, et toute page de destination construite avec un modèle différent du reste du site, car une modification du pied de page dans un seul fichier de thème ou modèle de constructeur ne couvre pas automatiquement une page de destination qui utilise un modèle séparé. Cliquez sur le bouton à la fois sur ordinateur et sur un vrai téléphone. Sur mobile avec WhatsApp installé, il devrait ouvrir l’application directement avec votre numéro et le message d’accueil pré-remplis ; sur ordinateur, il ouvre web.whatsapp.com dans un nouvel onglet.
Certaines situations font pencher la balance à nouveau vers l’installation d’un plugin dédié :
Si plusieurs personnes non techniques gèrent le site et qu’aucune d’elles ne devrait s’approcher de l’Éditeur de fichiers de thème, l’écran de paramètres d’un plugin est plus sûr que de faire confiance à tout le monde pour ne pas toucher à footer.php. Si vous voulez que le widget s’affiche ou se masque par page ou par type de contenu via une case à cocher dans la barre latérale de l’éditeur plutôt qu’en modifiant un fichier de modèle, cette logique par page est exactement ce que le PHP d’un plugin gère et qu’un extrait statique ne fait pas. Et si vous utilisez déjà une intégration complète de l’API WhatsApp Business via un plugin qui gère aussi le widget comme un élément parmi un ensemble de fonctionnalités plus large, remplacer seulement la partie widget par un extrait séparé ajoute une chose de plus à maintenir plutôt que d’en supprimer une.
Pour le cas courant, un numéro WhatsApp, un bouton, le même comportement sur chaque page, l’extrait de code fait exactement le même travail sans rien laisser à mettre à jour plus tard.
Est-ce que cela va ralentir mon site WordPress ?
La balise de script utilise async et defer, elle se charge donc sans bloquer le reste de la page, et il s’agit d’une seule requête externe au lieu des multiples fichiers de style et de script séparés qu’un plugin complet pourrait charger.
Est-ce que ça fonctionne avec des plugins de cache comme WP Rocket ou W3 Total Cache ? Oui. Comme il s’agit d’une balise de script statique, et non de quelque chose généré par PHP à chaque requête, la mise en cache des pages n’interfère pas avec elle, contrairement à certains widgets basés sur des plugins qui sont parfois supprimés par des réglages de minification HTML trop agressifs.
Puis-je utiliser cela avec WooCommerce ? Oui, le placement est identique : footer.php, une partie de modèle de pied de page, ou le modèle de pied de page de votre constructeur de pages, aucun de ces éléments ne se soucie de savoir si le site utilise aussi WooCommerce.
Que faire si mon thème ne dispose pas de l’Éditeur de fichiers de thème ? Certains hébergeurs le désactivent pour des raisons de sécurité. Dans ce cas, utilisez le bloc HTML personnalisé dans votre partie de modèle de pied de page si votre thème prend en charge l’édition complète du site, le widget d’intégration de votre constructeur de pages si vous en avez un, ou un petit plugin à usage unique comme Insert Headers and Footers en solution de repli, qui ne nécessite de toucher à aucun fichier de thème.
Dois-je réinstaller l’extrait si je change de thème WordPress ? Oui, puisqu’il a été collé dans le footer.php ou la partie de modèle de l’ancien thème. Recopiez le même extrait depuis le générateur (votre ID de widget reste le même) et collez-le dans le nouveau thème en utilisant celle des trois méthodes qui lui convient.
Un widget WhatsApp, c’est une seule balise de script, et WordPress dispose déjà de trois emplacements conçus pour accueillir exactement cela : un bloc HTML personnalisé dans votre modèle de pied de page, footer.php via l’Éditeur de fichiers de thème, ou le widget de code intégré de votre constructeur de pages. Aucun d’eux ne nécessite d’installer un plugin dédié à cette tâche. Récupérez l’extrait depuis le Générateur de Widget de Chat WhatsApp, collez-le dans celle des trois méthodes qui correspond à la construction de votre site, et c’est en ligne, sans rien de nouveau à mettre à jour à la prochaine version de WordPress.
Ajoutez l'extension Chrome et transformez la façon dont vous gérez les conversations WhatsApp pour votre entreprise.