Personnalisation du widget

Faites correspondre le widget de chat à votre marque et faites-le se comporter exactement comme vous le souhaitez. Toute la personnalisation se fait dans votre tableau de bord — les modifications s'appliquent automatiquement à votre site Web, sans toucher au code d'intégration.

Vous trouverez les paramètres dans Dashboard → Chatbots → sélectionnez votre chatbot :

L'onglet Widget contrôle l'apparence (position, couleurs, taille, textes)
L'onglet Behavior contrôle la manière dont le widget interagit avec les visiteurs

Cliquez sur Save Changes en haut de la page pour appliquer vos modifications.

Onglet Widget : Apparence

Position

Choisissez où le widget apparaît sur votre site :

Position	Description
Bottom Right	Bulle de chat flottante en bas à droite (par défaut)
Bottom Left	Bulle de chat flottante en bas à gauche
Inline (Embedded)	Le widget est intégré directement sur la page au lieu d'être flottant

Avec la position Inline, le chat est intégré à l'endroit où le script d'intégration est placé et est toujours ouvert — pas de bulle, pas de bouton de fermeture. Idéal pour les pages dédiées au chat ou au support. Voir Widget Embedding pour les détails.

Thème de couleur

Choisissez l'un des trois préréglages de couleur :

Préréglage	Description
Default	Le schéma de couleurs standard de ChatReact
Brand	Les couleurs de votre entreprise depuis Company Settings
Custom	Choisissez vos propres couleurs

Le préréglage Brand n'est disponible qu'une fois les couleurs de la marque définies. Allez dans Company Settings pour extraire les couleurs de votre site.

Avec Custom sélectionné, vous pouvez définir quatre couleurs de base :

Primary — bulle, dégradé de l'en-tête, boutons et messages des visiteurs
Secondary — deuxième couleur du dégradé de l'en-tête
Background — arrière-plan de la fenêtre de chat
Text — couleur du texte des messages

Paramètres de couleur avancés

Besoin de plus de contrôle ? Avec le préréglage Custom sélectionné, développez Advanced Color Settings pour remplacer les couleurs calculées automatiquement :

Visitor Messages — couleur d'arrière-plan et de texte des bulles de message du visiteur
Bot Messages — couleur d'arrière-plan et de texte des bulles de message du bot
Header Text Color — couleur du titre et du sous-titre dans l'en-tête du widget

Tout ce que vous laissez inchangé est calculé automatiquement pour un bon contraste. Chaque remplacement dispose d'un bouton Reset to automatic pour revenir à la couleur calculée.

Taille et style

Paramètre	Plage	Par défaut
Border Radius	0–32 px	24 px
Width	300–500 px	380 px
Height	400–700 px	600 px

Sur les petits écrans mobiles, le widget passe automatiquement en disposition pleine largeur, indépendamment de ces dimensions.

Logo

Activez Use company logo in widget header pour afficher le logo de votre entreprise dans l'en-tête du chat. Le logo lui-même est téléchargé dans Company Settings — recommandé : carré, au moins 200×200 px (JPG, PNG, GIF, WebP ou SVG, max. 5 Mo).

Cette option est disponible sur le plan Professional et supérieurs, ainsi que sur tous les plans Agency.

Titre de l'en-tête, sous-titre et texte de la bulle

Champ	Description	Par défaut
Header Title	Titre affiché dans l'en-tête de la fenêtre de chat	"Chat with us"
Header Subtitle	Ligne plus petite sous le titre	"We typically reply within minutes"
Bubble Text	Texte affiché à côté de la bulle de chat lorsque le widget est fermé	Aucun

Si vous ne définissez jamais de titre ou de sous-titre, le widget affiche le texte par défaut — automatiquement localisé dans la langue de chaque visiteur.

Comment fonctionne le sous-titre de l'en-tête : Tant que vous n'avez pas configuré de sous-titre, le widget affiche le texte par défaut localisé, et le formulaire de paramètres pré-remplit ce texte par défaut afin que vous puissiez voir et modifier ce que les visiteurs verront. Pour masquer entièrement le sous-titre, videz le champ et enregistrez — un sous-titre volontairement vidé restera masqué.

