Personnalisation du widget

Personnalisation du widget

Personnalisez l’apparence de votre widget de chat pour l’adapter à votre marque et au design de votre site web.

Paramètres

Toutes les options de personnalisation du widget sont disponibles dans Paramètres → Canaux → Web. Sélectionnez votre canal web et ouvrez l’onglet Apparence.

---

Couleur du thème

La couleur du thème est appliquée de manière cohérente sur l’ensemble du widget :

• Arrière-plan du bouton de lancement
• Arrière-plan de la barre d’en-tête
• Couleur du bouton d’envoi
• Couleur de mise en évidence des liens
• Arrière-plan de la bulle de message utilisateur

Choisissez une couleur qui correspond à l’identité de votre marque et assure un bon contraste avec le texte blanc.

---

Message de bienvenue

Le message de bienvenue est le premier texte que les clients voient lorsqu’ils ouvrent le widget. Gardez-le convivial et expliquez clairement ce avec quoi le bot peut aider.

Exemples :

1. « Bonjour ! Comment puis-je vous aider aujourd’hui ? »
2. « Bienvenue chez Acme Support. Posez-moi toutes vos questions sur nos produits et services. »
3. « Bonjour ! Je suis là pour vous aider. En quoi puis-je vous assister ? »

---

Position du widget

Position	Valeur du paramètre	Quand l’utiliser
En bas à droite	bottom-right (par défaut)	Emplacement standard, convient à la plupart des sites
En bas à gauche	bottom-left	Lorsque le côté droit entre en conflit avec d’autres éléments

---

Avatar

v1.6.4

Affichez un avatar personnalisé dans l’en-tête du widget et sur l’écran d’accueil en fournissant une URL d’image.

Via le tableau de bord : Définissez l’URL de l’avatar dans Paramètres → Canaux → Web → Personnaliseur → URL de l’avatar.

Via le code d’intégration : Transmettez avatarUrl dans la configuration du thème :

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

Exigences :

• Doit être une URL https:// (les URL http, data: et javascript: sont rejetées pour des raisons de sécurité)
• Taille recommandée : 128 × 128 pixels (carré)
• Formats pris en charge : PNG, JPG, WebP, SVG
• Si l’URL est invalide ou si l’image ne se charge pas, l’icône par défaut est affichée

---

Mode de message d’accueil

v1.6.2

Le message d’accueil prend en charge trois modes de langue. Accédez à Paramètres → Canaux → Web → Personnaliseur et recherchez la section Mode de message d’accueil.

Statique

Le même texte d’accueil est affiché à tous les visiteurs, quelle que soit leur langue. C’est le mode par défaut.

Saisissez un seul message d’accueil dans le champ de texte. Exemple : « Bonjour ! Comment puis-je vous aider aujourd’hui ? »

Correspondance visiteur (locale)

Affichez un message d’accueil différent pour chaque langue. Le widget lit la langue détectée du visiteur et affiche le message d’accueil correspondant.

1. Sélectionnez le mode Correspondance visiteur.
2. Un champ apparaît pour chacune des 15 locales prises en charge.
3. Remplissez le texte du message d’accueil pour chaque langue que vous souhaitez prendre en charge.
4. Laissez le champ d’une locale vide pour revenir au message d’accueil statique pour cette langue.

Exemple de configuration :

• Thaï : “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• Anglais : “Hi! How can I help you today?”
• Japonais : “こんにちは！何かお手伝いできますか？“

Org-principal

Le message d’accueil est toujours affiché dans la langue de réponse principale de l’organisation, quelle que soit la langue du visiteur. Ce mode lit la langue définie dans Paramètres IA → Langue de réponse principale.

Utilisez Org-principal lorsque votre équipe opère dans une seule langue et que vous souhaitez que tous les messages d’accueil soient cohérents.

---

Sélecteur de langue

v1.6.2

Le sélecteur de langue ajoute une icône de globe (🌐) à l’en-tête du widget afin que les visiteurs puissent explicitement choisir leur langue. Il est désactivé par défaut.

Pour l’activer : Dans Paramètres → Canaux → Web → Personnaliseur, activez Afficher le sélecteur de langue.

Lorsqu’un visiteur sélectionne une langue dans le menu déroulant :

• Toutes les réponses IA sont verrouillées sur cette langue pour la session
• Le verrouillage remplace la détection automatique même si le visiteur tape dans une autre langue
• L’interface du widget bascule vers la langue sélectionnée

Consultez Widget Web — Sélecteur de langue pour une présentation complète du comportement.

---

Langue par défaut

v1.6.8

Définissez une langue par défaut pour le widget afin que les visiteurs voient l’interface dans votre locale préférée avant toute détection automatique. Accédez à Paramètres → Canaux → Web → Personnaliseur → Langue par défaut et sélectionnez dans le menu déroulant.

La chaîne de priorité des langues est :

1. Forcer cette langue (Paramètres IA) — remplace tout lorsqu’activé
2. Sélection explicite du visiteur (via le sélecteur de langue, si activé)
3. Langue par défaut — ce paramètre
4. Locale de configuration d’intégration — la valeur locale dans le code d’intégration
5. Thaï — repli lorsque rien d’autre n’est défini

Sélectionnez « Aucun — suivre la configuration d’intégration » pour ignorer ce paramètre et vous fier à la valeur de locale du code d’intégration.

Note

La langue par défaut n’affecte que la langue de l’interface du widget. La langue des réponses IA est contrôlée séparément dans Paramètres IA.

---

Mode sombre et variables CSS

v1.6.8

Le widget prend en charge un bouton de mode sombre intégré que les visiteurs peuvent activer depuis l’en-tête du chat. L’ensemble de l’interface du widget est thématisée à l’aide de propriétés CSS personnalisées, garantissant une apparence cohérente dans les deux modes.

Variables CSS clés

Variable	Description
--cw-primary	Couleur de marque principale (issue de votre paramètre de couleur de thème)
--cw-primary-rgb	Composantes RVB de la couleur principale, utilisées pour les effets de transparence
--cw-bg	Couleur d’arrière-plan du widget
--cw-bg-secondary	Arrière-plan secondaire (champs de saisie, éléments de formulaire)
--cw-surface	Couleur de surface pour les cartes, les info-bulles, les extraits de citation
--cw-text	Couleur de texte principale
--cw-text-secondary	Couleur de texte secondaire/atténuée
--cw-border	Couleur de bordure pour les séparateurs et les contours de saisie

Lorsque le mode sombre est activé, le widget applique la classe cw-dark ou cw-light au conteneur racine, et toutes les variables CSS se mettent à jour automatiquement. L’en-tête dégradé, les bulles de message, le formulaire de contact et les puces de citation respectent tous le mode actuel.

Note

Le mode sombre est un bouton côté visiteur — il ne persiste pas d’une session à l’autre. Le widget est en mode clair par défaut, à moins que le visiteur n’active le mode sombre pendant sa session de chat.

---

Aperçu

Après avoir effectué des modifications, utilisez le panneau Aperçu en direct sur le côté droit de la page des paramètres pour voir exactement comment le widget apparaîtra sur votre site — avant d’enregistrer.

---

Conseils

Astuce

• Testez votre widget sur ordinateur et sur mobile pour vous assurer qu’il ne bloque pas le contenu important de la page.
• Utilisez une couleur de thème à contraste élevé pour que le widget reste accessible à tous les utilisateurs.
• Gardez le message de bienvenue court — une ou deux phrases est idéal. Les clients veulent poser leur question, pas lire un paragraphe.