Vizir

# 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) color messages

# 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.

Le header est la partie supérieure de votre chatbot web Header

# Affichage du header

Vous pouvez décider de l'afficher ou non grâce à la variable Afficher l'en-tête (design.showTopBar)

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. restart button

Ici encore, vous pouvez personnaliser le texte qui s'affichera au passage de la souris sur le picto.

# Emplacement du bouton

Le bouton recommencer peut être présent dans le header ou dans la barre de saisie du texte comme ci dessous restart button

# Paramètres

Les options ci dessous vous vous permettre d'afficher ou non les options de l'input bar du répondant. Input bar

# 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: Input bar

Il faut le faire depuis la section Design > Affichage du dashboard Input bar

# 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: Livechat Message sent By Humain

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

Message Livechat edit

# 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.

Voice button

La langue sera détecté à partir de la langue par défaut du chatbot qui se décide dans NLU/entrainement.

default_language voice bot

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:

👉 SpeechRecognition (opens new window)

👉 SpeechSynthesis (opens new window)

# Widget

Le widget sera visible sur votre site comme sur l'image ci dessous. Widget

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, ...)

La taille idéale pour l'image du widget est de 52x52 pixels.

# 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)

# Surcharger des couleurs dans un iframe

Il est possible de surcharger les couleurs définies dans le design du chatbot au moment ou celui-ci est chargé dans un iframe. Cette surcharge s'effectue en query d'url, par exemple:

<iframe src="http://localhost:8080/62ce70e87bd07560d278a3ba?--message-background-color=334466&--color-header=234578&--color-button-default=234578"
</iframe>

modifie la couleurs des messages de l'utilisateur en #334466 et la couleur du header en #234578

les clés valides sont les suivantes:

  • --message-background-color
  • --message-color
  • --background-color
  • --mobile-background-color
  • --message-color-text
  • --reponse-color-text
  • --color-header
  • --color-header-titre
  • --color-button-default
  • --color-button-success
  • --color-button-danger

elles sont associées à la valeur hexadécimale de la couleur souhaitée sans '#' en préfixe.

← Conversation →