Ce que fait le code généré
L'extrait ajoute un lien en position fixe dans le coin inférieur de vos pages. Ce lien est une URL click-to-chat standard, au format que WhatsApp documente sur sa page d'aide (faq.whatsapp.com/5913398998672934) : https://wa.me/ suivi de votre numéro international complet et, si vous le souhaitez, de ?text= avec un message encodé pour URL. Il ouvre l'application WhatsApp sur téléphone, et WhatsApp Web ou l'application de bureau sur ordinateur.
Tout est intégré : le pictogramme WhatsApp est un tracé SVG, les styles sont isolés sous un même préfixe de classe, et le script se limite à quelques lignes qui gèrent le délai et le message d'accueil refermable. Aucun script, police, image ou cookie externe : le bouton ne ralentit pas votre page et n'ajoute aucun traceur tiers.
Accessible et compatible RTL dès la conception
Les boutons flottants se limitent souvent à une icône, ce qui laisse les utilisateurs de lecteurs d'écran dans le flou. Le lien généré dispose d'un aria-label que vous définissez (« Discuter avec nous sur WhatsApp » par défaut), d'un contour de focus visible pour la navigation au clavier, et d'une icône décorative masquée aux technologies d'assistance. Le message d'accueil possède un vrai bouton de fermeture avec son propre libellé.
Les visiteurs qui ont activé la réduction des animations sur leur appareil voient le bouton sans animation d'apparition ni zoom au survol. Le message d'accueil utilise une direction de texte automatique et des propriétés CSS logiques : l'arabe et les autres écritures de droite à gauche s'affichent correctement, et vous pouvez placer le bouton en bas à gauche pour les sites RTL.
- Lien accessible au clavier avec un nom accessible clair.
- Respecte prefers-reduced-motion.
- Masqué à l'impression, et activable par type d'appareil.
- Fermeture du message d'accueil mémorisée pendant la visite, sans cookie.
Choisir la couleur, la position et le délai
Le coin inférieur droit est la convention sur les sites lus de gauche à droite, et le coin inférieur gauche convient souvent aux sites en arabe, mais vérifiez que le bouton ne masque pas un bandeau cookies, le lanceur d'un chatbot ou la barre de paiement sur mobile. Le vert WhatsApp (#25D366) est immédiatement reconnaissable ; avec une icône blanche, son contraste est d'environ 2:1. Si l'accessibilité prime, un vert plus foncé comme #128C7E offre environ 4:1.
Un délai de quelques secondes laisse les visiteurs lire la page avant l'apparition du bouton, et l'afficher uniquement sur mobile est un choix judicieux lorsque votre équipe répond depuis des téléphones. Limitez le message d'accueil à une ligne courte et précise, par exemple « Une question sur la livraison ? Écrivez-nous. »
Le bouton officiel « Chat on WhatsApp » et les règles de marque
WhatsApp publie aussi un bouton de marque « Chat on WhatsApp » en vert et blanc, en trois tailles, et demande aux entreprises de l'utiliser sans le modifier. D'après le centre d'aide de WhatsApp, il n'est actuellement disponible qu'en anglais. Le bouton-icône flottant de cet outil est un format différent et plus compact ; quel que soit votre choix, ne modifiez pas le logo WhatsApp lui-même et ne laissez pas entendre que WhatsApp cautionne votre entreprise.
Quand un seul téléphone ne suffit plus
Un bouton sur votre site peut rapidement multiplier les discussions entrantes. Avec l'application WhatsApp Business, les conversations sont limitées à un nombre restreint d'appareils associés. Sur la WhatsApp Business Platform (API), le même lien wa.me peut alimenter une boîte de réception d'équipe partagée, où les discussions sont attribuées à des agents, traitées d'abord par des chatbots ou des agents IA, puis relancées avec des modèles approuvés une fois la fenêtre de service client de 24 heures fermée.
Prévoyez qui répond, à quelles heures et dans quels délais. Indiquez vos horaires de réponse dans le message d'accueil si vous ne couvrez pas les discussions 24 h/24.