Aller au contenu principal

Intégration - Boite de dialogue

Cette version est toujours disponible et supportée mais ne sera plus développée. La nouvelle version est disponible ici :::

Intégration - Boite de dialogue

La boîte de dialogue est générée par du code javascript. Il s'agit également d'images pour l'avatar, de smileys et éventuellement d'autres éléments s'il a été personnalisé.

Disposition

La boîte de dialogue peut être intégrée de deux manières différentes sur le site :

  • Mode popin;

  • Mode intégéré.

Mode popin

Le mode popin est le plus commun et le plus facile à implémenter. En effet, aucune modification visuelle n'est à prévoir sur le site hébergeant la boîte de dialogue. La boîte de dialogue s'ouvre sur le contenu du site et – dans la plupart des cas – peut être déplacée, ce qui permet à l'utilisateur d'accéder à tout le contenu de la page même lorsqu'elle est ouverte.

Lorsque l'utilisateur fait défiler la page, la boîte de dialogue est toujours visible. Elle n'est pas impactée par le fait que la page défile.

Mode intégéré

Le mode intégré consiste à afficher la boîte de dialogue dans un cadre fixe pour l'accueillir. En conséquence, la page doit être modifiée là où la boîte de dialogue sera affichée. De plus, lorsque l'utilisateur fera défiler la page, la boîte de dialogue défilera également.

L'avantage du mode intégré réside essentiellement dans le fait que la boîte de dialogue apparaît immédiatement ouverte et cela augmente le taux d'utilisation.

Les deux modes ne sont pas exclusifs : il est possible d'utiliser le mode popin sur certaines pages et le mode intégré sur d'autres.

Prérequis

L'intégration de la boîte de dialogue nécessite les prérequis suivants :

Code HTML

L'intégration se fait via une seule ligne de code HTML :


<script id="dyduchatbox" src="assembly.min.js"></script>

Le script chargera alors tous les fichiers nécessaires au bon fonctionnement de la chatbox depuis le serveur d'hébergement.

La valeur de l'attribut "src" doit être mise à jour avec l'adresse du script fournie par dydu.

Important : il est important d'ajouter l'attribut ID dans cette balise.

Variables de contexte

Par défaut et pour respecter la vie privée des utilisateurs, la solution dydu ne collecte que très peu d'informations sur l'utilisateur : OS, navigateur, adresse IP et URL en cours.

Afin de personnaliser les réponses de la base de connaissances ou d'afficher d'autres informations aux opérateurs de Livechat, il est possible d'ajouter des variables de contexte à la discussion. Cela permet, par exemple, de lire le nom de l'utilisateur ou du produit qu'il regarde.

Il y a deux façons de faire ça:

  • registerContext : cette méthode permet de définir des variables qui sont modifiées côté client (exemple : valeur actuelle du panier). Cette information est envoyée à chaque question de l'utilisateur.

  • dydu.chatbox.registerContext ('VariableName','VariableValue ')

Cette fonction est également compatible avec les fonctions. Par exemple :

dydu.chatbox.registerContext ('VariableName', FunctionWhoReturnsValue)

De plus, étant donné que ces fonctions font partie de l'application dydu, il est nécessaire d'attendre le chargement complet de la page avant de pouvoir les appeler.

La fonction dyduAfterLoad est automatiquement appelée à la fin du chargement du script.

Exemple complet :

Pour vérifier que ces variables sont prises en compte par l'application, vous n'avez qu'à taper le mot-clef "#contextvariables#" dans la boîte de dialogue.

  • setDialogVariable : cette méthode est utilisée pour initialiser une variable côté serveur (exemple : utilisateur identifié initialisé à faux et modifié en connaissance). Cette information est envoyée une fois. setDialogVariable fonctionne sur le même principe que registerContext.

  • dydu.chatbox.setDialogVariable ('VariableName','VariableValue ')

Cette fonction est également compatible avec les fonctions. Par exemple :

dydu.chatbox.setDialogVariable ('VariableName', FunctionWhoReturnsValue)

Débogage

Vous pouvez vérifier le fonctionnement des variables une fois les conversations terminées, c'est-à-dire après 10 minutes d'activité. Si vous ne voulez pas attendre la fin du dialogue, vous pouvez taper le mot-clé "#newdialog#" dans la boîte de dialogue.

