Intégrer un Chatbot IA sur votre site web

Intégration sur un Site web

Il s'agit de la méthode universelle pour ajouter votre chatbot à n'importe quel site web. Vous collez deux courtes lignes dans le code HTML de votre site : une balise <script> qui charge le widget, et un élément <web-chat-agent> qui lui indique quel chatbot afficher. C'est tout, la bulle de chat flottante apparaît dans le coin de chaque page où le code est exécuté.

Si vous utilisez WordPress, Shopify, Wix, Squarespace ou Webflow, consultez plutôt le guide dédié à votre plateforme, il vous montre exactement où coller ce même code.

Où trouver votre Identifiant du chatbot

Vous n'avez jamais besoin de saisir l'identifiant manuellement. Dans le Tableau de bord WebChatAgent :

1. Ouvrez votre chatbot.
2. Allez dans Canaux → Widget de chat et dépliez Afficher les détails d’installation.
3. Cliquez sur le bouton de copie dans la zone de code.

L'extrait copié contient déjà votre Identifiant du chatbot, il vous suffit donc de le coller. (Si vous avez besoin de l'identifiant brut seul, il s'agit de la longue chaîne de caractères présente dans l'URL de votre Tableau de bord : /dashboard/<your-chatbot-id>.)

Le code à coller

Collez ce code juste avant la balise fermante </body> de votre site :

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Remplacez YOUR_ID par votre Identifiant du chatbot (ou, plus simple, copiez l'extrait prêt à l'emploi depuis le Tableau de bord pour que l'identifiant soit déjà renseigné). Le widget se charge de manière asynchrone, il ne ralentira donc pas votre page, et il apparaît sous la forme d'un bouton de chat flottant dans le coin inférieur.

Attributs facultatifs

Le widget récupère ses couleurs, son titre, son Message de bienvenue et son comportement depuis les paramètres de votre Tableau de bord, vous n'avez donc normalement besoin que de chatbot-id. Pour surcharger certains éléments directement dans le code HTML, ajoutez ces attributs à l'élément <web-chat-agent> :

• chatbot-id : Votre Identifiant du chatbot. Obligatoire.
• theme : Style visuel : "default" ou "modern". La valeur par défaut est "default".
• initially-open : Définissez sur "true" pour ouvrir le chat automatiquement au chargement de la page. La valeur par défaut est "false" (fermé).
• tracking-consent : Signal de consentement facultatif pour la personnalisation persistante : "unknown", "denied", ou "granted". S'il est omis, la valeur par défaut est "unknown" et les déclencheurs locaux anonymes continuent de fonctionner.
• context-data : Contexte de session issu de votre page pour l'IA (par exemple "Customer=Acme GmbH;OrderID=A-1023"), utile lorsque le widget s'exécute dans un CRM ou un espace connecté. Formats, limites et remarques sur la sécurité dans le guide pour développeurs.

<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

Tout le reste, couleur de marque, avatar, polices, position et comportement, est configuré sous Canaux → Widget de chat, vous n'avez donc pas besoin de modifier à nouveau le code pour changer le style du widget. Le profil de l'assistant est configuré sous Paramètres → Style de réponse et rôle.

Consentement aux cookies et déclencheurs proactifs

Le widget n'ajoute pas de deuxième bannière de cookies. Sans signal de consentement, il fonctionne en mode de confidentialité anonyme : les déclencheurs de durée, de défilement, d'intention de sortie, d'inactivité, d'URL, de visibilité et de clics répétitifs sont évalués localement en mémoire. La reconnaissance des visiteurs récurrents, les compteurs persistants, l'analytique proactive et les messages d'accueil générés par l'IA attendent un signal granted.

Consultez Consentement aux cookies et déclencheurs proactifs anonymes pour la matrice complète des comportements, les exemples de CMP et la référence de stockage.

Intégrer le chat dans le corps de la page

L'extrait ci-dessus vous fournit un bouton flottant. Si vous préférez intégrer le chat au sein de la mise en page de votre site, par exemple un panneau de chat complet sur une page d'assistance dédiée, utilisez le Widget intégré. Il charge un script différent et un élément différent :

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

Le Chat intégré s'affiche à l'endroit précis où vous placez l'élément, insérez-le donc dans le conteneur où vous souhaitez que le chat apparaisse. Consultez le guide du Chat intégré pour les détails de mise en page.

Fonctionne partout

Les deux extraits utilisent du code HTML standard et un élément personnalisé, ils s'exécutent donc sur n'importe quelle plateforme de site web : WordPress, Shopify, Wix, Squarespace, Webflow et les sites codés manuellement en HTML/JS. Collez le code dans le HTML de votre site et publiez.

Dépannage

• Le widget n'apparaît pas ? Assurez-vous que le code est bien dans le HTML de la page (avant </body>) et que vous avez publié vos modifications ou vidé le cache de votre extension de cache. Vérifiez la console du Navigateur pour détecter d'éventuels scripts bloqués.
• Affichage sur une seule page ? Placez l'extrait dans un emplacement global du site (pied de page / code global), et non sur une seule page.