Personnaliser l'apparence du chatbot

À quoi ça sert

L'onglet « Style » aligne la fenêtre de chat sur votre charte : couleurs, police, arrondis. Vous réglez d'abord un style global, puis, si nécessaire, vous affinez élément par élément — l'en-tête, les messages, la zone de saisie, les tableaux…

Un aperçu se met à jour à chaque changement, avant même l'enregistrement.

L'onglet « Style » n'est proposé que pour les chatbots publics et n'est visible que pour les administrateurs du module. Un chatbot interne reprend l'apparence de Deltia.

Concepts clés

• Style global — six couleurs, une police et un rayon de bordure appliqués à l'ensemble de la fenêtre.
• Élément — une partie de la fenêtre de chat qui peut avoir ses propres valeurs : « Page », « En-tête », « Message utilisateur »…
• Héritage — un élément dont une propriété n'est pas renseignée prend la valeur correspondante du style global. Le badge « Hérité du style global » signale cette situation.
• Remplacement — une valeur saisie sur un élément prend le pas sur le style global. Une croix apparaît alors à côté du libellé pour revenir à l'héritage.
• Aperçu en direct — une fenêtre de chat de démonstration, avec des messages fictifs, qui reflète les valeurs en cours de saisie.

Comment faire

Régler le style global

1. Dans le menu, ouvrez « Chatbot », puis la page « Administration » du module.
2. Cliquez sur le chatbot, puis ouvrez l'onglet « Style ».
3. Dans « Style global », réglez les couleurs : « Couleur primaire », « Texte sur primaire », « Couleur de fond », « Couleur de surface », « Couleur du texte », « Couleur de bordure ».
4. Choisissez la « Police » dans la liste.
5. Renseignez le « Rayon de bordure », par exemple 8px ou 0.5rem.
6. Cliquez sur « Enregistrer ».

Le message « Style mis à jour » s'affiche. Le bouton reste inactif tant qu'aucune valeur n'a changé.

Personnaliser un élément

1. Dans l'onglet « Style », dépliez l'élément voulu, par exemple « Message utilisateur ».
2. Réglez « Couleur du texte », « Couleur de fond », « Couleur de bordure », « Rayon de bordure », « Police » ou « Taille de police ».
3. Cliquez sur « Enregistrer ».

Tant qu'une propriété porte le badge « Hérité du style global », elle suit le style global. Dès que vous saisissez une valeur, l'élément s'en détache.

Revenir au style global sur une propriété

1. Dépliez l'élément concerné.
2. Cliquez sur la croix affichée à côté du libellé de la propriété.
3. Cliquez sur « Enregistrer ».

La propriété reprend le badge « Hérité du style global ».

Changer l'icône de l'en-tête

1. Dans l'onglet « Style », dépliez « En-tête ».
2. Cliquez sur le sélecteur « Icône » et cherchez une icône par son nom.
3. Cliquez sur « Enregistrer ».

Sans choix de votre part, l'icône par défaut est utilisée.

Voir l'aperçu

En page pleine et sur écran large, l'aperçu est affiché en permanence à droite du formulaire, sous le titre « Aperçu en direct ».

Dans le volet latéral ou sur écran étroit, cliquez sur « Aperçu » en bas de l'onglet : la fenêtre « Aperçu du style » s'ouvre.

L'aperçu montre une conversation fictive complète — barre latérale d'historique, en-tête, message utilisateur et réponse contenant un titre, une liste, un lien, une citation, du code et un tableau — afin que chaque élément réglable soit visible.

Référence

Style global

La « Police » et le « Rayon de bordure » du style global s'appliquent à tous les éléments qui n'ont pas leur propre valeur.

Éléments réglables

« Page », « En-tête », « Message utilisateur », « Message assistant », « Zone de saisie », « Bouton d'envoi », « Suggestions rapides », « Barre latérale », « Tableau », « Bloc de code », « Code inline », « Lien », « Citation », « Titre ».

Chaque élément accepte les mêmes six propriétés : couleur du texte, couleur de fond, couleur de bordure, rayon de bordure, police, taille de police.

Trois éléments n'héritent d'aucune couleur du style global et se règlent donc entièrement à la main : « Tableau », « Bloc de code » et « Code inline » — ces deux derniers ne reprennent pas non plus la couleur du texte globale.

Polices disponibles

Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Raleway, Source Sans 3, Work Sans, DM Sans, Jost, Plus Jakarta Sans, Outfit, Figtree.

Sans choix, la police par défaut de la fenêtre de chat s'applique.

Formats attendus

Effet sur la bulle intégrée

Le style ne s'arrête pas à la fenêtre : la bulle de chat posée sur votre site reprend la « Couleur primaire » pour son fond, le « Texte sur primaire » pour son icône, la couleur de fond pour le cadre et le rayon de bordure global pour ses angles. Voir Intégrer le chatbot sur un site.

Questions fréquentes

Le style s'applique-t-il tout de suite aux visiteurs ?

Il s'applique dès l'enregistrement, sans republication. La bulle intégrée sur un site externe peut mettre jusqu'à une minute à refléter le changement.

Puis-je utiliser une police de mon entreprise ?

Non. Seules les polices de la liste sont proposées.

Pourquoi l'onglet « Style » n'apparaît-il pas ?

Parce que le chatbot est interne. Un chatbot interne s'affiche dans Deltia et suit son apparence ; le réglage de style ne le concerne pas.

Existe-t-il un thème sombre pour la fenêtre de chat ?

Il n'y a pas de bascule automatique clair/sombre. Vous pouvez en revanche composer une palette sombre en réglant vous-même les couleurs du style global.