Personnalisation du widget

Personnalisation du widget

Personnalisez l’apparence de votre widget de chat pour qu’il corresponde à votre marque et à la conception 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 à votre identité de marque et qui garantit un bon contraste sur fond de texte blanc.

---

Message de bienvenue

Le message de bienvenue est le premier texte que les clients voient lorsqu’ils ouvrent le widget. Restez convivial et expliquez clairement ce que le bot peut faire.

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 être utile ? »

---

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 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 : Passez 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 salutation

v1.6.2

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

Statique

Le même texte de salutation est affiché à chaque visiteur, quelle que soit la langue. C’est le mode par défaut.

Entrez une salutation unique dans le champ de texte. Exemple : « Bonjour ! Comment puis-je vous aider aujourd’hui ? »

Correspondre au visiteur (langue)

Affichez une salutation différente pour chaque langue. Le widget lit la langue détectée du visiteur et affiche la salutation correspondante.

1. Sélectionnez le mode Correspondre au visiteur.
2. Un champ apparaît pour chacune des 15 langues prises en charge.
3. Remplissez le texte de salutation pour chaque langue que vous souhaitez prendre en charge.
4. Laissez le champ d’une langue vide pour revenir à la salutation Statique pour cette langue.

Exemple de configuration :

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

Org-principal

La salutation est toujours affichée 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 toutes les salutations soient cohérentes.

---

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 choisir explicitement leur langue. Il est désactivé par défaut.

Pour 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 de l’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 passe à la langue sélectionnée

Consultez Widget Web — Sélecteur de langue pour un aperçu complet 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 langue 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’elle est activée
2. Sélection explicite du visiteur (via le sélecteur de langue, si activé)
3. Langue par défaut — ce paramètre
4. Langue 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 utiliser plutôt la valeur de langue 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 de l’IA est contrôlée séparément dans Paramètres IA.

---

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 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, c’est idéal. Les clients veulent poser leur question, pas lire un paragraphe.