Comment ajouter un chatbot IA à votre site Webflow

Les sites Webflow sont soignés, rapides, et offrent un contrôle de design précis. Mais ils n’intègrent pas de chat IA d’origine. Si vous voulez un chatbot qui comprenne vraiment votre contenu et puisse tenir de vraies conversations avec vos visiteurs, il faut l’ajouter vous-même.

La bonne nouvelle : ajouter un chatbot IA à Webflow prend environ 20 minutes et ne nécessite aucun code, à part coller une seule balise de script. Vous créez le chatbot, l’entraînez sur le contenu de votre site, et l’ajoutez à Webflow via les paramètres Custom Code. Il fonctionne sur toutes les pages, s’accorde à votre design, et commence à répondre aux questions des visiteurs immédiatement.

Ce guide couvre l’ensemble du processus : création et entraînement du chatbot, intégration dans Webflow, personnalisation de l’apparence, et configuration pour de meilleurs résultats.

Comparatif des options de chatbot pour Webflow

Avant de plonger dans la configuration, voici comment les principales approches pour ajouter du chat à Webflow se comparent.

Si vous avez besoin d’un widget de chat où une équipe humaine répond en temps réel, un outil de chat en direct comme Intercom est le bon choix. Si vous voulez un assistant propulsé par l’IA qui répond automatiquement aux questions, entraîné sur le contenu réel de votre site, un chatbot IA est le meilleur choix. La plupart des propriétaires de sites Webflow veulent cette seconde option — un assistant en libre-service qui traite les questions des visiteurs sans nécessiter de personnel dédié.

Étape 1 : créez votre chatbot

Commencez par créer un chatbot sur Agentkit. Il vous faut un compte gratuit.

1. Allez sur Agentkit et inscrivez-vous.
2. Créez un nouveau chatbot et donnez-lui un nom qui reflète son objectif (par exemple, « Assistant du site » ou le nom de votre marque).
3. Choisissez un modèle d’IA. GPT-4o est un choix par défaut solide. Vous avez une gamme de modèles au choix, répartis entre OpenAI, Anthropic (Claude) et Google (Gemini).

Étape 2 : entraînez-le sur le contenu de votre site Webflow

C’est l’étape qui rend le chatbot réellement utile. Vous lui donnez le contenu réel de votre site web pour qu’il puisse répondre avec précision aux questions des visiteurs.

Ajoutez l’URL de votre site web

