Personnaliser l'apparence de votre chatbot

Un chatbot aux couleurs de votre marque inspire confiance : vos visiteurs comprennent tout de suite qu'ils parlent à votre entreprise. Vous pouvez personnaliser l'apparence de votre chatbot (thème, couleurs, logo, position, taille) en quelques clics, avec un aperçu en direct.

Où modifier l'apparence

À la création : à l'étape 4, Apparence, de l'assistant.

Ensuite, à tout moment :

1. Ouvrez Mes chatbots et cliquez sur Modifier sur votre chatbot.
2. Ouvrez l'onglet Apparence.
3. Faites vos réglages en regardant l'Aperçu en direct.
4. Cliquez sur Enregistrer les modifications.

Les changements s'appliquent sur votre site sans toucher au code d'installation. Rechargez la page de votre site pour les voir.

Comment la page est organisée

Le thème, le logo et la position sont visibles tout de suite. Deux sections repliées s'ouvrent d'un clic :

• Personnaliser les couleurs : toutes les couleurs, une par une.
• Options avancées : la taille du widget, l'icône du bouton, l'animation pulse et le décalage vers le haut.

L'Aperçu en direct, à droite, se met à jour à chaque changement.

Le thème

Le plus simple est de partir d'un Thème : ScanChat (par défaut), Clair, Sombre, Bleu pro, Vert nature ou Corail. Un clic applique toutes les couleurs du chatbot d'un coup. Vous pouvez ensuite les ajuster une par une.

Les couleurs

Pour régler les couleurs une par une, dépliez Personnaliser les couleurs. Chaque couleur s'affiche sous forme de pastille ronde : cliquez dessus pour ouvrir le sélecteur, ou saisissez son code (par exemple #7C3AED).

Les couleurs principales

• Couleur primaire (bouton, envoi, messages du visiteur par défaut) : la bulle d'ouverture, le bouton d'envoi et, sauf réglage contraire, les messages écrits par le visiteur.
• Couleur secondaire (messages du bot) : le fond des réponses du chatbot.

La fenêtre de discussion

• Fond de la fenêtre et Texte des messages du bot et de la saisie.
• Couleur de fond de l'en-tête et Couleur du texte d'en-tête : la barre du haut, avec le nom et le logo.
• Fond du champ de saisie et Bordure de la zone de saisie : la zone où le visiteur écrit.

Les boutons de réponses rapides

• Fond des réponses rapides et Bordure des réponses rapides. Voir Réponses rapides.

Les messages du visiteur

• Fond des messages du visiteur : laissé vide (« Auto (couleur primaire) »), il reprend la couleur primaire, comme avant.
• Texte des messages du visiteur : laissé vide (« Auto (blanc ou foncé selon le fond) »), il passe automatiquement en blanc ou en foncé pour rester lisible.

Pour revenir à la couleur automatique, cliquez sur la flèche circulaire à droite du champ.

Le logo

Dans Logo du chatbot, cliquez sur Télécharger un logo et choisissez une image : JPEG, PNG, GIF ou WebP, jusqu'à 5 Mo.

Le logo s'affiche dans l'en-tête de la fenêtre et, si Icône du bouton est réglé sur Logo du chatbot, dans la bulle d'ouverture (voir ci-dessous). Pour en changer, cliquez sur la croix à côté du logo actuel, puis téléversez le nouveau.

Le bouton de lancement

Dans la section repliée Options avancées, la partie Bouton de lancement règle la bulle ronde qui ouvre la discussion.

• Icône du bouton : Icône de discussion (la bulle de chat) ou Logo du chatbot. Sans logo, l'icône de discussion est affichée.
• Animation « pulse » autour du bouton fermé : le halo animé qui attire l'œil. Décochez la case pour un bouton immobile.
• Couleur de l'animation pulse : laissée vide (« Auto (couleur du bouton) »), le halo prend la couleur du bouton.
• Décalage vers le haut : remonte le bouton, la bulle d'accroche et la fenêtre de 0 à 200 px, pour ne pas masquer un bouton WhatsApp ou un bandeau cookies. Sur iPhone, l'espace de la barre d'accueil est ajouté automatiquement.

La bulle d'accroche (Engagement)

La bulle d'accroche ne se règle plus avec l'apparence : elle se trouve à l'étape 5, Engagement, de l'assistant, et dans l'onglet Engagement quand vous modifiez votre chatbot.

Cochez Bulle d'accroche pour afficher un petit message à côté du bouton fermé, par exemple « Une question ? Je vous réponds tout de suite 👋 ».

• Texte de la bulle : 120 caractères maximum. Laissez vide pour le texte par défaut, traduit dans la langue du visiteur.
• Délai d'apparition (secondes, 0 à 60) : 5 secondes par défaut.

La bulle s'affiche une seule fois par visite : elle ne revient pas si le visiteur l'a fermée (croix) ou a ouvert la discussion. Un clic sur la bulle ouvre la discussion.

À partir de l'offre Growth, vous pouvez aussi afficher un message différent selon la page visitée : voir Inviter vos visiteurs avec des messages par page.

La position sur la page

Dans Position du Widget, choisissez Bas droite ou Bas gauche.

Bas droite est l'emplacement le plus courant. Choisissez bas gauche si un autre élément occupe déjà le coin droit de votre site (bouton WhatsApp, bannière de cookies, bouton « retour en haut »…), ou gardez bas droite et utilisez le Décalage vers le haut.

La taille du widget

Dans Options avancées, à Taille du widget, choisissez Petit, Moyen ou Grand. La taille change la bulle et la fenêtre de discussion. Moyen convient à la plupart des sites ; Petit est plus discret, Grand plus lisible pour des réponses longues.

Le nom affiché

Le nom affiché dans l'en-tête de la fenêtre est le Nom du chatbot. Il se modifie dans l'onglet Général. Choisissez un nom clair, par exemple « Assistant Solaire Plus » ou « Conseiller Immo ».

Vérifier le résultat

1. Enregistrez vos modifications.
2. Ouvrez votre site dans une fenêtre de navigation privée (pour éviter le cache).
3. Vérifiez la bulle, ouvrez la fenêtre et échangez quelques messages, sur ordinateur et sur mobile.

Si l'ancienne apparence s'affiche encore sur un site WordPress, videz le cache de votre extension de cache.

Et ensuite ?

1. Rédigez votre message d'accueil.
2. Ajoutez des réponses rapides.
3. Installez le chatbot sur votre site, si ce n'est pas encore fait.