Documentation

Widget JavaScript

Ajoutez le widget de chat à n’importe quel site web avec une simple balise de script.

Le widget JavaScript est le moyen le plus simple d’ajouter votre agent à n’importe quel site web. Une seule balise de script crée une bulle de discussion flottante sur laquelle les visiteurs peuvent cliquer pour démarrer une conversation.

Configuration rapide

  1. Accédez à l’onglet Publier de votre agent
  2. Sélectionnez Widget de chat (par défaut)
  3. Copiez l’extrait JavaScript affiché
  4. Collez-le dans votre site web avant </body>
  5. Enregistrez et actualisez votre site web

La bulle de discussion apparaît dans le coin de votre page. Votre extrait inclut l’ID de votre agent et l’URL de script correcte.

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

Ajoutez le script juste avant </body> pour de meilleures performances :

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

  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

Applications monopages

Pour les SPA, ajoutez le script à votre modèle HTML principal ou à votre fichier index.

Plusieurs pages

Ajoutez le même script sur chaque page où vous voulez que le widget apparaisse. Ou ajoutez-le au modèle de mise en page de votre site.

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 que le script est bien placé 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 la balise de script de votre HTML
  2. Videz les caches éventuels
  3. Le widget disparaît immédiatement

Étapes suivantes