Pour intégrer un chatbot Agentkit, ouvrez la page Channels → Website embed de votre agent, activez Chat widget et copiez l’intégralité du code généré. Collez les deux balises script dans un pied de page commun à tout le site ou dans un modèle de page, publiez, puis chargez la page publique et envoyez un message de test. Le code généré contient déjà l’ID de votre agent et l’URL du widget configurée. Ne le remplacez pas par un extrait copié depuis un article.
Si vous voulez le chat à l’intérieur d’une section de page, activez plutôt le canal Iframe et copiez son code iframe généré. L’iframe et le widget flottant sont des canaux distincts ; vérifiez donc l’interrupteur de celui que vous utilisez.
Choisissez où le chat doit apparaître
| Objectif | Utilisez | Où l’obtenir |
|---|---|---|
| Une bulle de chat flottante sur tout le site | Chat widget | Channels → Website embed → Chat widget |
| Un panneau de chat dans une page de support ou de contact | Iframe | Channels → Website embed → Iframe |
| Une bulle flottante dans une application React ou Next.js | Chat widget | Utilisez le script généré dans le layout ou le modèle HTML de l’application |
| Une bulle sur tout un site WordPress | Chat widget | Placez les deux balises générées dans un champ de code de pied de page |
Une application React n’a pas besoin d’un package React Agentkit distinct pour cette installation. Pour un exemple de placement dans React ou Next.js, suivez le guide d’intégration React. Le guide de l’iframe montre comment dimensionner un panneau de chat intégré.
Installer le widget flottant
- Créez un agent, ajoutez une source dont vous pouvez vérifier les réponses et essayez quelques questions dans le Playground. Si vous partez de zéro, créez un compte Agentkit.
- Ouvrez la page Channels → Website embed de l’agent. Sélectionnez Chat widget et activez ce canal.
- Copiez le code complet affiché. Il contient un petit script d’amorçage suivi du script asynchrone du widget. Gardez ensemble les deux balises et leurs valeurs générées
data-chatbotetsrc. - Collez le code dans le pied de page partagé ou le modèle HTML du site, avant la balise fermante
</body>. Ajoutez-le une fois par page. Si vous voulez le widget sur une seule page, utilisez plutôt la zone de code de cette page. - Publiez le site. Ouvrez l’URL publique dans une nouvelle fenêtre de navigateur, cliquez sur la bulle et envoyez une question dont vous pouvez vérifier la réponse auprès d’une source approuvée.
L’URL du widget dépend de la configuration d’hébergement d’Agentkit. Copiez donc le code actuel depuis Website embed. Le guide du widget JavaScript contient les étapes de configuration actuelles, et le guide de l’Embed SDK explique ce que fait le script d’amorçage.
React et Next.js
Ajoutez le script au modèle HTML de l’application ou à un layout partagé afin qu’il se charge sur les pages où vous voulez la bulle. Conservez une seule copie du widget sur chaque page rendue. Le guide d’intégration React couvre le placement dans le layout pour React et Next.js. Copiez l’URL et l’ID d’agent actuels depuis Channels → Website embed ; l’installation d’un package ne fait pas partie de cette configuration.
WordPress
Pour une installation sur tout le site, collez les deux balises script générées dans le champ Footer de l’écran Header & Footer de WPCode. Enregistrez, videz tout cache du site, puis inspectez une page publique. WordPress peut retirer les scripts d’un bloc HTML personnalisé lorsque votre compte n’a pas la permission de les publier ; vérifiez donc le code source de la page rendue si la bulle est absente. Suivez le guide d’installation WordPress pour le chemin de menu exact et les vérifications.
Intégrer le chat dans une page
Choisissez Iframe sur la même page Website embed, activez le canal et copiez l’iframe généré. Collez-le à l’endroit où le chat intégré doit apparaître. Son URL pointe vers la page iframe hébergée de votre agent. Le panneau intégré reste dans cette section de page ; il n’ajoute pas de bulle flottante au reste du site. Donnez à l’iframe une hauteur suffisante dans votre layout, utilisez Visit pour prévisualiser la page de chat hébergée, puis testez l’iframe sur votre page publiée. L’iframe n’expose pas le SDK window.agentkit de la page parente ; utilisez donc le widget script si vous avez besoin de ces commandes navigateur. Consultez les instructions de l’iframe.
Vérifier le résultat avant le lancement
Ouvrez la page publiée dans une nouvelle fenêtre de navigateur et notez quatre résultats :
- La bulle ou le panneau intégré apparaît-il à l’endroit attendu ?
- S’ouvre-t-il et accepte-t-il un message ?
- Sa réponse correspond-elle à la source que vous avez utilisée pour le test ?
- Un visiteur peut-il toujours atteindre votre canal de contact habituel si l’agent ne peut pas répondre ?
Si rien n’apparaît, vérifiez d’abord que le canal est activé et inspectez le code source de la page rendue à la recherche des deux balises générées du widget ou de l’iframe. Vérifiez que l’URL du script est absolue et qu’elle se charge dans le panneau Network du navigateur. Un éditeur de contenu ou un cache a pu retirer ou retarder le code. Si l’interface apparaît mais qu’un message échoue, vérifiez les paramètres de l’agent, les domaines autorisés et l’état des sources. Le guide des restrictions de domaine explique comment une liste de domaines autorisés affecte les intégrations.
Conservez la question de test et la réponse observée dans vos notes de lancement. Installer un widget prouve qu’il se charge ; cela ne prouve pas que chaque réponse est correcte. Revérifiez les questions concernées après avoir modifié des sources ou des paramètres.
