Documentation

Widget JavaScript

Installez le widget de chat avec le code complet généré dans Canaux.

Le widget JavaScript ajoute une bulle de discussion flottante à votre site. Le code généré contient deux balises de script ; copiez-les toutes les deux depuis l’onglet Canaux de votre agent.

Configuration rapide

  1. Ouvrez Canaux → Intégration au site web pour votre agent
  2. Sélectionnez Widget de chat et activez le canal
  3. Copiez le code généré complet, y compris les deux balises de script
  4. Collez-le dans votre site web avant </body>
  5. Enregistrez et actualisez votre site web

La première balise prépare la file de commandes Agentkit. La seconde charge le widget avec l’ID de votre agent et l’URL du script configurée. Gardez les deux balises et leurs valeurs ensemble.

Configuration du widget

Position

Le widget apparaît par défaut dans le coin inférieur droit. Changez la position dans les paramètres Design.

Couleurs

Les couleurs du widget suivent les paramètres de thème de votre agent. Personnalisez-les dans l’onglet Design.

Mobile

Le widget est entièrement responsive et fonctionne automatiquement sur les appareils mobiles.

Pièces jointes

Les visiteurs peuvent joindre des documents, des feuilles de calcul, des images et des fichiers texte directement depuis le widget. Les pièces jointes servent uniquement de contexte de conversation temporaire et ne sont pas ajoutées aux sources d’entraînement de votre agent.

Les formats pris en charge incluent PDF, Word, Excel, HTML, TXT, Markdown, JSON, CSV, PNG, JPG, WEBP et GIF. Les visiteurs peuvent joindre jusqu’à 3 fichiers par message, avec une limite de 10 Mo par fichier. Les PDF sont analysés jusqu’aux 20 premières pages, pour garantir des réponses rapides et fiables.

Attributs de données

Le widget utilise des attributs de données pour sa configuration :

AttributDescriptionPar défaut
data-chatbotObligatoire. L’ID de votre agent (inclus dans votre code d’intégration)-

Emplacement

Où ajouter le code

Collez les deux balises de script générées avant </body> :

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste both script tags from Channels > Website embed here -->
</body>
</html>

Applications monopages

Pour les SPA, ajoutez le code généré complet à votre modèle HTML principal ou à votre fichier index.

Plusieurs pages

Ajoutez le même code généré sur chaque page où vous voulez afficher le widget, ou placez-le dans un modèle de mise en page commun.

Tester votre installation

Une fois le code ajouté :

  1. Visitez votre site web dans un navigateur
  2. Repérez la bulle de discussion (en bas à droite par défaut)
  3. Cliquez pour ouvrir le chat
  4. Envoyez un message de test
  5. Vérifiez que la réponse est correcte

Dépannage

Le widget n’apparaît pas :

  • Vérifiez dans le code source rendu que les deux balises de script se trouvent avant </body>
  • Vérifiez que l’ID de l’agent est correct
  • Videz le cache du navigateur
  • Vérifiez la console du navigateur pour repérer les erreurs

Mauvaise position :

  • Vérifiez les paramètres Design
  • Recherchez des conflits CSS

Ne répond pas :

  • Assurez-vous que du contenu d’entraînement existe
  • Vérifiez les limites de messages de votre forfait
  • Testez d’abord dans le Playground

Restrictions de domaine

Si vous avez configuré des domaines autorisés :

  • Le widget ne se charge que sur les domaines approuvés
  • Les autres sites ne voient aucun widget (aucune erreur affichée)

Configurer les domaines →

Performances

Le widget est optimisé pour un impact minimal :

  • Chargement asynchrone (attribut async)
  • Bundle de petite taille
  • Aucun blocage du rendu
  • Chargement différé de l’interface de chat

Conflits de style

Le widget utilise des styles isolés et ne devrait pas entrer en conflit avec votre site. Si vous rencontrez des problèmes :

  1. Vérifiez les sélecteurs CSS globaux
  2. Recherchez les règles !important
  3. Contactez le support si les problèmes persistent

Supprimer le widget

Pour le supprimer :

  1. Supprimez les deux balises de script générées de votre HTML
  2. Videz les caches éventuels
  3. Le widget disparaît immédiatement

Étapes suivantes