Website Chat Widget

Intégrez un chat widget propulsé par AI directement sur votre site web. Les visiteurs obtiennent des réponses instantanées de votre AI agent sans quitter votre site.

Aperçu

Le Website Widget offre :

Bulle de chat flottante sur votre site web
Réponses AI en streaming en temps réel
Apparence personnalisable (couleurs, position, messages)
Moins de 11KB en gzip — impact quasi nul sur les performances
Liste blanche de domaines pour la sécurité

Prérequis

Un AI agent actif dans votre panneau d’administration
Accès au HTML de votre site web (pour coller une balise script)

Étapes de Configuration

Rendez-vous dans Integrations depuis la barre latérale
Faites défiler jusqu’à la section Website Widget
Cliquez sur Create Widget
Saisissez un nom et sélectionnez l’AI agent
Cliquez sur Create

2. Personnaliser l’Apparence

Cliquez sur la carte du widget pour ouvrir le panneau d’édition :

Primary Color — Couleur de la bulle de chat et du header
Text Color — Couleur du texte sur la bulle et le header
Position — Bottom-right ou bottom-left
Welcome Message — Premier message que voient les visiteurs
Suggested Questions — Jusqu’à 4 amorces cliquables
Avatar URL — Image personnalisée dans le header du chat
Border Radius — Arrondi des coins

Un aperçu en direct se met à jour à mesure que vous faites des changements.

3. Définir les Domaines Autorisés (Recommandé)

Restreignez les sites web pouvant intégrer votre widget :

Laissez vide pour autoriser tous les domaines (par défaut)
Ajoutez des domaines spécifiques : example.com, *.example.com
Utilisez des entrées avec port pour le développement : localhost:3000

4. Intégrer sur votre Site Web

Cliquez sur l’icône d’embed sur la carte de votre widget et copiez le code :


<script src="https://core-api.cuneiform.chat/api/widget/widget.js"
  data-widget-id="your-widget-id" async></script>

Collez-le avant la balise </body> sur votre site web.

Comment Cela Fonctionne


Le visiteur ouvre votre site web
  → La bulle de chat apparaît dans le coin
  → Le visiteur clique → Le panneau de chat s'ouvre
  → Le welcome message et les suggested questions s'affichent
  → Le visiteur tape une question
  → L'AI agent recherche dans votre contenu
  → La réponse arrive en streaming en temps réel

Les messages sont traités en temps réel. L’agent recherche dans votre contenu et génère des réponses en utilisant le même pipeline AI que tous les autres canaux.

Fonctionnalités

Réponses en Streaming

Les réponses arrivent en streaming en temps réel via Server-Sent Events (SSE). Les visiteurs voient la réponse apparaître progressivement, comme avec ChatGPT.

Persistance de Session

Les visiteurs récurrents sur le même navigateur reprennent leur conversation précédente dans une fenêtre de 24 heures. Les sessions sont stockées dans le localStorage du navigateur.

Rendu Markdown

Les réponses de l’agent prennent en charge la mise en forme markdown, y compris le gras, l’italique, les listes, les blocs de code et les liens.

Gérer les Widgets

Sur la page Integrations, chaque carte de widget affiche :

Nom et statut du widget
Agent assigné
Actions d’édition, code d’embed et suppression

Action	Comment
Modifier les paramètres	Cliquez sur la carte du widget
Obtenir le code d’embed	Cliquez sur l’icône d’embed
Supprimer	Menu à trois points → Delete

Sécurité

Isolation par Shadow DOM — Le widget est en sandbox par rapport à votre page
HMAC session tokens — Tokens signés avec expiration de 24 heures
Liste blanche de domaines — Restreignez les sites pouvant intégrer votre widget
Rate limiting — 30 messages/minute par session
Aucun accès aux données — Le widget ne peut ni lire ni modifier le contenu de votre page

Dépannage

Vérifiez que la balise script est avant </body>, et non dans <head>
Vérifiez que data-widget-id correspond à votre panneau d’administration
Si la liste blanche de domaines est définie, vérifiez que votre domaine y figure
Consultez la console du navigateur à la recherche d’erreurs

Assurez-vous que l’agent assigné est au statut Active
Vérifiez que l’agent contient des documents dans son contenu
Consultez l’onglet Network du navigateur à la recherche de requêtes API en échec

Problèmes d’apparence

Le widget utilise l’isolation par Shadow DOM. Le CSS de votre page n’affectera pas le widget. Utilisez l’aperçu en direct du panneau d’édition pour personnaliser l’apparence.

FAQ

Oui. Utilisez le même code d’embed sur chaque page. Le widget partage l’état de session entre les pages d’un même domaine.

Fonctionne-t-il sur mobile ?

Oui. Le widget est entièrement responsive et optimisé pour les navigateurs mobiles.

Puis-je retirer le badge « Powered by » ?

Le badge est obligatoire sur les plans Trial et Starter. Passez à Plus ou supérieur pour le retirer.

Fonctionne-t-il avec React/Next.js/Vue ?

Oui. Le widget se charge en tant que script autonome et fonctionne avec n’importe quel framework, y compris les single-page applications.

Quelle est la limite de longueur des messages ?

4 000 caractères par message.