Aller au contenu principal

Customisation

Introduction

Ce document explique comment la chatbox dydu fonctionne et décrit ses différents composants. Voici un lien où vous pouvez tester la chatbox : https://cdn.doyoudreamup.com/development/prod/index.html

Les éléments de la chatbox dydu

Informations générales

Lors de la mise en place d’une nouvelle chatbox, 2 paramètres sont importants et concernent de multiple éléments :

  • les textes affichés sur la chatbox
  • la couleur principale ou “primary” de la chatbox

Personnalisation des textes & traductions

La modification des textes inhérents à la chatbox est possible. Vous devez demander à la team IT la dernière version du fichier contenant les ressources textuelles. Il vous faudra alors :

  • télécharger le fichier
  • l’ouvrir, effectuer les modifications souhaitées et sauvegarder cette nouvelle version
  • la communiquer à la team IT pour intégration

La chatbox est traduite en français et en anglais.

Personnalisation de la couleur “primary”

Dans la chatbox, la couleur principale ou “primary” (bleu dans notre exemple) sera appliquée aux éléments suivants.

  • Header
  • Les boutons
  • La bulle des questions de l’utilisateur, avec une opacité 0.2 (transparence)
  • Les liens texte
  • Le background du texte du teaser

Ouvrir la chatbox

Quand l'utilisateur arrive sur la page web où la chatbox dydu est installée, 3 options d’affichage sont possibles :

  • Mode teaser : La chatbox est réduite, un bouton-logo est affiché afin que l’utilisateur clique dessus et ouvre la chatbox.

  • Mode Popin : La chatbox est déjà ouverte et prête à être utilisée par l’utilisateur.

  • Mode full screen : La chatbox est d’ores et déjà ouverte en pleine largeur et est affichée sur l’intégralité de la page.

Teaser

Quand la chatbox est réduite, un bouton composé d’une image et d’un texte est affiché, permettant ainsi à l’utilisateur d’ouvrir la chatbox en cliquant dessus. Voici le teaser.

Le teaser de la chatbox peut être personnalisé.

  • Vous pouvez choisir d’ajouter ou non un texte d’aide (exemple : Besoin d’aide ?).
  • Vous pouvez personnaliser l’image. Nous recommandons d’utiliser des fichiers .svg pour l’image du teaser de la chatbox.

Notice d’informations RGPD

Lorsque l’utilisateur arrive sur la chatbox pour la première fois, un disclaimer RGPD est affiché.
Il doit accepter les clauses RGPD pour pouvoir accéder à la chatbox.

Sur cette page vous pouvez personnaliser :

  • le texte de la notice d’informations
  • le texte des boutons d’action
  • pour les boutons, la couleur principale ou primary color sera appliquée

Onboarding

Le Onboarding est une étape importante dans le parcours utilisateur. Il s’agit en effet de la première approche que l’utilisateur aura avec votre bot. Vous pouvez placer ici des astuces et conseils pour une meilleure utilisation de la chatbox.

Pour le onboarding il est possible de :

  • activer ou désactiver ce module de onboarding
  • personnaliser les images
  • personnaliser les textes : titres et descriptions

Questions les plus posées - Top connaissances

Vous pouvez choisir d’activer ou désactiver l’affichage du top connaissances (qu’il soit manuel ou dynamique) sur la chatbox.

Pour ce top connaissance vous pouvez :

  • proposer 3 top connaissance (par défaut) aux utilisateurs
  • personnaliser le texte d’introduction via le fichier texte

