Intégrer le widget sur un site web

Le widget affiche un assistant EasyRag sur n’importe quel site, sous forme de bulle ou intégré dans un emplacement de la page. Il ne nécessite aucune clé d’API côté navigateur : il obtient un jeton temporaire (5 minutes), lié au site appelant.

1. Déclarer les origines autorisées

Dans la configuration de l’assistant, section Accès et diffusion, renseignez les origines autorisées : la liste des sites qui pourront afficher l’assistant, séparés par des virgules, par exemple :

https://www.exemple.fr,https://intranet.exemple.fr

Important : si la liste est vide, l’assistant est accepté sur tous les sites. Déclarez toujours vos domaines.

Vérifiez aussi que l’assistant est actif, et réglez sa limite de messages par minute.

2. Copier le code d’intégration

Le bouton de génération du code propose trois variantes. La variante recommandée est le script :

<script
  src="https://<adresse-de-l-api>/api/v1/widget.js"
  data-chatbot-id="<identifiant-de-l-assistant>"
  data-button-label="Une question ?"
  data-button-color="#1460d6">
</script>

Collez-le juste avant la balise </body> de vos pages.

Options disponibles

Attribut	Rôle	Valeur par défaut
data-chatbot-id	Identifiant de l’assistant (obligatoire)	—
data-button-label	Texte de la bulle	Chat
data-button-color	Couleur de la bulle (prioritaire sur la couleur de l’organisation)	couleur de l’organisation
data-z-index	Ordre d’empilement	1000
data-panel-width / data-panel-height	Taille du panneau, en pixels	360 / 520
data-expanded-width / data-expanded-height	Taille en mode agrandi	520 / 760
data-inline-target	Sélecteur d’un élément de la page où afficher l’assistant au lieu d’une bulle	—

Variante intégrée dans la page

<div id="assistant" style="width: 100%; height: 600px;"></div>
<script
  src="https://<adresse-de-l-api>/api/v1/widget.js"
  data-chatbot-id="<identifiant-de-l-assistant>"
  data-inline-target="#assistant">
</script>

3. Vérifier

• La bulle apparaît et le message d’accueil s’affiche à l’ouverture.
• Depuis un domaine non déclaré, l’assistant doit refuser de s’initialiser.
• Si votre site applique une politique de sécurité du contenu (CSP), autorisez l’adresse de l’API EasyRag dans script-src et frame-src.

Bon à savoir

• Le widget reprend automatiquement l’identité visuelle de l’organisation à laquelle l’assistant est rattaché.
• Le widget affiche la réponse avec ses numéros de citation, mais pas encore la liste détaillée des sources ; la page publique de l’assistant et l’API la fournissent.
• Pour une intégration dans une application plutôt qu’un site, utilisez l’API REST.