Le texte de la bulle apparaît comme une petite étiquette à côté de la bulle de chat fermée (par ex. "Got questions?"). Laissez-le vide pour n'afficher que la bulle ronde.

Traductions du widget

Si votre chatbot prend en charge plusieurs langues, une carte Widget Translations apparaît sous les paramètres d'apparence. Vous pouvez y traduire le message de bienvenue, le message de secours (fallback), le titre de l'en-tête, le sous-titre de l'en-tête et le texte de la bulle pour chaque langue activée.

Les messages de bienvenue et de secours sont configurés dans l'onglet Persona des paramètres de votre chatbot.

Aperçu en direct

La colonne de droite de l'onglet Widget affiche un Live Preview de votre widget qui se met à jour au fur et à mesure que vous modifiez les paramètres. Il est interactif : fermez la fenêtre de chat avec le X pour voir la bulle fermée (y compris votre texte de bulle), et cliquez sur la bulle pour l'ouvrir à nouveau.

Onglet Behavior : Interaction

Paramètres de comportement

Paramètre	Description	Par défaut
Proactive Greeting	Le bot salue automatiquement les visiteurs après un délai (1–10 secondes)	On, 3 s
Auto-Open	Le widget s'ouvre automatiquement pour les visiteurs après un délai (1–15 secondes)	Off, 5 s
Sound Enabled	Lecture de sons pour les notifications	On
Typing Indicator	Affiche une animation pendant que le bot tape	On
Pre-Chat Form	Collecte des informations du visiteur avant le début du chat	Off
Show on Mobile	Afficher le widget sur les appareils mobiles	On

Longueur maximale du message

Limitez le nombre de caractères que les visiteurs peuvent saisir par message (100–10 000 caractères, par défaut 2 000). Cela aide à prévenir une utilisation excessive due à des saisies très longues. Effacez le champ ou cliquez sur Remove limit pour autoriser des messages de n'importe quelle longueur.

Formulaire avant chat

Lorsque le formulaire avant chat est activé, les visiteurs remplissent un court formulaire avant le début de la conversation. Vous configurez vous-même les champs :

Types de champs : Text, Email, Phone, Textarea
Chaque champ a un label, un placeholder optionnel et un onglet required
Réorganisez les champs avec les boutons de déplacement vers le haut/bas, ou supprimez-les

Si votre chatbot prend en charge plusieurs langues, une section de traductions apparaît sous l'éditeur de champs. Saisissez les traductions pour chaque langue manuellement, ou cliquez sur Translate with AI pour traduire automatiquement tous les labels et placeholders.

Live Chat

L'onglet Behavior contient également la carte Live Chat Settings. Activez le live chat pour permettre aux visiteurs de parler à vos agents humains, et choisissez un mode :

Mode	Description
Handoff Only	Live chat uniquement lorsque le bot ne peut pas aider
Standalone	Les visiteurs peuvent discuter directement avec les agents
Both	Handoff et chat direct avec un agent disponibles

Le Live Chat est disponible sur le plan Professional et supérieurs, ainsi que sur tous les plans Agency. Voir Live Chat pour savoir comment gérer les conversations entrantes.

Marque

Sur les plans qui incluent le white-label, une carte Branding apparaît en bas de l'onglet Behavior. Le branding ChatReact est caché par défaut sur ces plans — activez Show "Powered by ChatReact" si vous souhaitez l'afficher dans le pied de page du widget.

Phase d'apprentissage

Pendant qu'un nouveau chatbot est en phase d'apprentissage, vous pouvez contrôler la prudence de ses réponses — Cautious, Balanced (recommandé) ou Confident — dans l'onglet Confidence de la même page de paramètres. Cet onglet apparaît sur les plans qui incluent l'Improvement Agent. Voir le guide Improvement Agent pour les détails.