Intégration Web

Whizbot propose deux méthodes pour intégrer votre agent sur votre site web : un lien direct et un widget embarqué.

---

Lien direct

Chaque agent dispose d'une URL de chat directe au format :

https://app.whizbot.fr/chat?agentId={ID_DE_L_AGENT}

Vous pouvez utiliser ce lien pour :

• Créer un bouton "Chatter" sur votre site
• Rediriger vos utilisateurs depuis un email ou une notification
• L'intégrer dans un QR Code (voir QR Code)

---

Widget embarqué

Le widget embarqué permet d'intégrer le chat Whizbot directement dans une page de votre site web, sans redirection. Il se présente sous la forme d'un script léger qui affiche une icône de chat en bas à droite de votre page.

Fonctionnement

Le widget utilise le même moteur LangGraph que l'interface Whizbot complète, garantissant les mêmes capacités (RAG, GLPI, etc.).

Obtenir le code d'intégration

1. Depuis le backoffice, allez dans Agents et cliquez sur Configurer sur l'agent souhaité.
2. Dans la section Diffusion & Accès, cliquez sur Intégration chat web.

3. Une fenêtre modale s'ouvre avec le code HTML à copier.

Installation

Ajoutez le script suivant dans votre page HTML, de préférence avant la fermeture de la balise </body> :

<script
  src="https://app.whizbot.fr/widget.js"
  data-agent-id="ID_DE_L_AGENT"
></script>

Interface

Le widget affiche une interface de chat complète avec :

• Messages : historique de la conversation
• Saisie : champ de texte pour envoyer des messages
• Bouton fermer : permet de masquer le widget

Personnalisation

Le widget s'adapte automatiquement au thème (clair/sombre) du navigateur de l'utilisateur. Il apparaît sous forme d'icône de chat en bas à droite de votre page.

API de communication

Le widget communique avec la page parent via l'API postMessage :

Message	Direction	Description
{ type: 'close-chat' }	Widget → Page	L'utilisateur a cliqué sur le bouton fermer

Bonnes pratiques

• Placement : Le widget s'affiche en bas à droite de votre page automatiquement.
• Performance : Le widget est léger et ne bloque pas le chargement de votre page.
• Accessibilité : Assurez-vous que le widget est accessible au clavier et aux lecteurs d'écran.

Conseil

Testez le widget sur votre site en environnement de développement avant de le déployer en production.

---

Comparaison

Méthode	Avantages	Inconvénients
Lien direct	Simple, fonctionne partout	Redirige l'utilisateur
Widget embarqué	Reste sur votre site, expérience fluide	Nécessite d'ajouter un script