L’entête ou “header” est la barre supérieure de votre chatbox. Pour ce header vous pouvez :

  • customizer la couleur de fond du header (primary color)

  • customizer l’image de l’avatar

  • activer ou désactiver l’affichage d’un titre dans le header : dans l’exemple ci-dessus : Besoin d’aide ?. Si vous avez besoin de changer le texte affiché, référez-vous au fichier texte

  • afficher ou non les boutons d’action

    • le bouton fermer

      • quand on clique sur ce bouton, la chatbox se ferme et n’apparaît plus sur la page web. Pour l’afficher à nouveau, vous devez rafraîchir la page
      • avant la fermeture de la chatbox, une fenêtre modale avec une demande de confirmation est affichée. Le texte du message affiché peut être personnalisé dans le fichier texte
    • le bouton réduire => la chatbox est réduite au mode teaser

    • le bouton étendre => la chatbox est étendue au mode plein écran

    • le bouton plus => ce bouton propose plusieurs autres options :

      • RGPD => possibilité pour un utilisateur d’exporter ou de récupérer les données d’une conversation.
      • Envoyer la conversation par email
      • Imprimer la conversation
      • dans le cas où le bot possède plusieurs espaces de consultation avec switch manuel, l’option de changement d’espace sera présente ici (tous les textes de ces différentes options peuvent être modifiés via le fichier texte

Espaces de consultation

Si le bot possède de multiples espaces de consultation, veuillez préciser à l’équipe IT si la bascule d’un espace à un autre est faite manuellement ou dynamiquement

  • en cas de switch manuel, merci de vous référer à l’explication précédente
  • en cas de switch dynamique : merci de communiquer selon quel paramètre le client souhaite effectuer ce switch afin qu’une étude de faisabilité soit effectuée par l’équipe IT. Actuellement, ce switch dynamique peut être effectué :
    • selon l'url ou
    • selon la présence d’un cookie (attention la valeur du cookie doit prendre la valeur de l’espace de consultation définie dans le BMS ou inversement).

Avatar custom ou “Mood” avatar

Sur la chatbox vous pouvez choisir de personnaliser l’avatar de votre header en fonction du degré de compréhension du bot (selon le score du matching). (cela n’est valable que pour l’avatar présent dans le header et non pour l’avatar principal : teaser et réponse du bot).
L’avatar du header peut ainsi changer suivant 4 états différents. Vous pouvez personnaliser les images de chacun de ces différents états :

  1. Par défaut, neutre
  2. Reword
  3. Phrase incomprise
  4. Phrase comprise

Note : il n’est pas possible de mettre en place un avatar seulement pour un état, si vous choisissez d’activer ce composant, vous devez renseigner un avatar pour les 4 états. Libre à vous de choisir le même avatar pour un état ou plus.

Bannière

Vous pouvez mettre en place une bannière avec un message personnalisé sur votre chatbox. La bannière est affichée quand l’utilisateur ouvre la chatbox pour la première fois.

Concernant la bannière, vous pouvez :

  • personnaliser le text affiché depuis le fichier texte
  • choisir d’afficher ou non les 2 boutons

Les rôles des 2 boutons sont

  • Bouton Merci => il permet de cacher la bannière
  • Bouton Plus => il ouvre une url dans un autre onglet/fenêtre. L’URL peut être personnalisée dans le fichier texte

Conversation

Quand la chatbox est ouverte et qu’il y a une conversation avec l’utilisateur, on peut voir :

  • La réponse du bot avec les éléments suivants

    • (1) avatar de la réponse => image personnalisable, qui peut être affichée ou non. Cette image n'est pas la même que celle de l'avatar du bot.
    • (2) la réponse => la couleur peut être personnalisée
    • (5) le module feedback
  • La requête de l’utilisateur avec les éléments suivants

    • (3) la question => la couleur de fond correspond à la primary color avec une opacité de 10%
    • (4) l'avatar de la question => peut être affiché ou non

Feedbacks

Après une réponse du bot, vous pouvez demander à l’utilisateur d’évaluer la qualité de la réponse.
Vous pouvez activer ou désactiver le module feedback de la chatbox pour chaque connaissance du BMS.
Si activé, ce module vous permet d’afficher sous la connaissance 2 boutons feedback : un pour un retour négatif et un pour un retour positif de la part de l’utilisateur.

Ces 2 boutons sont représentés l’un par un pouce en l’air et l’autre par un pouce vers le bas. Vous pouvez personnaliser les couleurs.

La fonctionnalité Demande de choix peut être affichée lorsque l’utilisateur sélectionne le bouton de feedback négatif : cela propose alors une liste de 3 choix par défaut (voir ci-dessous).

Vous pouvez personnaliser ces textes, cependant ils ne seront pas synchronisés avec les étiquettes du back office.
Les raisons suggérées sont affichées comme n’importe quelle bulle de réponse du bot.
La couleur du texte peut être personnalisée.

La fonctionnalité demande de commentaire permet d’afficher un champ de commentaire texte quand l’utilisateur clique sur le bouton de feedback négatif. Quand le bouton retour négatif est sélectionné, un champ texte est affiché afin que l’utilisateur puisse envoyer un commentaire personnel.

Les boutons Envoyer / Fermer sont affichés en couleur primary telle que paramétrée. Vous pouvez personnaliser les textes de ces boutons.

Un message remerciant l’utilisateur pour son retour sera affiché :

Ce message est personnalisable via le fichier texte.

Loader

Vous pouvez choisir d’afficher ou non un loader animé avant chaque réponse du bot.

Vous pouvez définir des valeurs pour le temps de réponse moyen.
Par exemple, le loader dure en moyenne entre 400 et 600 ms, mais vous pouvez changer ces valeurs afin qu’il soit plus ou moins long.

Connaissance de bienvenue

Si vous avez besoin d’afficher un message de bienvenue au début de la conversation, vous devez créer dans votre base de connaissance une connaissance intitulée #welcome#.

Autrement, un message d’erreur sera affiché, le chatbot n’étant pas capable de trouver un message de bienvenue à afficher.

Le footer est le composant affiché en bas de la chatbox. Vous pouvez paramétrer plusieurs fonctionnalités qui seront affichées dans cette section :

Langue

Si vous choisissez d’avoir plus d’une seule langue pour votre chatbox, une icône drapeau sera affichée à la gauche du footer.
En cliquant sur le drapeau un menu déroulant apparaît. Toutes les langues pouvant être parlées par le bot seront proposées.
Si vous choisissez d’avoir plus d’une seule langue, vous devez préciser quelle est la langue par défaut de votre chatbox.

La langue par défaut de la chatbox peut aussi être affichée d’après la langue du site web sur lequel est la chatbox .

Le changement de langue peut être :

  • manuel => avec le menu déroulant dans le footer
  • dynamique => une étude de faisabilité sera réalisée par l’équipe IT dans ce cas-là
    • la langue de la chatbox peut être identique à la langue du site web du client
    • la langue de la chatbox peut être mise en place en fonction de paramètres avancés du client.

Saisie

Le champ de saisie est là où l’utilisateur écrira sa question pour le bot. Vous pouvez personnaliser le texte qui est affiché en tant que placeholder dans le champ de saisie (par exemple : Ecrivez ici…).

Le champ de saisie dans le footer de la chatbox peut afficher ou non un compteur des caractères restants.

  • Vous pouvez personnaliser la couleur de ce compteur.
  • Vous pouvez également décider du nombre maximum de caractères que vous autorisez par question/intention. Dans l’exemple ci-dessous, le nombre max de caractères autorisés est 100 :

Suggestions automatiques

Vous pouvez activer ou désactiver les autosuggestions : quand un utilisateur commence à taper son intention, des connaissances peuvent lui être suggérées.

Si vous activez cette fonctionnalité, 3 suggestions max (par défaut) seront proposées à l’utilisateur.

Panneau latéral

Certaines réponses du bot peuvent être affichées avec un panneau latéral afin d’offrir plus de contenu à l’utilisateur. Ce panneau latéral peut être affiché ou caché

Voici des exemples de panneaux latéraux :

Vous pouvez configurer ainsi le panneau latéral de votre chatbox :

  • Vous pouvez activer ou désactiver l’ouverture automatique du panneau à chaque fois qu’il est mis en place (ce comportement sera le même que ce soit sur ordinateur, mobile ou sur le chatbot plein écran ).
  • Vous pouvez choisir la direction d’ouverture du panneau : gauche, droite, en haut ou en bas de la chatbox.
  • Vous pouvez paramétrer la permanence de ce panneau latéral. Le panneau latéral peut être affiché seulement une fois et disparaître lorsque la page est rafraîchie, ou il peut être tout le temps accessible et ne disparaître que suite à l’action de l’utilisateur.

Par exemple le bouton fermer ci-après permet de masquer le panneau latéral :

Note : à partir de la v5.6.22, lorsque la chatbox est en mode plein écran en web ou mobile, le panneau latéral ne s’ouvre pas automatiquement. L’utilisateur peut l’ouvrir en cliquant sur un bouton d’action Plus. L’ouverture manuelle du panneau latéral sur une chatbox plein écran peut être désactivée afin que ce dernier puisse s’ouvrir automatiquement. Attention, ce cas de figure peut surprendre l’utilisateur final.

Onglets

Vous pouvez choisir d’afficher ou non un autre onglet contact dans votre chatbox. Pour les onglets vous pouvez choisir d’afficher

  • seulement les icônes
  • les icônes & le texte
  • seulement le texte

Mots-clés de test CV5

Voici quelques mots clés pour vous aider à tester votre chatbox :

  • #meta# -> donne les informations à propos de la chatbox
  • #host# -> donne le nom du server
  • #reset# -> réinitialise la conversation
  • #secondary# -> ouvre le panneau latéral
  • #split# -> affiche du contenu divisé
  • #contextVariables# -> affiche les variables de contexte si précédemment créées
  • #botid# -> donne l'id du bot
  • #lorem# -> montre comment le texte peut s'afficher dans la chatbox