Code HTML du widget WhatsApp à copier-coller, du simple lien wa.me à un bouton flottant complet, plus ce que le code brut seul vous laisse à construire vous-même.
Si vous cherchiez le code HTML proprement dit, le voici, sans inscription requise :
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Remplacez 15551234567 par votre numéro au format international complet : indicatif du pays en premier, sans signe plus, sans espaces, sans zéro initial. Ce seul lien suffit à ouvrir une discussion WhatsApp avec votre entreprise. C’est aussi toute la réponse honnête à « donnez-moi le code HTML du widget », car tout ce qui suit est ce que vous (ou un générateur) devez construire vous-même, les parties qu’une seule ligne ne couvre pas.
Un visiteur arrive sur le lien sans rien de tapé. Ajoutez le paramètre text pour qu’un message attende dans la boîte lorsque la discussion s’ouvre :
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Le message doit être encodé en URL : %20 est un espace, %2C est une virgule, %27 est une apostrophe. Écrivez d’abord la phrase que vous voulez, puis passez-la dans n’importe quel encodeur d’URL avant de la coller dans la valeur de text, car un espace ou un signe de ponctuation brut au milieu de la chaîne de requête casse le lien sur certains navigateurs.
Un lien texte n’est pas ce que la plupart des gens entendent par « widget WhatsApp ». Le bouton de coin est du CSS posé sur ce même lien :
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Cette version évite un fichier d’icône séparé en intégrant le glyphe téléphone/discussion en SVG directement dans le code, c’est donc véritablement un bloc autonome : collez-le avant </body> et il n’y a rien d’autre à téléverser. Il vous laisse tout de même quatre choses à gérer à la main, et c’est précisément là que le générateur devient utile.
Le mobile et le bureau ne se comportent pas de la même façon, et rien dans cet extrait ne contrôle cela. Cliquez sur un lien wa.me sur un téléphone avec WhatsApp installé, et l’application s’ouvre directement. Sans application installée, le visiteur est envoyé vers le magasin d’applications à la place, il n’y a aucun message de repli ni méthode de contact alternative que vous puissiez configurer depuis le lien lui-même. Sur un navigateur de bureau, il ouvre web.whatsapp.com dans un nouvel onglet, ce qui ne fonctionne que si le visiteur est déjà connecté à WhatsApp Web dans ce navigateur, sinon il se retrouve face à un code QR sans aucun contexte expliquant pourquoi. Les trois résultats proviennent du même href. Vous ne pouvez ni détecter lequel va se produire ni l’intercepter avec du simple HTML.
Le message pré-rempli vit dans l’URL, pas dans un champ de formulaire. Pour le changer, vous devez encoder à la main une nouvelle chaîne, retrouver chaque page où le lien est collé, et le remplacer là aussi si vous n’avez pas de modèle partagé.
Il n’y a pas de fichier d’icône à remplacer sans modifier le tracé SVG à la main, et aucun moyen de repositionner, redimensionner ou recolorer le bouton sans toucher directement au bloc de style en ligne, ligne par ligne.
Rien ici ne capture un prospect avant l’ouverture de la discussion. Le lien (ou le bouton) va directement vers WhatsApp dès qu’on clique dessus. Si vous voulez un nom et une raison de contact avant que la conversation commence, il s’agit d’un formulaire séparé que vous devriez construire, brancher, et faire passer d’une manière ou d’une autre vous-même dans le paramètre text.
Le Générateur de Widget de Chat WhatsApp est un outil gratuit qui transforme cette même poignée de paramètres en une seule balise de script au lieu d’un bloc de CSS que vous devez maintenir. Définissez votre numéro, choisissez une couleur, réglez la position et les décalages, rédigez un message d’accueil, et activez éventuellement un formulaire de pré-discussion (une courte question, avec l’e-mail ou le téléphone marqué obligatoire ou non) qui recueille du contexte avant même que la fenêtre WhatsApp ne s’ouvre. L’outil produit ceci :
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Chaque paramètre est un attribut data- étiqueté sur une seule ligne, donc changer le message d’accueil ou déplacer le bouton vers l’autre coin signifie recopier la balise depuis le formulaire, pas fouiller dans un fichier CSS. L’icône, la logique de positionnement, la gestion des liens profonds pour mobile contre bureau, et le formulaire de pré-discussion vivent tous dans le script hébergé vers lequel pointe la balise, ce que le code HTML brut ci-dessus ne peut pas faire seul sans que vous l’écriviez vous-même.
Si vous collez un extrait généré et voulez savoir ce que chaque ligne contrôle avant de la modifier à la main, voici ce que la balise accepte :
| Attribut | Contrôle |
|---|---|
data-widget-id | ID unique émis par le générateur, ne le modifiez pas |
data-whatsapp-number | Numéro de destination, format international, sans + |
data-color | Arrière-plan du bouton, toute valeur hexadécimale |
data-position-vertical | top ou bottom |
data-position-horizontal | left ou right |
data-offset-vertical / data-offset-horizontal | Distance en pixels depuis ce bord |
data-z-index | Ordre d’empilement, augmentez-le si un autre élément fixe couvre le bouton |
data-greeting | Texte du message pré-rempli, aucun encodage URL manuel nécessaire |
data-prechat | true pour afficher un court formulaire avant l’ouverture de la discussion |
data-prechat-title / data-prechat-description / data-prechat-question | Texte affiché sur le formulaire de pré-discussion |
Le code HTML brut et la balise de script générée vont au même endroit : quelque part qui s’affiche sur chaque page, idéalement juste avant </body>.
theme.liquid, juste au-dessus de </body>, via Boutique en ligne → Thèmes → Modifier le code.Le lien HTML brut nécessite-t-il un compte WhatsApp Business ?
Non. Un numéro WhatsApp personnel fonctionne avec un lien wa.me de la même façon qu’un numéro Business. Les fonctionnalités propres à Business, comme un catalogue ou des réponses automatisées, ne font pas partie du lien lui-même.
Pourquoi mon bouton affiche-t-il une image cassée au lieu d’une icône ?
Cela arrive quand le HTML référence un fichier d’icône externe (<img src="/whatsapp-icon.svg">) qui n’a pas été téléversé à ce chemin. La version SVG en ligne ci-dessus évite entièrement ce problème puisque l’icône est écrite directement dans le HTML.
Puis-je plutôt mettre le HTML du widget dans une balise <head> ?
Techniquement, la balise ancre elle-même doit s’afficher dans le <body>, puisque le contenu de <head> ne s’affiche pas. Les scripts peuvent se charger depuis <head>, mais placer l’extrait juste avant </body> évite de bloquer le rendu et correspond au schéma attendu par la plupart des constructeurs de sites.
Y a-t-il une limite au nombre de widgets WhatsApp que je peux ajouter sur une page ? Rien ne vous empêche d’en coller deux, mais deux boutons flottants empilés dans le même coin ressemblent généralement à un bogue plutôt qu’à une fonctionnalité. Si vous avez besoin de deux numéros (ventes et support, par exemple), donnez à chacun une position distincte au lieu de les superposer.
Cela fonctionne-t-il de la même façon sur Squarespace ? Le panneau d’injection de code de Squarespace (sous Paramètres → Avancé) accepte l’une ou l’autre version de la même façon que le bloc HTML personnalisé de WordPress, l’injection dans le pied de page l’applique à l’échelle du site en un seul endroit.
Le code HTML littéral d’un widget WhatsApp est une seule balise <a href="https://wa.me/...">, et vous l’avez maintenant. Le transformer en ce bouton flottant, personnalisé et capteur de prospects que la plupart des gens imaginent signifie soit écrire et maintenir vous-même le CSS et les cas particuliers des liens profonds, soit laisser le Générateur de Widget de Chat WhatsApp produire la balise de script finie en un seul collage, gratuitement, sans compte requis.
Ajoutez l'extension Chrome et transformez la façon dont vous gérez les conversations WhatsApp pour votre entreprise.