Widget & code d'intégration

Chemin : /dashboard/embed · Permission : Module Paramètres

Le widget est le moyen principal par lequel les utilisateurs interagissent avec votre assistant IA sur votre site web. Cette page explique comment le déployer, le rôle de chaque attribut d'intégration et le fonctionnement interne du widget.

Obtenir votre code d'intégration

La méthode la plus simple pour obtenir votre code d'intégration :

Allez dans Dashboard → Embed dans la barre latérale.
La page génère automatiquement le script correct pour votre bot actuel et votre domaine.
Cliquez sur Copy pour copier l'intégralité du snippet d'intégration.
Collez-le dans le HTML de votre site web, juste avant la balise </body>.

Référence du script d'intégration

<script 
  src="https://user.frenzy.bot/chatbot-widget/v1/js/loader.js"
  data-bot-id="sales-assistant"
  data-bot-name="Sales Assistant"
  data-theme-color="#3b82f6"
  data-backend-url="https://user.frenzy.bot"
  async>
</script>

Attributs

Attribut	Requis	Description
`data-bot-id`	Oui	L'identifiant unique (slug) de votre bot.
`data-bot-name`	Non	Le nom affiché en haut de la fenêtre de chat.
`data-theme-color`	Non	Couleur principale du widget (code hexadécimal).
`data-backend-url`	Non	L'URL du serveur. Par défaut `https://user.frenzy.bot` (ou votre domaine personnalisé).

Comment trouver votre ID de bot

Ouvrez le tableau de bord et accédez à Embed ou Settings.
L'ID du bot est affiché dans le code d'intégration et sur la page de gestion du bot.
Format : caractères alphanumériques en minuscules avec des tirets (ex: sales-assistant, support-bot).

Page d'intégration dynamique

La page Dashboard → Embed détecte automatiquement votre nom d'hôte actuel et génère le snippet d'intégration correct. C'est plus sûr que de coder les URLs en dur car :

Si vous changez de domaine plus tard, le code généré reflètera automatiquement le nouveau domaine.
Chaque bot possède son propre snippet avec le bon data-bot-id.
La copie en un clic accélère le déploiement.

Le widget FRENZY.BOT est conçu pour une utilisation en production avec les capacités suivantes :

Fonctionnalité	Description
Isolation Shadow DOM	Empêche le CSS de votre site de perturber le design du widget
Persistance de session	L'historique de chat survit au rafraîchissement de la page via le localStorage
Lazy loading	Évite les ralentissements lors de conversations prolongées
Fenêtre de contexte	Envoi des 6 derniers messages à l'IA pour garantir la qualité des réponses
Multilingue	Supporte plusieurs langues avec détection automatique
Support RTL	Mise en page complète de droite à gauche pour l'hébreu et l'arabe
Suggestions de questions	Questions pré-rédigées affichées sous le message de bienvenue
Formulaire de contact	Capture de leads dans le chat avec champs configurables
Text-to-speech	Lecture audio optionnelle pour les réponses de l'IA

Avant d'ajouter le widget à votre site de production :

Confirmez que le serveur est opérationnel.
Ouvrez la page de test intégrée : https://user.frenzy.bot/chatbot-widget/test.html
Envoyez quelques messages de test.
Actualisez la page — l'historique du chat doit être conservé.
Vérifiez que le bot répond en utilisant le contenu de votre base de connaissances.

Intégration WordPress

Pour les sites WordPress, deux options sont disponibles :

Option 1 : Coller le script

Ajoutez le script d'intégration dans le fichier footer.php de votre thème ou utilisez une extension permettant d'ajouter des scripts personnalisés en pied de page.

Option 2 : Extension WordPress

Téléchargez le fichier ZIP de l'extension FRENZY.BOT pour WordPress et activez-le.
Utilisez le shortcode [FRENZY.BOT_whitelabel] pour créer une page de portail de support complète en plein écran.

Erreurs courantes

Problème	Cause	Solution
Le widget apparaît mais ne répond pas	Mauvais `data-bot-id`	Vérifiez l'ID du bot dans Dashboard → Embed
Le widget n'apparaît pas	Serveur injoignable	Vérifiez que le port 8321 est ouvert et que le serveur tourne
Marche en localhost, échoue en production	`data-backend-url` manquant	Configurez-le avec l'URL de votre domaine de production
Conflits CSS avec votre site	Shadow DOM non utilisé	Cela ne devrait pas arriver — vérifiez les styles globaux forcés
Ancienne version du widget affichée	Cache du navigateur	La gestion du cache basée sur la version règle cela automatiquement

Intégration par bot

Dans une configuration multi-bot, chaque bot possède son propre snippet d'intégration. L'attribut data-bot-id détermine quel bot gère la conversation. Le widget de chaque bot utilise ses propres :

Instructions système (prompt) et modèle IA
Image de marque, couleurs et avatar
Message de bienvenue et suggestions de questions
Configuration du formulaire de contact
Paramètres de langue

Basculez entre les bots dans le tableau de bord pour générer le code d'intégration correct pour chacun d'entre eux.

FAQ

Q : Le widget se charge mais ne répond pas.

Vérifiez que le data-bot-id est correct.
Confirmez qu'OpenRouter est connecté (l'indicateur LLM doit être vert).
Vérifiez que la base de connaissances contient du contenu.

Q : Le widget fonctionne en localhost mais pas en production.

Confirmez que le port 8321 est ouvert sur votre serveur.
Définissez data-backend-url sur votre domaine de production (avec https://).
Si vous utilisez un domaine personnalisé, vérifiez que le SSL est correctement configuré.

Q : Puis-je utiliser le widget sur plusieurs domaines ?

Oui. Le widget fonctionne sur n'importe quel domaine tant que data-backend-url pointe vers votre serveur. Utilisez la page d'intégration dynamique ou un domaine personnalisé pour plus de cohérence.

Q : Comment mettre à jour le widget après des modifications ?

Les mises à jour du widget sont appliquées automatiquement via la gestion du cache par version. Lorsque le serveur est mis à jour, la version du widget s'incrémente et les navigateurs récupèrent automatiquement la nouvelle version.