Ensuite, dirigez vous sur la page Conversations et filtrez vos conversations. N'oubliez pas d'afficher les boîtes de dialogue de test. Cliquez ensuite sur la boîte de dialogue dont vous souhaitez vérifier les variables de contexte.

Ensuite, cliquez sur Informations complémentaires pour montrer les variables.

API de la boîte de dialogue

La fonction togglePopin permet d'afficher ou de masquer la boîte de dialogue lorsqu'il s'agit d'un "popin", c'est-à-dire sous la forme d'une pseudo-fenêtre contenue dans la page.

En devenant "true", la boîte de dialogue apparaît. Sur "false", elle disparaît.

La fonction de reformulation permet d'envoyer une question au moteur de dialogue et d'afficher en même temps la boîte de dialogue si elle n'était pas visible sur la page.

Navigateur Web de bureauVersionComptabilité
Microsoft Edge≥ 80Total
Mozilla Firefox≥ 68Total
Apple Safari≥ 13.0Total
Google Chrome≥ 83Total
Borne mobileVersionComptabilité
iOs≥ 10Total
Android≥ 6Total

Les tests à effectuer dépendent de la disposition choisie pour la boîte de dialogue, les jeux de tests sont ainsi divisés en 2 parties, une première partie commune à toutes les dispositions et une seconde partie spécifique aux popins.

Cookies

Pour son usage interne, et pour assurer la continuité du dialogue entre les différentes pages, la boîte de dialogue utilise les cookies suivants :

