# Design
Vous pouvez (devez) personnaliser votre chatbot. Il existe de nombreuses possibilités nous allons les voir onglet par onglet
# Couleurs
# Couleurs des messages des utilisateurs
Ce sont les couleurs des messages qui sont envoyés par les répondants Dans l'image ci dessous la couleur des bulles est rose et la couleur du texte blanc.
- La couleur de la bulle (color)
- La couleur du texte dans la bulle. Nous utilisons la même couleur pour la couleur du texte des boutons(reponse-color-text)
# Messages du chatbot
Ici vous avez les mêmes options avec en plus la possibilité de personnaliser le picto qui sera l'image de votre chatbot.
- La couleur de la bulle (color-message)
- La couleur du texte de la bulle (color-message-text)
- Le picto de votre cahtbot (picto.url)
# Arrière plan
Vous pouvez modifier l'arrière plan de la fenêtre du chatbot; en modifiant la couleur ou en mettant une image (attention aux yeux)
- Couleur d'arrière plan: nous vous conseillons de garder une couleur sobre 😉
- Image de fond d'écran: Cette image de fond d'écran sera visible sur les écran jusqu'à 577px. Supprimez l'image pour retrouver un fond d'écran uni
- Image de fond d'écran mobile: Cette image sera visible sur les écran mobile (< 577px). Supprimez l'image pour retrouver un fond d'écran uni
# Boutons (Suggestions de réponse)
Vous avez la possibilité d'avoir trois types de boutons. Vous pouvez personnaliser la couleur de fond de chacun de ces boutons. Attention la couleur du texte restera la même dans tous les cas donc assurez vous que les couleurs soient compatibles
WARNING
La couleur du texte des boutons sera toujours la même que la couleur du texte des messages du répondant.
Tant que vous n'avez pas personnalisée la couleur du bouton "default", nous utilisons la couleur de fond des bulles du répondant.
# Header
Le header est la partie supérieure de votre chatbot web
# Affichage du header
Vous pouvez décider de l'afficher ou non grâce à la variable Afficher l'en-tête (design.showTopBar)
# Modification du logo
Vous pouvez modifier le logo. C'est impossible de supprimer le logo. Si vous souhaitez le supprimer, il faudra mettre une image de la même couleur que la top bar (design.logo.url)
TIP
Taille optimale est 100px x 40px avec une limite à 300px x 40px
# Titre du chatbot
C'est le "nom" de votre chatbot. Il sera visible par tous les répondants. Vous pouvez désactiver l'affichage du titre si vous le souhaitez. (Grand Vizir dans l'exemple ci-dessus) (design.title & design.showTitle)
# Description du chatbot
La description sera visible sous le titre du chatbot dans l'interface Web. Vous pouvez activer ou désactiver son affichage également. (Description du chatbot dans l'exemple ci-dessus) (design.description & design.showDescriptionInHeader)
# Couleur du header
Vous pouvez personnaliser la couleur de fond du header ainsi que la couleur du texte du titre et de la description (design.color-header & color-header-titre)
# Afficher un bouton pour recommencer la conversation
Sur l'interface Web, vous pouvez décider d'afficher (ou non) un bouton qui va permettre aux répondants de réinitialiser la conversation. Ce bouton peut être utile lorsque vos répondants sont un peu perdus dans les méandres de votre chatbot, il est souvent plus visible (et plus utilisé) que le burger Menu qui a un rôle similaire.
Ici encore, vous pouvez personnaliser le texte qui s'affichera au passage de la souris sur le picto.
# Affichage
Les options ci dessous vous vous permettre d'afficher ou non les options de l'input bar du répondant.
# Afficher le burger menu
Vous permet d'afficher ou de masquer le burger menu (design.showBurgerMenu)
# Afficher le texte d'aide du burger menu
Vous estimez que le burger menu n'est pas suffisamment visible par vos utilisateurs.
Vous pouvez activer cette option qui vous permettra d'afficher un texte à coté du burger Menu comme ci dessous:
Il faut le faire depuis la section Design > Affichage du dashboard
# Désactiver l'input bar
Permet de désactiver l'input bar. (persistent_menu[0].composer_input_disabled)
PS: Si vous désactivez l'input bar, les boutons d'upload de fichiers et de photos et le bouton du micro ne seront plus visibles.
Le burger Menu reste accessible.
WARNING
Attention les répondants ne pourront intéragir avec le chatbot que via des boutons !
Information technique: C'est théoriquement possible d'activer (ou non) l'input barre en fonction de la langue du répondant, cependant cette fonctionnalité n'est pas encore implémentée. N'hésitez pas à contacter it@vizir.co si vous souhaitez cette fonctionnalité.
# Afficher le bouton d'upload de fichiers
C'est le premier picto qui correspond à un fichier.
# Afficher le bouton d'upload d'images
C'est le second picto qui correspond à un appareil photo.
TIP
Sur mobile, le clic sur ce picto ouvrir directement l'appareil photo.
# Placeholder de l'input
C'est la valeur qui sera visible dans le barre d'input avant que le répondant ne commence à taper sa réponse (design.placeholderMessage)
# Message envoyé par un humain
Vous pouvez personnaliser le message qui s'affiche sous les messages de livechat avec le nom de l'opérateur qui répond à votre utilisateur. (design.fromHumanMessage)
Voici ce qu'on obtient:
Pour le faire c'est très simple
Dans Design du chatbot > Affichage vous pouvez rajouter la variable operatorName dans la section Message envoyé par un humain
# Voice Bot
Depuis 2020, il est possible d'activer le voice bot sur votre chatbot web. Cette première implémentation est très simple, quand l'option est active. Un nouveau picto va s'affiche dans la barre de texte du répondant et quand il cliquera sur ce bouton nous allons déclencher le micro et envoyer le texte communiqué comme un message.
La langue sera détecté à partir de la langue par défaut du chatbot qui se décide dans NLU/entrainement.
informations techniques
Nous utililsons les WebSpeechApi des navigateurs pour transformer le son en texte et le texte en message audio. Ensuite, nous analysons le texte comme ci celui-ci était écrit par l'utilisateur.
Le module SpeechRecognition (écouter) et de SpeechSynthesis (parler) que nous utilisons sont ceux qui sont directement disponible dans les navigateurs les plus récents.
Pour plus d'information veuillez vous référer à la documentation ci-dessous:
# Widget
Le widget sera visible sur votre site comme sur l'image ci dessous.
On peut encore une fois personnaliser de nombreux paramètres:
# Picto du widget
C'est l'image qui sera affichée avant que le widget ne soit ouvert (design.picto.widget)
# Forme et Taille du widget
On peut choisir entre la forme carré avec des angles arrondis ou la forme ronde pour le widget. (design.widget-picto-shape)
Vous avez également le choix entre plusieurs taille pour le widget. (design.widget-picto-size)
TIP
Le widget étant visible sur votre site, vous pouvez modifier le CSS. (font, font-size, position, ...)
# Notification
La notification s'active dans plusieurs cas:
- première visite sur le site, le premier message du chatbot s'affiche dans une bulle
- dans le cas d'un livechat enclenché, tous les messages envoyés par un utilisateur seront visibles par le répondant sans qu'il ait besoin d'ouvrir le widget via cette bulle de notification.
Vous pouvez modifier la taille de la notification, la couleur du texte et la couleur du fond de la notification. (design.widget-notification-background-color & design.widget-notification-text-color & design.widget-font-size)
# Délais
Nous avons rajouté la possibilité de jouer sur 2 délais différents
Ajouter un délai avant d'afficher le widget (en ms): Ca vous permet de ne pas afficher le widget directement sur votre site web mais après un seulement après un certain temps. Ca peut-être utile pour ne pas "effrayer" le répondant ou pour entamer une conversation seulement avec les visiteurs qui sont intéressés par votre produit (qui restent plus de 1 minute sur votre site par exemple) (design.show_widget_delay)
Afficher une notification: Cette option vous permet d'afficher une notification (petit 1 rouge dans la bulle du widget) même si l'utilisateur à déjà lu le dernier message. Ca peut-être utile pour certain cas d'usage lorsqu'on souhaite que le répondant termine sa conversation. Attention à ne pas en abuser car ça peut-être très intrusif. (design.show_widget_notification_delay)
# Ouverture automatique du widget
Permet d'activer l'ouverture automatique du widget (au moment où l'utilisateur arrive sur une page comportant le widget). Cette option peut bien sûr se combiner avec le "délai avant affichage du widget".
# Valeur de l'attribut "title" de l'iframe du widget
Pour consulter les pages web, les personnes malvoyantes peuvent utiliser des lecteurs d'écrans qui retranscrivent en audio la structure et le contenu des pages. La valeur définie ici sera lue par les lecteurs d'écrans lors de la navigation sur la page embarquant le widget.
# Position
Nous avons prévu dans notre roadmap de personnaliser la position du picto de widget. Cependant étant donné les "normes" du marché nous avons désactivé cette possibilité sur le dashboard. Ecrivez nous à it@vizir.co si vous souhaitez modifier la position du widget sur votre site. (design.widget-picto-position)