Comment ajouter un widget de chat WhatsApp gratuit à n'importe quel site Web en quelques minutes : l'approche du lien wa.me brut et un générateur qui produit un extrait personnalisable et sans code.
Il y a deux façons honnêtes d’ajouter un widget de chat WhatsApp à un site Web sans en payer un : coller un lien wa.me brut et le styliser vous-même, ou utiliser un générateur qui vous remet un extrait fini et personnalisable. Les deux sont véritablement gratuits et tous les deux prennent quelques minutes. Ils vous placent juste dans des endroits très différents six mois plus tard.
Cet article couvre les deux, en commençant par le lien brut pour que vous sachiez exactement à quoi vous renoncez lorsque vous le sautez.
La version absolue minimum est une seule ligne de HTML :
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Remplacez 15551234567 par votre numéro au format international complet, sans signe plus, sans espaces, sans zéro initial. Le paramètre text est un message pré-rempli, encodé en URL, donc %20 est un espace et %2C est une virgule. Cliquez dessus et WhatsApp s’ouvre avec ce message déjà tapé dans la boîte, en attente que le visiteur appuie sur envoyer.
wa.me est le propre lien court de Meta pour cela, donc le comportement de l’autre côté est cohérent : sur un téléphone, il ouvre l’application WhatsApp directement si elle est installée, ou envoie le visiteur au magasin d’applications si elle ne l’est pas. Sur un navigateur de bureau sans application installée, il ouvre plutôt web.whatsapp.com dans un nouvel onglet. Vous n’avez pas à créer vous-même cette détection, ce qui est la seule partie de cette approche qui est véritablement résolue pour vous.
Tout le reste ne l’est pas. Ce seul lien est juste du texte bleu souligné où que vous le mettiez. Pour le transformer en bouton flottant du coin inférieur que les gens signifient réellement quand ils disent “widget de chat WhatsApp”, vous écrivez vous-même le CSS :
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Cela fonctionne, mais vous avez maintenant aussi besoin d’un fichier d’icône, d’un z-index assez élevé pour s’asseoir au-dessus de votre banneau de cookie et de tout modal sans couvrir votre propre nav sur mobile, et d’un plan pour ce qui se passe quand quelqu’un veut que le texte du message soit changé le mois prochain, ce qui signifie réouvrir ce même bloc de balisage, partout où il est collé, sur chaque page ou modèle qui l’a.
Le Générateur de Widget de Chat WhatsApp fait le même travail que le lien ci-dessus, plus le style, le positionnement et l’icône, et remet en échange une seule balise de script au lieu d’un bloc de CSS personnalisé dont vous êtes responsable de la maintenance. C’est gratuit, ne nécessite pas de compte, et ne touche pas l’API WhatsApp Business, donc il n’y a pas d’étape de vérification avant que vous puissiez l’utiliser.
Voici la procédure réelle :
#25D366) est le défaut, mais le champ accepte n’importe quelle valeur hexadécimale si vous voulez qu’elle corresponde plutôt à la couleur de marque de votre site.text dans le lien brut, mais modifiable à partir du formulaire au lieu d’une chaîne codée en URL.Au fur et à mesure que vous remplissez le formulaire, un aperçu en direct du bouton s’affiche sur la page, et le panneau de code à côté se met à jour en temps réel avec l’extrait fini :
<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>Cliquez sur Copier, collez cette seule balise n’importe où avant la balise de fermeture </body> sur votre site, et le widget est en direct. Rien d’autre n’a besoin d’être téléchargé, aucun fichier d’icône, aucune feuille de style séparée. Chaque paramètre du formulaire (couleur, position, décalages, message d’accueil, fenêtre contextuelle) est codé en tant qu’attribut data- sur cette seule balise, donc l’ensemble se déplace en un seul collage.
Les deux résultats se ressemblent à la surface, un bouton au coin qui ouvre WhatsApp, mais ils vieillissent différemment.
Avec la version bricolée à la main, chaque paramètre est une valeur enterrée dans les styles en ligne ou un fichier CSS séparé. Changer le message d’accueil signifie trouver et modifier le paramètre text dans une chaîne encodée en URL. Déplacer le bouton parce qu’un nouveau banneau de cookie le chevauche maintenant signifie rééditer le CSS sur chaque page ou modèle où vous l’avez collé, et si vous en avez oublié un, cette page a tranquillement un widget cassé jusqu’à ce que quelqu’un le remarque. Rien de cela n’échoue bruyamment, cela dérive juste hors de synchronisation page par page.
L’extrait généré conserve chacun de ces paramètres en tant qu’attribut étiqueté sur une seule ligne que vous pouvez recopier à partir du formulaire en quelques secondes, puis chercher et remplacer sur votre site si vous n’utilisez pas un en-tête ou un pied de page partagé. Et parce que la logique réelle du bouton vit dans le fichier de script hébergé auquel la balise pointe, pas dans le code que vous avez collé, les corrections de bogues et les améliorations de comportement du widget lui-même se livrent sans que vous touchiez à votre site à nouveau.
La mécanique est la même partout : obtenez l’extrait quelque part qui s’affiche sur chaque page, idéalement juste avant </body>.
theme.liquid, juste au-dessus de la balise de fermeture </body>, via Boutique en ligne → Thèmes → Modifier le code.Chacun de ceux-ci a ses propres bizarreries qui méritent un examen plus approfondi par lui-même, nous aborderons WordPress plus en détail séparément, mais l’étape de collage elle-même est identique partout : une balise de script, un endroit, appliqué à chaque page à la fois.
Chargez le site dans une fenêtre incognito pour que les styles en cache ne masquent pas un vrai problème, et vérifiez le bouton sur un bureau et un vrai téléphone, pas seulement une fenêtre de navigateur redimensionnée. Cliquez dessus une fois à partir de chacun et confirmez qu’il ouvre WhatsApp (l’application sur mobile, web.whatsapp.com sur bureau) avec votre numéro et message d’accueil déjà remplis. Faites ensuite défiler la page avec tous les banneau de cookie ou éléments visqueux visibles. L’échec le plus courant à ce stade est un conflit de z-index, où le widget s’affiche derrière un autre élément en position fixe au lieu de le chevaucher.
C’est vraiment gratuit, ou y a-t-il une prise ? Le générateur lui-même est gratuit sans compte requis. Le script du widget auquel il pointe est hébergé et servi sans frais. Si vous installez plus tard l’extension Chrome de The Chat Quotient pour gérer les conversations qui arrivent par le widget, celle-ci a son propre plan gratuit aussi, mais c’est une étape séparate et optionnelle, pas une exigence d’utilisation du widget.
Un widget WhatsApp est-il la même chose que WhatsApp Web ?
Non, c’est une confusion courante. WhatsApp Web (web.whatsapp.com) est l’interface que vous utilisez pour lire et envoyer des messages WhatsApp à partir d’un navigateur. Un élément Web de widget de chat WhatsApp est le petit bouton que vous ajoutez à votre propre site qui, lorsqu’on clique dessus, ouvre un chat, soit dans l’application WhatsApp sur mobile, soit dans WhatsApp Web sur un bureau qui n’a pas l’application de bureau installée. Le widget est quelque chose que vous intégrez ; WhatsApp Web est l’endroit où la conversation résultante arrive.
Le widget fonctionne-t-il si un visiteur n’a pas WhatsApp installé ? Sur mobile, le cliquer sans l’application installée envoie le visiteur à son magasin d’applications pour installer WhatsApp en premier. Il n’y a pas de contournement à cette étape, puisque le lien sait seulement comment remettre à WhatsApp lui-même, pas pour substituer un autre canal de messagerie.
Puis-je avoir plus d’un numéro WhatsApp, comme les ventes et le support, sur le même widget ? Pas sur un seul bouton. Le widget est construit autour d’un seul numéro WhatsApp par instance. Si vous avez besoin de deux points d’entrée, vous ajouteriez deux widgets avec des positions et des messages d’accueil différents, bien qu’à ce stade une page de contact dédiée avec les deux répertoriée séparément soit généralement plus claire pour les visiteurs que deux boutons flottants empilés dans le même coin.
Dois-je savoir coder pour utiliser le générateur ? Non. Chaque paramètre est un champ de formulaire, et la seule chose que vous collez est la seule balise de script qu’il produit, la même étape de copie-collage quel que soit la plateforme sur laquelle votre site s’exécute.
Un lien wa.me est vraiment tout ce dont vous avez besoin si vous êtes à l’aise d’écrire et de maintenir votre propre CSS et que vous ne vous souciez pas de revisiter ce code chaque fois que quelque chose doit changer. Le Générateur de Widget de Chat WhatsApp produit le même résultat, un bouton flottant qui ouvre un chat WhatsApp pré-rempli, sans le CSS, le fichier d’icône, ou la maintenance qui vient avec le bricolage, et c’est toujours gratuit.
Ajoutez l'extension Chrome et transformez la façon dont vous gérez les conversations WhatsApp pour votre entreprise.