1. Dans le tableau de bord Agentkit, accédez à la page Sources de votre chatbot.
2. Cliquez sur Ajouter une source et choisissez Site web.
3. Saisissez l’URL de votre site Webflow (par exemple, https://yoursite.webflow.io ou votre domaine personnalisé https://yoursite.com).
4. L’outil d’exploration suit les liens depuis votre URL principale et indexe toutes les pages accessibles : votre page d’accueil, page à propos, pages de services, portfolio, articles de blog, FAQ, tarifs, et tout autre contenu lié.

Pour les sites Webflow qui utilisent des interactions, des animations ou du contenu chargé dynamiquement, l’outil d’exploration d’Agentkit utilise Firecrawl pour exécuter le JavaScript avant l’indexation. Cela garantit que le contenu chargé via les interactions Webflow est capturé avec précision.

Ajoutez des paires Q&R pour les sujets clés

Si l’exploration du site capture votre contenu général, les paires Q&R vous donnent un contrôle précis sur des réponses spécifiques. Créez des paires pour les questions les plus importantes de vos visiteurs :

Les paires Q&R sont prioritaires sur le contenu exploré, elles sont donc votre outil pour garantir que le chatbot dit exactement ce que vous voulez sur les sujets critiques.

Importez des documents (facultatif)

Si vous avez des ressources qui ne sont pas publiées sur votre site Webflow — études de cas au format PDF, documents de spécification de service, grilles tarifaires — importez-les comme sources documentaires. Le chatbot utilisera ce contenu en complément des données de votre site pour répondre aux questions.

Testez dans le Playground

Avant d’ajouter le chatbot à votre site en ligne, testez-le dans le Playground d’Agentkit.

Posez les questions que vos visiteurs posent habituellement :

• « Quels services proposez-vous ? »
• « Combien ça coûte ? »
• « Comment puis-je démarrer ? »
• « Travaillez-vous avec des entreprises du secteur [secteur] ? »
• « Quelle est votre politique de remboursement ? »

Si une réponse est incorrecte, incomplète ou mal formulée, ajustez vos données d’entraînement. Ajoutez ou mettez à jour des paires Q&R, ajoutez davantage d’extraits de texte, ou affinez votre source de site web pour inclure des pages spécifiques que vous avez peut-être manquées.

Étape 3 : personnalisez l’apparence du widget

Avant l’intégration, configurez le widget du chatbot pour qu’il corresponde au design de votre site Webflow.

Dans le tableau de bord Agentkit, accédez aux Paramètres de votre chatbot :

Thème de couleur. Définissez la couleur principale pour qu’elle corresponde à votre marque. Utilisez le code hexadécimal exact de votre guide de style Webflow. La bulle du chatbot, l’en-tête et le bouton d’envoi utilisent tous cette couleur.

Position. Choisissez en bas à droite (par défaut et le plus courant) ou en bas à gauche. Choisissez le côté qui n’entre pas en conflit avec d’autres éléments flottants de votre site Webflow.

Message de bienvenue. Rédigez un message qui correspond à la voix de votre marque et fixe des attentes claires :

• Pour une entreprise de services : « Bonjour, je peux répondre à vos questions sur nos services, nos tarifs et notre processus. En quoi puis-je vous aider ? »
• Pour un produit SaaS : « Bienvenue ! Posez-moi vos questions sur notre produit, nos fonctionnalités ou nos tarifs. »
• Pour un site portfolio : « Bonjour. Je peux vous parler de nos réalisations, de nos capacités, et de la façon dont nous collaborons avec nos clients. »

Messages suggérés. Ajoutez trois à cinq messages suggérés qui orientent les visiteurs vers vos conversations les plus précieuses :

• « Quels services proposez-vous ? »
• « Combien ça coûte ? »
• « Puis-je voir des exemples de vos réalisations ? »
• « Comment puis-je démarrer ? »

Avatar. Importez votre logo ou une icône de marque comme avatar du chatbot pour un rendu cohérent.

Étape 4 : intégrez-le dans Webflow

Voici l’installation concrète. Vous avez deux options dans Webflow : à l’échelle du site (toutes les pages) ou par page.

Option A : installation à l’échelle du site (recommandée)

Ceci ajoute le chatbot à toutes les pages de votre site Webflow.

1. Dans le tableau de bord Agentkit, accédez aux Paramètres de votre chatbot puis à Publier.
2. Copiez la balise de script :

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. Dans Webflow, ouvrez les Project Settings (l’icône en forme de roue dentée dans la barre latérale gauche du Designer, ou depuis le tableau de bord du projet).
4. Allez dans l’onglet Custom Code.
5. Collez la balise de script dans la section Footer Code (le champ intitulé « Before </body> tag »).
6. Cliquez sur Save Changes.
7. Cliquez sur Publish pour que les changements prennent effet.

Le chatbot apparaîtra désormais sur toutes les pages de votre site Webflow publié.

Option B : installation spécifique à une page

Si vous voulez le chatbot uniquement sur certaines pages (par exemple, votre page de tarifs et votre page de contact, mais pas votre blog) :

1. Dans le Webflow Designer, ouvrez la page où vous voulez le chatbot.
2. Ouvrez les Page Settings (icône en forme de roue dentée près du nom de la page dans le panneau Pages).
3. Faites défiler jusqu’à la section Custom Code.
4. Collez la balise de script dans le champ Before </body> tag.
5. Cliquez sur Save puis Publish.

Répétez l’opération pour chaque page où vous voulez le chatbot. Les pages sans le script n’afficheront pas le chatbot.

Vérifier l’installation

Après la publication :

1. Ouvrez votre site Webflow dans un nouvel onglet du navigateur (ou en navigation privée pour éviter le cache).
2. Repérez la bulle de discussion dans le coin inférieur de la page.
3. Cliquez sur la bulle et envoyez un message de test.
4. Vérifiez que la réponse est exacte et que le style semble correct.
5. Testez sur mobile pour confirmer que le widget s’affiche correctement sur les petits écrans.

Si le chatbot n’apparaît pas immédiatement après la publication, forcez le rechargement de la page (Ctrl+Shift+R ou Cmd+Shift+R). Le CDN de Webflow peut prendre une minute pour propager le code mis à jour.

Étape 5 : configurez les restrictions de domaine

Une fois votre chatbot en ligne, restreignez-le à votre domaine afin qu’il ne puisse pas être intégré sur des sites non autorisés.

1. Dans le tableau de bord Agentkit, accédez aux Paramètres de votre chatbot.
2. Sous Restrictions de domaine, ajoutez le domaine de votre site Webflow (par exemple, yoursite.com).
3. Si vous utilisez aussi le domaine Webflow par défaut (yoursite.webflow.io), ajoutez-le également.

Le chatbot ne se chargera que sur les domaines spécifiés. Cela empêche quiconque de copier votre code d’intégration et d’utiliser votre chatbot (et votre quota de messages) sur son propre site.

Conseils spécifiques à Webflow

Travailler avec les interactions Webflow

Si votre site Webflow utilise beaucoup d’interactions et d’animations, le widget du chatbot se charge indépendamment et n’interfère pas avec elles. Le widget utilise une superposition à position fixe, il se place donc au-dessus du contenu de votre page sans être affecté par les transformations Webflow ou les animations déclenchées au défilement.

Pages de collection CMS

Si vous avez un blog ou un portfolio CMS Webflow, le chatbot (installé à l’échelle du site) apparaîtra sur chaque page de collection CMS. Entraînez le chatbot sur l’URL complète de votre site pour qu’il puisse répondre aux questions sur n’importe quel contenu, y compris les pages CMS.

Si le contenu de votre CMS change fréquemment, envisagez le forfait Standard ($119.99/mois), qui inclut le réentraînement automatique. Le chatbot réexplore périodiquement votre site et récupère automatiquement les nouvelles entrées CMS.

Webflow Ecommerce

Pour les sites Webflow Ecommerce, entraînez le chatbot sur vos pages produit, votre politique d’expédition, votre politique de retour et votre FAQ. Le chatbot peut répondre aux questions produit, expliquer les options d’expédition, et gérer les demandes de retour. Voir notre guide du chatbot pour l’e-commerce pour des conseils de configuration détaillés.

Préproduction et production

Si vous utilisez l’environnement de préproduction de Webflow (yoursite.webflow.io) pour tester avant de publier sur votre domaine personnalisé, vous pouvez ajouter le script du chatbot aux deux. Utilisez la restriction de domaine pour contrôler sur quel domaine le chatbot est actif. Pendant les tests, autorisez les deux domaines. En production, restreignez-le à votre domaine personnalisé uniquement.

Impact sur les performances

Le widget Agentkit se charge de façon asynchrone (notez l’attribut async dans la balise de script). Cela signifie qu’il ne bloque pas le chargement de votre page. Il se charge en arrière-plan une fois le contenu de votre page prêt. Il n’y a aucun impact mesurable sur le temps de chargement de votre site Webflow ni sur votre score Lighthouse.

Collecte de prospects sur Webflow

Un chatbot sur votre site Webflow est un outil de collecte de prospects en plus d’être un outil de support. Les visiteurs qui interagissent avec le chatbot ont manifesté un intérêt. Capturer leur e-mail au bon moment transforme un visiteur occasionnel en opportunité de suivi.

Configurer la collecte de prospects

1. Dans le tableau de bord Agentkit, accédez aux Actions de votre chatbot.
2. Activez Collecter des prospects avec le nom et l’e-mail comme champs obligatoires.
3. Configurez le moment où le formulaire apparaît dans les instructions de votre chatbot : « Après avoir répondu à une question du visiteur sur les services ou les tarifs, proposez de lui envoyer plus de détails et utilisez le formulaire de collecte de prospects pour recueillir son e-mail. »

Connecter les prospects à vos outils

Zapier, les webhooks et l’accès à l’API REST sont tous disponibles à partir du forfait Hobby ($29.99/mois).

Pour un aperçu plus approfondi des stratégies de collecte de prospects, voir Comment utiliser les chatbots pour la génération de prospects.

Faire correspondre le chatbot à votre design Webflow

Votre site Webflow a un langage de design spécifique. Voici comment faire en sorte que le chatbot paraisse natif plutôt que rajouté.

Couleur de marque. Copiez la valeur hexadécimale exacte de votre couleur de marque principale depuis le panneau de style de Webflow et utilisez-la comme couleur du widget du chatbot. Cela garantit que la bulle de chat et l’en-tête se fondent dans votre site.

Cohérence typographique. Le widget du chatbot utilise une pile de polices système sobre qui s’accorde bien avec la plupart des choix typographiques de Webflow. Le texte du widget est volontairement neutre pour ne pas jurer avec vos polices personnalisées.

Espacement et position. Si votre site Webflow a un pied de page fixe, un bouton CTA flottant ou une bannière de cookies, positionnez le chatbot du côté opposé pour éviter tout chevauchement. Vous pouvez choisir en bas à gauche ou en bas à droite dans les paramètres du chatbot.

Ton du message de bienvenue. Rédigez le message de bienvenue et les messages suggérés dans la même voix que le texte de votre site Webflow. Si votre site est décontracté et convivial, le chatbot doit s’y accorder. Si votre site est professionnel et formel, le chatbot doit le refléter.

Mesurer la performance du chatbot sur votre site Webflow

Après quelques semaines de fonctionnement, examinez la performance du chatbot dans le tableau de bord Agentkit.

Examinez les journaux de conversation chaque semaine pendant le premier mois. C’est là que vous trouverez les victoires rapides : des questions auxquelles le chatbot répond mal et qui sont faciles à corriger avec une paire Q&R, et des questions auxquelles il répond bien, que vous pouvez utiliser pour valider votre approche d’entraînement.

Forfaits Agentkit pour les sites Webflow

La facturation annuelle fait économiser environ 20 % sur tous les forfaits payants. La plupart des sites Webflow démarrent avec le forfait Free pour tester, puis passent à Hobby une fois qu’ils constatent que le chatbot traite de vraies questions de visiteurs.

Dépannage des problèmes courants

Le chatbot n’apparaît pas après la publication. Le CDN de Webflow peut prendre quelques minutes pour propager le changement. Forcez le rechargement de la page. S’il n’apparaît toujours pas, vérifiez que le script se trouve dans le bon champ Custom Code (Footer Code dans Project Settings, ou Before </body> tag dans Page Settings).

Le chatbot apparaît dans le Designer mais pas sur le site publié (ou l’inverse). L’aperçu du Designer n’exécute pas les scripts personnalisés. Vous ne verrez le chatbot que sur le site publié. C’est le comportement normal de Webflow.

Le chatbot chevauche un élément Webflow. Changez la position du chatbot (en bas à gauche ou en bas à droite) dans les paramètres Agentkit, ou ajustez le z-index de votre élément Webflow s’il doit s’afficher au-dessus du chatbot.

Le chatbot donne de mauvaises réponses. Consultez la question précise dans vos journaux de conversation, puis ajoutez ou mettez à jour une paire Q&R avec la bonne réponse. Les paires Q&R remplacent le contenu exploré pour les questions correspondantes.

Le chatbot ne se charge pas sur des pages spécifiques. Si vous avez utilisé l’installation par page, vérifiez que le script est présent dans les paramètres Custom Code de cette page. Si vous avez utilisé l’installation à l’échelle du site, vérifiez qu’aucun script conflictuel ou en-tête de sécurité ne le bloque.

Pour commencer

Ajouter un chatbot IA à votre site Webflow est l’un des changements à plus fort impact que vous puissiez faire avec le moins d’effort. Une seule balise de script vous donne un assistant disponible 24 h/24 et 7 j/7 qui répond aux questions des visiteurs, capture des prospects, et améliore l’expérience de tous ceux qui visitent votre site.

1. Inscrivez-vous sur Agentkit (gratuit).
2. Créez un chatbot et entraînez-le sur l’URL de votre site Webflow.
3. Ajoutez des paires Q&R pour vos principales questions de visiteurs.
4. Personnalisez le widget pour qu’il corresponde à votre marque.
5. Collez le code d’intégration dans les paramètres Custom Code de Webflow.
6. Publiez et testez.

L’ensemble du processus prend environ 20 minutes. Votre chatbot commence à répondre aux vraies questions de vos visiteurs immédiatement.

Créez votre chatbot gratuitement →

Aucune carte bancaire requise.