Les paramètres d'apparence déterminent l'aspect du widget de chat de votre chatbot pour les visiteurs de votre site web - l'en-tête, les couleurs et les polices des messages, l'icône de lancement, l'écran d'accueil, la taille du widget et plus encore. C'est ici que vous adaptez le widget à votre image de marque.
Vous devez disposer d'un chatbot avant de pouvoir personnaliser son style. Si vous n'en avez pas encore créé un, commencez par Comment créer votre premier chatbot.
Où trouver les paramètres d'apparence
Sélectionnez votre chatbot et accédez à Settings > Appearance (Paramètres > Apparence). Depuis la page principale de ChatLab, cliquez sur Chatbots, ouvrez votre chatbot, ouvrez l'onglet Settings (Paramètres), puis choisissez Appearance (Apparence) dans le menu de gauche.
Un aperçu en direct de votre widget s'affiche sur le côté droit de la page et se met à jour à mesure que vous modifiez les réglages.
En-tête du chat (Chat Header)
Configurez l'apparence de la section supérieure de votre widget de chat :
- Chatbot name (Nom du chatbot) - le nom affiché dans l'en-tête du chat (60 caractères maximum)
- Tagline (Slogan) - sous-titre facultatif affiché sous le nom du chatbot (60 caractères maximum)
- Avatar - importez une image personnalisée que les clients verront lorsqu'ils interagissent avec le chatbot. Utilisez le bouton Remove (Supprimer, mis en évidence ci-dessous) pour effacer l'image actuelle.
- Background (Arrière-plan) - couleur d'arrière-plan de la zone d'en-tête
- Name color (Couleur du nom) - couleur du texte pour le nom du chatbot
- Tagline color (Couleur du slogan) - couleur du texte du slogan
- Reset conversation tooltip (Infobulle de réinitialisation de la conversation) - texte de l'infobulle affiché lorsque les visiteurs survolent le bouton de réinitialisation de la conversation dans l'en-tête du widget (40 caractères maximum, valeur par défaut : "Reset conversation")
Message
Personnalisez le champ de saisie des messages et l'apparence des messages de la conversation :
- Input placeholder (Texte de substitution du champ) - texte d'indication affiché dans le champ de saisie d'un nouveau message au bas du widget (50 caractères maximum, valeur par défaut : "Type a message..."). Utilisez-le pour inciter les visiteurs à commencer à écrire.
- User background (Arrière-plan de l'utilisateur) - couleur d'arrière-plan des messages envoyés par le visiteur
- User text (Texte de l'utilisateur) - couleur du texte des messages du visiteur
- Resp. background (Arrière-plan de réponse) - couleur d'arrière-plan des réponses du chatbot
- Response text (Texte de réponse) - couleur du texte des réponses du chatbot
La taille du texte des messages se règle dans la section Typography (Typographie), en même temps que la police du widget.
Questions suggérées (Suggested Questions)
Les questions suggérées sont les invites prêtes à l'emploi sur lesquelles un visiteur peut appuyer pour démarrer une conversation. Vous rédigez les questions elles-mêmes dans Settings > Chat Conversation ; c'est ici que vous définissez le style des boutons :
- Background - couleur d'arrière-plan des boutons de questions suggérées
- Text - couleur du texte des boutons de questions suggérées
- Stack (Empiler) - lorsqu'elle est activée, cette option empile verticalement les questions suggérées les plus longues au lieu d'afficher une barre de défilement horizontale
La taille du texte des questions suggérées se règle dans la section Typography.
Paramètres du mode réduit
Contrôlez l'apparence du widget de chat lorsqu'il est réduit (avant que le visiteur n'ouvre le chat) :
- Minimized display mode (Mode d'affichage réduit) - choisissez parmi :
- Icon (Icône) - icône ronde standard de lancement du chat (par défaut)
- Minified chat bar (Barre de chat réduite) - barre de saisie de texte compacte affichée en bas de page
- Icon with text (Icône avec texte) - lanceur élargi en forme de pilule : l'icône accompagnée d'une courte légende sur deux lignes
- Icon color / Mini bar color (Couleur de l'icône / Couleur de la mini-barre) - couleur de l'icône de lancement ou de l'arrière-plan de la mini-barre
- Custom chat icon (Icône de chat personnalisée, mode icône uniquement) - activez cette option pour importer des icônes d'ouverture/fermeture personnalisées pour le chat
- Position on screen (Position à l'écran) - placez le widget à gauche ou à droite de l'écran
- Move up chat icon/bar by (Remonter l'icône/la barre de chat de) - décalage vertical en pixels par rapport au bord inférieur
- Move icon/bar left/right by (Décaler l'icône/la barre vers la gauche/droite de) - décalage horizontal en pixels par rapport au bord le plus proche de l'écran
Icône avec texte
Le mode Icon with text (Icône avec texte) ajoute une courte légende au lanceur, permettant aux visiteurs de comprendre le rôle du chat avant de l'ouvrir. Cela s'avère utile lorsqu'une simple icône ne suffit pas - par exemple « Écrivez-nous / Nous répondons immédiatement » ou « Besoin d'aide ? / Posez votre question à notre assistant ».
La sélection de ce mode ajoute quatre paramètres :
- Label line 1 (Ligne de texte 1) - la première ligne de la légende, mise en valeur (60 caractères maximum)
- Label line 2 (Ligne de texte 2) - la seconde ligne, plus discrète (60 caractères maximum). Laissez ce champ vide pour un lanceur sur une seule ligne
- Text color (Couleur du texte) - couleur de la légende. Si vous n'y touchez pas, ChatLab sélectionne automatiquement le noir ou le blanc selon la clarté de la couleur de votre lanceur
- Show close cross (Afficher la croix de fermeture) - ajoute une petite croix au lanceur afin que les visiteurs puissent le masquer
Les deux lignes sont tronquées par des points de suspension si elles dépassent, empêchant ainsi le lanceur de devenir plus large que l'écran. Le lanceur reprend une forme circulaire lorsque le chat est ouvert.
Si le support multilingue est activé, les deux lignes de légende sont traduites comme l'ensemble des textes visibles par les visiteurs.
L'option Show close cross est désactivée par défaut et n'est disponible que dans ce mode. Lorsqu'elle est activée, un visiteur qui clique sur la croix masque le lanceur pour le reste de sa session de navigation - il reste masqué lorsqu'il change de page et réapparaît lors de sa prochaine visite ou dans un nouvel onglet. Un chatbot configuré pour s'ouvrir automatiquement respecte ce choix et ne se rouvrira pas après que le visiteur l'a fermé.
Ouverture automatique du widget après le chargement de la page
Configurez le chat pour qu'il se déploie automatiquement lorsque les visiteurs chargent la page :
- Auto open on mobile (Ouverture automatique sur mobile) - ouvre automatiquement le chat sur les appareils mobiles
- Auto open on desktop (Ouverture automatique sur ordinateur) - ouvre automatiquement le chat sur les écrans d'ordinateur
- Open chat with delay (Ouvrir le chat avec un délai) - applique un délai avant l'ouverture automatique (disponible uniquement si l'ouverture automatique est activée)
- Delay by (Délai de) - nombre de secondes d'attente avant l'ouverture (0-60 secondes)
Messages de style humain (Human-Like Messaging)
Simule une saisie humaine en divisant les réponses en plusieurs bulles de message, affichées progressivement phrase par phrase :
- Human-Like Messaging - bouton à bascule pour activer/désactiver la fonctionnalité
- Delay Between Bubbles (Délai entre les bulles) - durée en secondes entre l'affichage de chaque bulle de message (0-200 secondes)
Bulle de message de bienvenue
Affichez le message de bienvenue dans une bulle au-dessus de l'icône de lancement du chat pour aider les visiteurs à remarquer le chat. Cette fonctionnalité est disponible uniquement en mode icône et ne fonctionne pas en mode iframe ou lorsque l'ouverture automatique est activée.
- Show on desktop (Afficher sur ordinateur) - affiche la bulle de message de bienvenue sur ordinateur
- Show on mobile (Afficher sur mobile) - affiche la bulle de message de bienvenue sur les appareils mobiles
- Delay - nombre de secondes après le chargement de la page avant d'afficher la bulle (0-60 secondes)
Si vous disposez de plusieurs messages de bienvenue, ils apparaîtront empilés au-dessus de l'icône de chat.
La saisie vocale (le bouton du microphone dans la zone de saisie du chat) se configure dans Settings > Chat Conversation, et non ici dans Appearance.
Écran d'accueil (Welcome Screen)
Faites passer le widget dans une disposition d'ouverture spéciale qui accueille les nouveaux visiteurs avec un grand message de bienvenue et les questions suggérées empilées sur une carte blanche centrée. L'écran d'accueil n'apparaît qu'au début d'une nouvelle session et bascule vers la vue de chat standard dès que le visiteur envoie son premier message.
- Special Welcome Screen (Écran d'accueil spécial) - active ou désactive le mode écran d'accueil (désactivé par défaut)
- Suggested questions intro (Introduction des questions suggérées) - court libellé affiché au-dessus de la carte des questions suggérées sur l'écran d'accueil (par exemple, "Sélectionnez une option ou saisissez un message"). Laissez ce champ vide pour masquer le libellé. Nécessite que les questions suggérées soient configurées dans Settings > Chat Conversation.
- Hide Human Contact Form (Masquer le formulaire de contact humain) - masque l'action du formulaire de contact dans l'en-tête pendant l'affichage de l'écran d'accueil
- Hide Live Chat (Masquer Live Chat) - masque l'action Live Chat dans l'en-tête pendant l'affichage de l'écran d'accueil
L'écran d'accueil s'intègre également à Lead Collection et au consentement à la Privacy Policy (politique de confidentialité) - si l'un ou l'autre est requis au début de la conversation, le formulaire ou la demande de consentement est affiché sur la carte d'accueil à la place des questions suggérées.
Pour obtenir tous les détails, les variantes de mise en page et des captures d'écran côté visiteur, consultez Écran d'accueil.
Actions de l'en-tête (Header Actions)
Contrôle la manière dont Live Chat et le formulaire de contact humain (Human Contact Form) sont proposés dans l'en-tête du widget de chat.
- Separate icons (Icônes séparées) - chaque action dispose de sa propre icône dans l'en-tête, à côté du bouton de fermeture
- Menu (dropdown) (Menu déroulant) - les deux actions se déplacent dans le menu d'en-tête (l'icône à trois points), aux côtés d'entrées comme "Reset conversation" et du sélecteur de langue lorsqu'ils sont activés
Les nouveaux chatbots utilisent le menu, ce qui évite d'encombrer l'en-tête à mesure que d'autres actions sont ajoutées. Les chatbots créés avant le 2 septembre 2026 conservent des icônes séparées, afin de ne rien changer pour leurs visiteurs. Vous pouvez modifier ce réglage à tout moment - il n'affecte que la présentation, pas le rôle des actions.
Typographie
Définit la police de caractères et les tailles de texte utilisées dans l'ensemble du widget - messages, questions suggérées, en-tête, formulaires et légende du lanceur.
- Widget font (Police du widget) - l'une des huit polices proposées : System default (Police par défaut du système), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif et JetBrains Mono
- Message font size (Taille de police des messages) - taille du texte des messages (12-24 px)
- Suggested questions font size (Taille de police des questions suggérées) - taille des boutons de questions suggérées (12-24 px)
Inter est la police par défaut et correspond à l'apparence de chaque chatbot avant l'introduction de ce paramètre ; rien ne changera donc tant que vous n'aurez pas choisi une autre police.
L'option System default ne télécharge absolument rien - le widget utilise la police déjà installée sur l'appareil du visiteur. C'est l'option la plus rapide, et elle s'intègre parfaitement aux sites qui utilisent eux-mêmes la police du système, mais le chat aura une apparence légèrement différente sous Windows, macOS et Android. Les sept autres sont des Google Fonts, téléchargées une seule fois par le navigateur du visiteur. Chacune dispose d'une police de secours (fallback), de sorte que si le réseau d'un visiteur bloque Google Fonts, le texte reste lisible et la mise en page ne se déforme pas.
Le fichier de police est chargé dans la fenêtre de chat elle-même. Il n'est ajouté à votre propre page que lorsque le widget affiche du texte en dehors de la fenêtre de chat - le lanceur Icon with text, la barre de chat miniature ou les bulles de message de bienvenue. Un chatbot utilisant le lanceur sous forme de simple icône n'ajoute aucune requête supplémentaire à votre page.
Taille du widget (Widget Size)
Ajustez la taille de la fenêtre de chat ouverte sur les appareils de bureau et mobiles. Chaque curseur dispose d'un bouton Default (Par défaut) qui rétablit les dimensions intégrées.
- Desktop width (Largeur sur ordinateur) - largeur du widget sur les navigateurs d'ordinateur, en pixels (330-800, 448 par défaut)
- Desktop height (Hauteur sur ordinateur) - hauteur du widget sur les navigateurs d'ordinateur, en pixels (300-770, 660 par défaut)
- Mobile size (Taille sur mobile) - taille du widget sur les appareils mobiles, en pourcentage de l'écran (60-100 %, 100 % par défaut)
À la valeur par défaut, le widget utilise le dimensionnement réactif intégré de ChatLab. Toute autre valeur applique une taille fixe.
Sur mobile, la valeur par défaut (100 %) permet au chat ouvert de couvrir l'écran entier. Choisir un pourcentage inférieur réduit le widget à cette portion de l'écran et le centre sur la fenêtre d'affichage, afin que les visiteurs puissent toujours voir la page autour du chat.
À côté des curseurs, vous trouverez deux boutons Save & Preview (Enregistrer et prévisualiser, mis en évidence ci-dessous) - un pour les lignes d'ordinateur et un pour la ligne mobile. Cliquer sur un bouton enregistre les modifications non sauvegardées, puis ouvre le chat dans une fenêtre d'aperçu avec vos réglages actuels :
- Le bouton pour ordinateur ouvre une fenêtre de navigateur standard afin que vous puissiez voir la taille exacte sur un écran d'ordinateur.
- Le bouton mobile ouvre une fenêtre contextuelle compacte (400 x 700) pour afficher le widget dans sa disposition mobile, ce qui est très pratique lorsque vous réglez le curseur Mobile size depuis un ordinateur.
Bouton Agrandir (mode volet / Drawer Mode)
Le mode volet (Drawer mode) permet au visiteur de transformer la fenêtre flottante de chat en un panneau de pleine hauteur ancré sur le bord de l'écran, tout en gardant votre page visible à côté. Ce mode est idéal pour les conversations que le visiteur suit tout en lisant la page - réponses détaillées, comparaisons de produits, formulaires ou tout contenu contenant beaucoup de texte.
Activez l'option Maximise button (Bouton Agrandir) dans Widget Size (Taille du widget) pour faire apparaître un bouton dans l'en-tête du chat ; le visiteur choisit lui-même de l'utiliser ou non. Son choix est mémorisé pour le reste de la session de navigation.
- Le panneau occupe la moitié de la largeur de la fenêtre du navigateur, jusqu'à 720 px, et toujours sur toute la hauteur. Il s'ancre du même côté que votre lanceur : un widget positionné à gauche ouvrira donc un volet à gauche.
- Desktop width et Desktop height ne s'appliquent pas ici - ils définissent uniquement la taille de la fenêtre flottante normale.
- Le bouton s'affiche uniquement sur les écrans d'ordinateur d'au moins 1 200 px de large, avec une souris. Sur les téléphones et tablettes, il n'apparaît jamais, car le chat y remplit déjà l'écran. Si un visiteur réduit la largeur du navigateur en dessous de ce seuil, le volet se replie dans la fenêtre normale.
- Le lanceur est masqué tant que le volet est ouvert ; le visiteur le ferme depuis l'en-tête, ou quitte le mode volet à l'aide du même bouton.
Le mode volet est désactivé par défaut, rien ne change donc pour vos visiteurs tant que vous ne l'activez pas.
Autres paramètres d'apparence
- Widget Shadow (Ombre du widget) - activez ou désactivez une ombre autour du conteneur du widget de chat
- Open links in (Ouvrir les liens dans) - choisissez si les liens dans les messages du chat s'ouvrent dans un nouvel onglet ou dans le même onglet
Un bouton de fermeture (X) s'affiche également dans l'en-tête du chat sur ordinateur, afin que les visiteurs puissent replier le chat vers le lanceur sans recharger la page. Le bouton de fermeture reste masqué lorsque le chat est intégré sous forme d'iframe ou en mode plein écran.
Pied de page personnalisé du chat
Ajoutez un texte personnalisé affiché au bas du widget de chat (250 caractères maximum). Le Markdown est pris en charge pour insérer des liens. Une utilisation fréquente consiste à faire un lien vers votre politique de confidentialité ou vos conditions d'utilisation.
Exemple de Markdown :
By chatting you accept our [Privacy Policy](https://www.example.com)
CSS personnalisé
Ajoutez des styles CSS personnalisés pour aller encore plus loin dans la personnalisation de l'apparence de votre widget de chat (5 000 caractères maximum) :
Articles connexes
Les modifications sont enregistrées automatiquement. Attendez la mention Saved (Enregistré), puis vérifiez Overview (Aperçu) ainsi que le widget intégré sur ordinateur et mobile. L'aperçu des paramètres montre la fenêtre de chat ; l'emplacement du lanceur et le comportement d'ouverture automatique au niveau de la page doivent également être vérifiés sur votre intégration sur le site web.
- Comment créer votre premier chatbot
- Paramètres de conversation - rédigez le message de bienvenue et les questions suggérées
- Écran de bienvenue - la disposition d'ouverture en plein écran et ses variantes côté visiteur
- Formulaires personnalisés - collectez les coordonnées des visiteurs directement dans le chat
- Collecte de leads