Cookie IDSensDurée de stockage
DYDU_lastBotAnswerEncodedC'est la dernière réponse donnée par le bot. Ainsi, si l'utilisateur change de page et affiche à nouveau la boîte de dialogue, la boîte de dialogue contiendra toujours la dernière réponse fournie. Cette réponse est encodée en base64.Durée de la session
DYDU_lastUserQueryTimeIl s'agit de la date de la dernière demande de l'utilisateur. S'il est inexistant ou s'il a plus de 10 minutes, une nouvelle conversation sera créée côté moteur de dialogue.Durée de la session
DYDU_alreadyCameIl s'agit d'un booléen qui permet de savoir si l'utilisateur a déjà discuté avec le bot auparavant.365 jours
YDU_contextIl s'agit de l'ID de la conversation.Durée de la session
DYDUchatboxvisibleIl s'agit d'un booléen qui indique si la boîte de dialogue est visible ou non.Durée de la session
DYDU_clientIdIl s'agit d'une valeur aléatoire générée pour pouvoir reconnaître un utilisateur qui revient utiliser la solution ultérieurement.365 jours
DYDU_lastvisitfor_XXXXXIl s'agit de la valeur de la dernière visite de l'utilisateur (le XXX est généré pour que plusieurs boîtes de dialogue puissent coexister sur le même domaine). Ce cookie est utilisé pour connaître le nombre de visiteurs uniques et pour calculer un ratio d'utilisateurs conversant avec la boîte de dialogue.365 jours
dydu.common.contextIdIl s'agit d'un cookie contenant le contexte de la conversation précédente.10 minutes
dydu.loading.statesIl s'agit d'un cookie contenant les états (affichés ou masqués) des différents éléments de la boîte de dialogue (utiles pour rafraîchir ou changer de page) : bouton d'appel, barre latérale, boîte de dialogue.10 minutes
dydu.popinIl s'agit d'un cookie contenant la position de la boîte de dialogue.10 minutes
dydu.sidebarIl s'agit d'un cookie contenant le contenu de la barre latérale (utile quand on rafraîchit la page).10 minutes
dydu.common.languageIl s'agit d'un cookie contenant la langue utilisée.10 minutes
dydu.step.stateIl s'agit d'un cookie contenant l'état du dialogue, notamment dans le cas où il y a des étapes dans les réponses (quelle est l'étape actuelle sur combien d'étapes ?).10 minutes
dydu.currentProfilePictureIl s'agit d'un cookie Livechat contenant le lien vers l'image de l'opérateur.10 minutes
dydu.miniCurrentProfilePictureIl s'agit d'un cookie Livechat contenant le lien vers l'image de l'opérateur.10 minutes
dydu.livechat.infoIl s'agit d'un cookie contenant des informations utiles pour la boîte de dialogue Livechat (nom de l'opérateur, statut de l'opérateur : connecté, en pause, ..., identifiant de l'opérateur, etc.).10 minutes
dydu.livechat.userwritingcontentinfoIl s'agit d'un cookie Livechat contenant le message saisi par l'utilisateur. Ceci est utile pour montrer à l'opérateur ce que l'utilisateur a commencé à taper même s'il change de page.10 minutes
dydu.common.languageIl s'agit d'un cookie facultatif contenant la langue (utile en cas de changement de la version de base).10 minutes
dydu.XXXX.common.spaceIl s'agit d'un cookie facultatif contenant le nom de l'espace de consultation (utile en cas de changement par rapport à la version de base).10 minutes
DYDU_PUSH_globalIl s'agit d'un cookie contenant l'heure de la page, l'heure de la visite, le nombre de fois que le client a visité la page.60 jours
DYDU_PUSH_sessionIl s'agit d'un cookie contenant le nombre de pages consultées et le temps écoulé depuis la dernière page consultée.24 heures
dydu.teaserIl s'agit d'un cookie contenant la configuration et l'état du bouton d'appel (classique / livechat / ... affichage, affiché, caché, etc.).10 minutes
dydu.gdprIl s'agit d'un cookie contenant la date et le temps (GMT) (cookie opérationnel).365 jours
dydu.onboardingIl s'agit d'un cookie contenant la date et le temps (GMT) (cookie opérationnel).365 jours
dydu.authsessionC'est un cookie de token d'authentification (en-tête http).Durée de la session
dydu.top3Il s'agit d'un cookie contenant le top 3 des connaissances conceptualisées (fonctionnalité dépréciée).1 mois

Remarque : certains cookies nécessitent l'activation du module correspondant.

À l'exception du cookie de la barre latérale, les autres cookies ne conservent pas beaucoup d'informations en volume et le total stocké par l'ensemble de ces cookies est d'environ 2ko.

Dans l'interface de configuration de la boîte de dialogue, il est possible de préciser pour quel domaine ces cookies sont utilisés.

Il est donc possible de créer une continuité dans la conversation sans configuration particulière du serveur, même si la boîte de dialogue apparaît sur plusieurs sous-domaines.

La continuité est également possible même si la boîte de dialogue est intégrée sur différents serveurs de natures différentes.

Comptabilité

Navigateur Web de bureauVersionComptabilité
Microsoft Edge≥ 80Total
Mozilla Firefox≥ 68Total
Apple Safari≥ 13.0Total
Google Chrome≥ 83Total
Borne mobileVersionComptabilité
iOs≥ 10Total
Android≥ 6Total

Freins techniques à l'intégration d'une chatbox sur un site

Le site utilise angular JS :

Si la boîte de dialogue est déployée sur un site qui utilise angular JS, il est impératif que les deux moteurs angular n'entrent pas en conflit, car le site serait inaccessible et la boîte de dialogue aussi.

Angular s'initialise par le biais d'un attribut dans une balise HTML. Toutes les balises encapsulées dans ces dernières sont impactées. En outre, l'initialisation d'un nouveau moteur angulair effectuée dans un moteur précédent est également une source de conflits.

En termes de code, NE FAITES PAS :

MAIS:

ATTENTION :

Il n'est pas recommandé de charger du contenu HTML en dehors du corps, mais pour éviter les conflits avec angular, c'est une solution efficace.

Bugs communs :

  1. Contraintes techniques en termes de compatibilité CSS :

Si le site du client définit des styles CSS sur les balises html. Exemple :

L'apparence de la boîte de dialogue pourrait être modifiée.

  1. la balise meta viewport incorrectement saisie :

Le site s'affiche incorrectement sur mobile ou tablette et la boîte de discussion apparaît en taille réduite.

Bug rare

Si le site du client utilise des fonctions JS avec le même nom que les nôtres, celles-ci peuvent être impactées sur le site du client et sur la boîte de dialogue : les fonctions seront KO.

Pour corriger les bugs, il sera nécessaire d'attribuer un accès aux équipes de Do You Dream Up à la page où le bug a été trouvé.

Vous pouvez également utiliser l'outil via l'hébergement DYDU pour optimiser le temps de correction des bugs : https://static.doyoudreamup.com/.../assembly.min.js

ATTENTION

Un bug trouvé sur un site ne le sera pas nécessairement sur un autre. Aucun site n'étant identique, il est possible que certains bugs apparaissent sur une URL et pas sur une autre. Il faut ensuite regarder page après page pour voir les pages sur lesquelles les bugs ont été identifiés et ainsi les corriger un par un.