# Widget WhatsApp ## Intégration du widget WhatsApp Ajoutez un bouton de chat WhatsApp flottant à votre site web grâce à ce guide simple. > **Bon à savoir.** Le widget WhatsApp est un simple bouton « cliquer pour discuter » : cliquer dessus ouvre WhatsApp pour votre visiteur afin qu'il puisse vous envoyer un message. Il n'intègre pas les messages dans votre boîte de réception Chats et ne déclenche pas l'IA par lui-même. Pour une expérience de chat IA intégrée directement sur votre site web, utilisez plutôt le [Widget de chat](chat-widget.md) dédié. > > **Vous souhaitez simplement un lien simple ou votre propre bouton ?** Si vous ne voulez pas du widget flottant et préférez lier votre propre bouton (ou un morceau de texte) directement à une discussion WhatsApp, passez à la section [Vous préférez un lien ou un bouton simple ? (wa.me)](#prefer-a-plain-link-or-button-wa-me) ci-dessous. Pour un équivalent SMS, consultez [Ajout d'un lien « cliquer pour envoyer un SMS »](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Installation 1. Ouvrez le fichier HTML de votre site web dans un éditeur de texte. 2. Localisez la balise `` (généralement à la fin de votre fichier HTML). 3. Collez le script suivant juste avant la balise `` : {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Dans le code ci-dessus, remplacez : * `NUMBER` par votre numéro WhatsApp * Par exemple : pour le numéro +1 555 123 4567, utilisez simplement : 15551234567 ### Ajouter un message personnalisé Si vous souhaitez qu'un message pré-rempli apparaisse lorsque quelqu'un clique sur le bouton : 1. Utilisez plutôt ce code : {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Exemple avec un numéro et un message réels : {% code overflow="wrap" %} ```html ``` {% endcode %} ### Ce que vous obtenez Après l'installation, vous verrez automatiquement : * Un bouton WhatsApp vert en bas à droite de votre site web * Le bouton reste visible lors du défilement * Le bouton fonctionne parfaitement sur les appareils mobiles * Une animation subtile apparaît au survol du bouton ### Informations complémentaires * Votre numéro de téléphone peut être écrit avec ou sans : * Signe plus (+) * Espaces * Tirets (-) * Ceux-ci seront automatiquement traités correctement * Le message peut contenir des espaces naturellement * Aucun fichier ou installation supplémentaire requis * Le bouton s'adapte automatiquement aux écrans mobiles ### Exemple de page Web complète {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Vous préférez un lien simple ou un bouton ? (wa.me) Le widget ci-dessus vous fournit un bouton flottant prêt à l'emploi. Mais si vous avez déjà votre propre bouton (ou un lien de menu, une image ou un morceau de texte) et que vous souhaitez simplement qu'il ouvre une discussion WhatsApp avec votre numéro, vous n'avez pas besoin du widget — il vous suffit de le lier à une URL `wa.me`. Le format est : {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Remplacez `NUMBER` par votre numéro complet au format international — **chiffres uniquement, sans signe plus, espaces ou tirets**. Par exemple, pour +31 6 5801 5937, vous utiliseriez : {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Pré-remplir un message Pour qu'un message soit déjà saisi à l'ouverture de la discussion, ajoutez `?text=` suivi de votre message : {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Les espaces dans le message doivent être écrits sous la forme `%20` (c'est simplement ainsi que les liens gèrent les espaces). ### L'ajouter sur un bouton Liez n'importe quel bouton à cette URL — exactement de la même manière que vous lieriez un bouton à n'importe quelle autre adresse Web. En HTML brut, cela ressemble à ceci : {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} Dans un créateur de site Web (Wix, Squarespace, WordPress, Webflow, etc.), ajoutez un bouton comme d'habitude et collez l'URL `wa.me` dans son champ « lien » / « URL ». > **Vous souhaitez un lien court qui alterne entre plusieurs numéros, mémorise les visiteurs récurrents et suit les clics ?** Utilisez les Liens courts (sous **Paramètres → Canaux**) au lieu d'une URL `wa.me` brute.