Configuration et personnalisation du widget

Ajoutez un widget de chat propulsé par l'IA à votre site en moins de 5 minutes.

Configuration rapide

Mettre votre chatbot en ligne est simple. Il suffit de copier un petit extrait de code depuis votre tableau de bord.

Étape 1 : récupérer le code d'intégration

1. Ouvrez votre tableau de bord et sélectionnez votre projet.
2. Accédez à l'onglet Intégration.
3. Choisissez la clé API à utiliser ou créez-en une nouvelle.
4. Copiez l'extrait de code généré.

Étape 2 : l'ajouter à votre site

Collez l'extrait juste avant la balise fermante </body> sur chaque page où le widget doit apparaître.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="fr"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Astuce C'est tout. Vous n'avez pas besoin de configurer les couleurs ou les options dans le code : tout se gère depuis le tableau de bord. :::

---

Personnalisation visuelle

ChattyBox inclut un éditeur visuel intégré. Vous pouvez adapter l'apparence du widget à votre marque sans modifier le code.

Contrôles du tableau de bord

1. Couleur d'accent - Choisissez la couleur principale de votre marque pour le lanceur, les éléments mis en avant et les messages utilisateur.
2. Position - Sélectionnez l'endroit où le widget apparaît à l'écran.
3. Titre d'en-tête - Définissez le titre affiché en haut de la fenêtre de chat.
4. Message de bienvenue - Personnalisez le premier message affiché aux visiteurs.

note

Les changements effectués dans le tableau de bord sont appliqués immédiatement. Vous n'avez pas besoin de mettre à jour le code d'intégration sur votre site.

Options avancées

Réglages du tableau de bord et attributs du script

La plupart des comportements du widget doivent être gérés depuis le tableau de bord afin d'éviter de redéployer votre site pour de simples changements.

Utilisez le tableau de bord pour les couleurs, la position, l'icône, le titre, le message de bienvenue, les langues par défaut, les clés publiques, le scraping et les analyses.

Si votre projet utilise des restrictions d'origine pour les clés publiques, gardez-les synchronisées avec les domaines où le widget est installé.

N'utilisez les attributs du script que pour les valeurs nécessaires au chargement de la page :

• data-api-key identifie la clé publique du widget.
• data-api-url indique où le widget doit envoyer les requêtes.
• data-locale force éventuellement la langue de l'interface pour cette page.

Si le widget n'apparaît pas après l'installation, consultez le dépannage.

Pour des exemples par plateforme, commencez par Docusaurus, MkDocs, VitePress, WordPress ou GitBook.

Masquer le widget sur certaines pages

Vous pouvez masquer le widget sur des pages précises avec du CSS :

.chattybox-widget {
  display: none;
}

Intégrations personnalisées

Besoin d'une configuration plus spécifique que le widget standard ?

Contactez-nous à [email protected] et nous vous aiderons à choisir l'approche adaptée à votre cas d'usage.

Prise en charge multilingue

Le widget ChattyBox s'adapte automatiquement aux préférences linguistiques de vos visiteurs et offre une expérience localisée dans le monde entier.

Langues officiellement prises en charge

L'interface du widget, y compris les boutons, libellés et messages système, est officiellement disponible en 14 langues :

Langue	Code	Interface du widget	Qualité des réponses IA
Anglais	en	Prise en charge complète	Excellente
Français	fr	Prise en charge complète	Élevée
Allemand	de	Prise en charge complète	Élevée
Espagnol	es	Prise en charge complète	Élevée
Italien	it	Prise en charge complète	Élevée
Néerlandais	nl	Prise en charge complète	Élevée
Portugais	pt	Prise en charge complète	Élevée
Polonais	pl	Prise en charge complète	Élevée
Suédois	sv	Prise en charge complète	Élevée
Indonésien	id	Prise en charge complète	Moyenne
Estonien	et	Prise en charge complète	Moyenne
Finnois	fi	Prise en charge complète	Moyenne
Gallois	cy	Prise en charge complète	Moyenne
Tchèque	cs	Prise en charge complète	Moyenne

:::note Prise en charge étendue Même si l'interface est officiellement disponible en 14 langues, l'IA sous-jacente peut comprendre et répondre dans plus de 100 langues. Nous ne pouvons toutefois pas garantir la même qualité pour les langues hors de la liste officielle. :::

Fonctionnement de la détection de langue

Le widget utilise une détection en cascade :

1. Attribut data-locale - Priorité la plus élevée. Ajoutez-le au code d'intégration pour forcer une langue.
2. Attribut <html lang> de la page - Le widget vérifie la langue déclarée par la page.
3. Langue du navigateur (navigator.language) - Utilise les préférences du visiteur.
4. Repli par défaut - L'anglais est utilisé si aucune langue n'est détectée.

Forcer manuellement la langue

Pour imposer une langue quelle que soit la configuration du navigateur, ajoutez l'attribut data-locale :

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="fr"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Cas d'usage C'est utile pour un site multilingue où chaque version a sa propre URL, par exemple /de/ ou /fr/. Définissez data-locale selon la langue de chaque page pour conserver une expérience cohérente. :::

Réglages de langue dans le tableau de bord

Le tableau de bord permet de configurer les préférences de langue du widget par projet :

• Détection automatique (recommandé) - Correspond automatiquement à la langue du navigateur du visiteur.
• Langue fixe - Force toujours une langue précise.
• Autoriser le remplacement par script - Active ou désactive le remplacement via data-locale.

Ces réglages se trouvent dans le tableau de bord : Projet → Intégration → Langue du widget.

Correspondance avec la langue du contenu

Pour une meilleure expérience multilingue, votre chatbot doit répondre dans la même langue que la question de l'utilisateur. Pour cela :

1. Scrapez toutes les versions linguistiques de votre documentation avec sitemap.xml.
2. Le scraper étiquette automatiquement le contenu avec sa langue.
3. Le système RAG récupère la version linguistique adaptée à la requête.

Configuration dans le tableau de bord : utilisez l'URL sitemap.xml, par exemple https://yourdocs.com/sitemap.xml, afin de découvrir et indexer automatiquement toutes les versions linguistiques.

Dépannage

Le widget affiche encore l'anglais

• Videz le cache du navigateur - Le fichier widget.js peut être en cache. Faites un rafraîchissement forcé (Ctrl+F5 / Cmd+Shift+R).
• Vérifiez data-locale - Assurez-vous que l'attribut utilise un code de langue pris en charge.
• Vérifiez la langue du navigateur - Confirmez que la langue préférée est correcte.
• Vérifiez le lang HTML - La page doit utiliser <html lang="fr"> ou le code approprié.

Les sources sont dans la mauvaise langue

• Scrapez de nouveau le contenu - Vérifiez que toutes les versions linguistiques ont été indexées.
• Utilisez sitemap.xml - Cela permet au scraper de trouver les URL /de/, /fr/, etc.
• Vérifiez la langue de la question - L'IA tente d'aligner la réponse sur la langue de la question.

Traductions manquantes

• Vérifiez les langues prises en charge - Seules les 14 langues ci-dessus ont des traductions d'interface garanties.

Bonnes pratiques

1. Définissez <html lang> sur vos pages - Cela aide l'accessibilité et la détection du widget.
2. Testez avec data-locale pendant le développement - Vérifiez que chaque langue s'affiche correctement.
3. Scrapez toutes les versions linguistiques - Utilisez sitemap.xml pour une indexation multilingue complète.
4. Surveillez la répartition des langues - Consultez les analyses pour savoir quelles langues vos visiteurs utilisent le plus.