WebChatAgent Logo

Ajouter un Chatbot IA à Webflow

Webflow

Ajoutez un Chatbot IA à votre site Webflow en quelques minutes grâce à la fonctionnalité Custom Code de Webflow. Collez un court extrait de code une seule fois, publiez, et la bulle de chat apparaîtra sur votre site en ligne. Utilisez la méthode globale pour couvrir l'ensemble des pages, ou la méthode par page si vous souhaitez l'afficher uniquement sur une page précise.

Méthode 1 : pour l'ensemble du site (toutes les pages)

  1. Ouvrir les paramètres du site : dans le Webflow Designer, cliquez sur l'icône d'engrenage ou allez dans Site Settings > Custom Code.
  2. Coller dans Footer Code : dans la section Footer Code, collez le code suivant :
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Remplacez YOUR_ID par votre Identifiant du chatbot disponible dans le Tableau de bord WebChatAgent.
  2. Enregistrer et publier : cliquez sur Enregistrer puis publiez votre site. Le Widget de chat apparaîtra sur toutes les pages.

Méthode 2 : sur une seule page

  1. Dans le Webflow Designer, sélectionnez la page sur laquelle vous souhaitez intégrer le Chatbot.
  2. Ouvrez Page Settings (icône d'engrenage à côté du nom de la page).
  3. Faites défiler jusqu'à Custom Code > Before </body> tag.
  4. Collez le même extrait de code que ci-dessus.
  5. Enregistrer et publier.

Méthode 3 : élément Embed

Pour un contrôle accru sur l'emplacement :

  1. Glissez un élément Embed depuis le panneau des composants sur votre page.
  2. Collez l'extrait de code dans l'éditeur de l'élément Embed.
  3. Le Widget s'affichera sous la forme d'une bulle de chat flottante, quel que soit l'emplacement de l'élément Embed.

Trouver votre Identifiant du chatbot

Connectez-vous à votre Tableau de bord WebChatAgent, ouvrez votre assistant et rendez-vous dans Canaux → Widget de chat. Déroulez Afficher les détails d’installation et cliquez sur Copier le code. L'extrait de code contient déjà votre Identifiant du chatbot, vous pouvez donc le coller intégralement au lieu de saisir l'identifiant à la main.

Dépannage

  • Le Widget n'apparaît pas dans le Designer ? Le code personnalisé s'exécute uniquement sur le site publié, et non dans l'aperçu du Webflow Designer. Publiez votre site et consultez-le en ligne.
  • Le Widget n'est pas présent sur toutes les pages ? Vérifiez que vous avez bien utilisé Site Settings > Custom Code (Méthode 1), et non le code au niveau de la page.
  • L'hébergement Webflow est-il obligatoire ? Le code personnalisé fonctionne aussi bien sur les sites hébergés par Webflow que sur le code exporté. Si vous exportez votre site, le code sera inclus dans l'export.