Pour ajouter un chatbot Agentkit à Webflow, copiez les deux balises script générées depuis Channels → Website embed → Chat widget. Placez-les dans le Footer code à l'échelle du site de Webflow ou dans le champ Before </body> d'une seule page, puis publiez. Vérifiez la page publiée et posez une question dont vous connaissez déjà la réponse.
Le code actuel d'Agentkit comprend un petit bootstrap de file d'attente suivi du chargeur du widget, avec votre ID de chatbot et l'URL actuelle du script. Copiez-le d'un bloc depuis votre propre tableau de bord.
Vérifiez l'accès avant de commencer
Les règles de code personnalisé de Webflow exigent un Workspace Core, Growth, Agency ou Freelancer, ou un plan Site actif. Un Site manager ou un Designer doit ajouter le code. Si vous ne pouvez pas ajouter de code personnalisé, vérifiez le plan et votre rôle avant de modifier le chatbot. Webflow ne garantit pas que le code personnalisé tiers fonctionnera et ne fournit pas de dépannage direct pour celui-ci.
Vous avez aussi besoin d'un chatbot Agentkit avec Chat widget activé. Créez-en un, ajoutez une source de site web à jour ou des réponses Q&A approuvées, et testez quelques questions dans le playground. Vérifiez les réponses avant d'inviter des visiteurs.
Si vous ajoutez une URL Webflow comme source de site web, vérifiez ce qu'Agentkit a réellement indexé. Un crawl ou un sitemap peut découvrir plusieurs pages, mais les chemins exclus, le contenu inaccessible et les échecs d'extraction peuvent laisser des lacunes. Le guide des sources de site web explique comment inspecter et restreindre le crawl. Ajoutez une source Q&A exacte pour une réponse de politique qui nécessite une formulation délibérée.
Placez le code à un seul endroit dans Webflow
Pour un widget sur chaque page :
- Ouvrez la page Channels → Website embed → Chat widget de votre chatbot dans Agentkit. Activez le canal et copiez l'intégralité du bloc de code généré, y compris les deux balises script.
- Dans Webflow, ouvrez Site settings → Custom code. Collez le code dans Footer code, que Webflow insère avant la balise de fermeture
</body>. - Enregistrez les modifications et publiez sur le domaine que vous souhaitez tester. Enregistrer le champ seul ne met pas à jour le site vu par les visiteurs.
Pour un widget sur une seule page, laissez les Site settings vides. Dans le Designer Webflow, ouvrez Page settings → Custom code → Before </body> tag de la page, collez les deux balises, enregistrez et publiez. Répétez uniquement sur les pages qui ont besoin du widget. Webflow insère le code de page après le code du site, donc gardez l'extrait à un seul endroit pour faciliter les modifications et le dépannage.
Le guide d'installation Webflow propose une version plus courte de ces étapes.
Vérifiez la page publiée
Ouvrez le domaine *.webflow.io publié ou votre domaine personnalisé dans un nouvel onglet. Webflow indique que le code personnalisé peut s'exécuter dans l'aperçu du Designer, mais les visiteurs ne recevront pas une modification enregistrée tant que vous n'aurez pas publié. Testez le domaine réellement utilisé par les visiteurs.
Utilisez cette vérification d'acceptation avant d'inviter du trafic :
| Vérification | Résultat attendu |
|---|---|
| Source de la page | La balise de bootstrap de file d'attente et la balise du chargeur du widget issues du code généré, installées à un seul endroit |
| Widget | Le lanceur s'ouvre sur les pages publiées desktop et mobile où vous l'avez placé |
| Réponse connue | Une question sur du contenu approuvé renvoie la réponse prévue |
| Domaine | Les domaines de staging et personnalisés que vous testez sont autorisés si vous avez activé les restrictions de domaine |
Par exemple, un site de services pourrait tester « Proposez-vous des rendez-vous le samedi ? » par rapport à une page d'horaires approuvée. Si la réponse est absente ou incorrecte, corrigez la source ou ajoutez une réponse Q&A exacte et répétez le test. La présence d'une bulle de chat prouve seulement que le widget s'est affiché.
Si le lanceur est absent, inspectez la source de la page publiée pour trouver les deux balises, confirmez que Chat widget est activé et vérifiez les requêtes réseau en échec du navigateur. Si vous ne pouvez pas ajouter de code personnalisé, revenez aux exigences de plan et de rôle de Webflow. Si vous avez collé l'extrait à la fois dans les Site settings et les Page settings, supprimez une copie et republiez. Si le lanceur s'ouvre mais que la réponse échoue, vérifiez les sources et les domaines autorisés du chatbot avant de modifier le code Webflow.
Après une installation réussie, examinez les premières vraies questions et corrigez les lacunes des sources. Revérifiez lorsque vous modifiez une page Webflow ou passez du staging à votre domaine personnalisé. Pour un panneau intégré au contenu de la page plutôt qu'un lanceur flottant, utilisez le canal iframe distinct d'Agentkit.
