Personnalisation du widget hébergé

Personnalisez l’interface prête à l’emploi chargée par https://chattybox.ai/widget.js. Pour les exemples d’installation de référence par framework et plateforme, consultez les Guides d’installation.

Avant de personnaliser

Créez le projet, indexez son contenu et vérifiez des réponses représentatives dans Test Chat avant de consacrer du temps à la présentation. Consultez Prise en main pour découvrir la séquence complète.

Configurer le widget hébergé

1. Accédez à votre tableau de bord et sélectionnez votre projet.
2. Ouvrez l’onglet Embed.
3. Prévisualisez et enregistrez l’apparence et le comportement linguistique du widget.

L’onglet Embed contrôle la présentation et génère le code d’installation, mais les clés publiques sont gérées séparément. Lorsque vous êtes prêt à installer le widget :

1. Ouvrez Public Keys et créez une clé de navigateur.
2. Limitez ses origines autorisées aux domaines prévus de votre site.
3. Revenez dans Embed, sélectionnez la clé et copiez le snippet généré.
4. Suivez les Guides d’installation correspondant à votre plateforme.

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

conseil

Les changements de présentation du widget enregistrés dans le tableau de bord sont appliqués sans qu’il soit nécessaire de remplacer le snippet sur votre site.

---

Personnalisation visuelle

ChattyBox propose un éditeur visuel entièrement intégré. Vous pouvez ajuster l’apparence et le style de votre widget pour l’adapter parfaitement à votre marque, sans toucher au code.

Commandes du tableau de bord

1. Accent Color – Choisissez la couleur principale de votre marque. Elle s’applique au launcher, aux éléments mis en évidence et aux messages des utilisateurs.

2. Position – Choisissez où le widget apparaît à l’écran.

3. Header Title – Définissez le titre affiché en haut de la fenêtre de chat.

4. Welcome Message – Personnalisez le premier message que les visiteurs voient lorsqu’ils ouvrent le chat.

note

Les changements effectués dans le tableau de bord sont appliqués instantanément. 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 de ne pas avoir à redéployer votre site pour de simples changements.

Utilisez le tableau de bord pour les couleurs, la position, l’icône, le titre de l’en-tête, le message de bienvenue, les langues par défaut, la gestion des clés publiques, le scraping et Analytics.

Si votre projet utilise des restrictions d’origine pour les clés publiques, maintenez-les synchronisées avec les domaines sur lesquels le widget est installé.

Utilisez les attributs du script uniquement pour les valeurs dont le widget a besoin au chargement de la page :

• data-api-key identifie la clé publique du widget.
• data-api-url indique au widget où envoyer les requêtes. En production, il s’agit d’une URL stable https://...convex.site/chat fournie par votre tableau de bord.
• data-locale force éventuellement la langue de l’interface du widget pour cette page.

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

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

Masquer le widget sur certaines pages

Si vous devez masquer le widget sur certaines pages, vous pouvez le faire avec CSS :

.chattybox-widget {
  display: none;
}

Intégrations personnalisées

Vous avez besoin d’une configuration plus personnalisée que celle du widget hébergé ? Créez votre propre interface avec le SDK JavaScript ou contactez support@chattybox.ai pour obtenir de l’aide sur l’architecture.

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 aux utilisateurs du monde entier.

Langues officiellement prises en charge

L’interface du widget (boutons, libellés et messages système) est officiellement disponible dans 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 linguistique étendue Bien que nous prenions officiellement en charge 14 langues pour l’interface du widget, l’IA sous-jacente peut comprendre et utiliser plus de 100 langues. Nous ne pouvons toutefois pas garantir des réponses de haute qualité pour les langues qui ne figurent pas dans notre liste officielle. :::

Fonctionnement de la détection de langue

Le widget utilise un système de détection en cascade :

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

Remplacement manuel de la langue

Pour forcer l’affichage du widget dans une langue précise, indépendamment des réglages du navigateur, ajoutez l’attribut data-locale :

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

:::tip Cas d’utilisation C’est particulièrement utile si vous avez un site multilingue dont chaque version possède sa propre URL (par exemple, /de/, /fr/). Définissez data-locale selon la langue de chaque page pour garantir une expérience cohérente. :::

Réglages de langue du tableau de bord

Le tableau de bord de l’application vous permet de configurer les préférences linguistiques du widget pour chaque projet :

• Auto-detect (recommandé) – Correspond automatiquement à la langue du navigateur du visiteur.
• Fixed Language – Force l’affichage permanent du widget dans une langue précise.
• Allow Script Override – Active ou désactive la surcharge via l’attribut data-locale.

Accédez à ces réglages dans votre tableau de bord → Projet → onglet Embed → section Widget Language.

Correspondance de la langue du contenu

Pour une expérience multilingue optimale, 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 à l’aide du fichier sitemap.xml.
2. Le scraper étiquettera automatiquement le contenu avec sa langue.
3. Le système RAG récupérera la version linguistique appropriée en fonction de la requête.

Configuration dans le tableau de bord de l’application : lors de la configuration du scraping, utilisez l’URL de votre sitemap.xml (par exemple, https://yourdocs.com/sitemap.xml) pour découvrir et indexer automatiquement toutes les versions linguistiques de votre contenu.

Dépannage

Le widget s’affiche toujours en anglais

• Actualisation forcée à titre de diagnostic – Rechargez la page avec Ctrl+F5 ou Cmd+Shift+R, puis consultez les requêtes du widget et des traductions dans le panneau réseau du navigateur.
• Vérifiez data-locale – Assurez-vous que l’attribut est correctement défini avec un code de langue pris en charge.
• Vérifiez la langue du navigateur – Vérifiez que la langue préférée du navigateur est correctement configurée.
• Vérifiez le lang du HTML de la page – Assurez-vous que votre page contient <html lang="de"> (ou le code approprié).

Les sources sont dans la mauvaise langue

• Re-scrapez votre contenu – Assurez-vous que toutes les versions linguistiques sont indexées.
• Utilisez sitemap.xml – Le scraper trouvera ainsi toutes les URL /de/, /fr/, etc.
• Vérifiez la langue de la requête – L’IA tente d’adapter la langue de la réponse à celle de la requête.

Des traductions manquent

• Vérifiez les langues prises en charge – Seules les 14 langues répertoriées ci-dessus disposent de 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 exhaustive.
4. Surveillez la répartition des langues – Consultez Analytics pour voir les langues les plus utilisées par vos visiteurs.