Mise en place et intégration

PrécédentChatbox V5 SuivantRelease Note

Dernière mise à jour il y a 10 jours

Cet article vous a-t-il été utile ?

Mise en place et intégration

Intégration

Intégrez votre chatbox à une page web

Après avoir créé un chatbot à partir de dyduBox ou depuis notre dépôt public vous pouvez l'intégrer sur votre site web.

Afin d'intégrer le chatbot sur votre site web, vous devrez :

Intégrer un script sur la page web où vous voulez que le chatbot soit affichée.
Ce script se trouve sur la page de publication de votre intégration sur canaux (exemple ci-dessus).
Jusqu'à la version edge_2024-11-26 , ce script se terminait en bundle.min.js.
à partir de la version edge_2024-12-10, il y'a un changement à apporter sur les URLs de vos sites web , car ce script se termine maintenant en loader.js. Cette modification a été apportée pour résoudre des problèmes de cache qui pouvaient se produire lors de la publication de nouvelles versions. Une rétrocompatibilité est assurée avec l'ancienne notation bundle.min.js mais il est fortement recommandé d'utiliser la nouvelle URL en loader.js.

Exemple de script d'intégration :

    <head>

    </head>
    <body>
    <script src="https://cdn.doyoudreamup.com/dydubox/configurations/xxxxxxxx/loader.js"></script>
    </body>

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

Définir le mode de qualification de la chatbox (optionnel)

Lorsque vous intégrez le script loader.js dans une page web, vous pouvez spécifier si les conversations générées sur cette page seront considérées comme des tests ou de production.

Les conversations de test seront enregistrées dans le BMS et affichées dans le menu Apprentissage - Conversations (avec les filtres "Tests seuls" ou "Avec tests"). Elles ne seront pas comptabilisées dans le module Statistiques.
Au contraire, les conversations de production seront enregistrées et affichées dans le menu Conversations ET seront comptabilisées dans le menu Statistiques.

Pour ce faire, vous pouvez ajouter une variable à la page HTML qui intègra votre chatbox : DYDU_QUALIFICATION_MODE.

Si la variable DYDU_QUALIFICATION_MODE = true, alors les conversations seront considérées comme des tests et ne seront pas comptabilisées dans le menu Statistiques.
Si DYDU_QUALIFICATION_MODE = false OU la variable n'est pas spécifiée, alors les conversations seront considérées comme production et seront comptabilisées dans le module Statistiques.

Exemple :

    <head>

    </head>
    <body>
    <script src="https://cdn.doyoudreamup.com/dydubox/configurations/xxxxxxxx/loader.js"></script>
    <script> DYDU_QUALIFICATION_MODE = true </script>
    </body>

Comment définir des variables personnalisées pour la chatbox

setRegisterContext

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 : système d'exploitation, navigateur, terminal et URL en cours.

Afin de personnaliser les réponses de la chatbox 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 consulte. Pour configurer une variable de contexte sur la chatbox, vous devez appeler la fonction suivante :

window.dydu.chat.setRegisterContext(name, value);

Avant d'appeler cette fonction, il est nécessaire d'attendre que le chatbox soit complètement chargée sur le site web.

À chaque fois qu'une question utilisateur est envoyée au moteur Dydu, les requêtes contiendront systématiquement les informations du register context. Ainsi, il faut considérer que ces informations sont des constantes et qu'elles ne peuvent pas être modifiées dans la base de connaissances.

dyduAfterLoad

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

Veuillez noter qu’un script chargé ne signifie pas nécessairement que la chatbox est prête à être utilisée. Elle pourrait encore être en cours d’initialisation au moment où cette fonction est appelée.

Exemple :

<script>
    dyduAfterLoad = () => {
        window.dydu.ui.toggle(2)
    };
</script>

dyduChatboxReady

Cette fonction est appelé lorsque la chatbox est prête à être utilisée. La chatbox est prête lorsque le visiteur a été enregistré, la connaissance #welcome# a été reçue, l'historique de conversation a été reçu, et les top connaissances reçus.

Si vous souhaitez appeler certaines de nos fonctions en lien avec la conversation, il vaut mieux utiliser cette fonction.

Par exemple, pour l'enregistrement de variables personnalisées:

<script>
      dyduChatboxReady = () => {
        window.dydu.chat.setDialogVariable("variable_custom", "valeur variable custom");
      }
</script>

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.

window.dydu.chat.setDialogVariable(name, value);

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

Autres fonctions de la chatbox

Il est possible de déclencher différents comportements de la chatbox à l'aide des méthodes suivantes

Modifier le mode d'ouverture de la chatbox

Basculer le chatbot :

window.dydu.ui.toggle(integer)

Le paramètre integer peut avoir les valeurs suivantes

0 - la chatbox est masquée
1 - la chatbox est en mode Teaser
2 - la chatbox est en mode Popin
3 - la chatbox est en mode Plein écran

Gérer le champ de saisie de la chatbox

Le champ de saisie est l'espace où l'utilisateur écrit son message. Deux méthodes sont disponibles pour cette section :

Modifier son placeholder window.dyduCustomPlaceHolder('nouveau_placeholder');
Bloquer la saisie utilisateur window._dydu_lockTextField();

Fonctions spéciales pour la section de conversation de la chatbox

Déclencher une reformulation

Une conversation avec la chatbox est composée de bulles de réponse du bot et de questions envoyées par les utilisateurs. Dans la conversation, il est possible de déclencher une reformulation :

window.reword('nomConnaissance', {});

La fonction de reformulation permet d'envoyer une question au moteur de dialogue et d'afficher en même temps la chatbox s'il n'était pas visible sur la page.

Il est aussi possible de déclencher une reformulation sans afficher la bulle de question de la chatbox avec la fonction suivante :

window.reword('nomConnaissance', {hide:true});

Pour des questions de conformité aux critères RGAA, il est possible de contextualiser la description des boutons d'avis utilisateur dans le cas du window.reword. Pour cela, la fonction accessibilityContext permet d'ajouter un texte qui s'affichera lors du survol des boutons à la suite de "Aide Utile" et "Aide Inutile". Pour l'intégrer, utilisez la syntaxe suivante :

window.reword('nomConnaissance, {hide:true, accessibilityContext:"Texte à afficher"})

Si vous n'ajoutez pas d'option, seuls "Aide Utile" et "Aide Inutile" seront affichés au survol.

Ajouter une réponse au bot

window.dydu.chat.reply('votre réponse doit être saisie ici');

Déclencher des fonctionnalités de la chatbox

window.dydu.promptEmail.prompt('gdpr'); - déclenche la fonction d'export RGPD
window.dydu.promptEmail.prompt('exportConv');- déclenche l'export de conversation
window.dydu.ui.secondary(boolean, {}); - Ouvre/ferme le panneau lateral de la chatbox

Gestion des espaces de consultation et des langues

window.dydu.localization.get(); - Obtenir la langue actuelle de la chatbox
window.dydu.localization.set('en'); - Modifier la langue de la chatbox
window.dydu.space.get(); - Avoir l'espace de consultation utilisé par la chatbox
window.dydu.space.prompt(); - Proposer un changement d'espace de consultation
window.dydu.space.set('spaceName'); - Définir un nouvel espace de consultation

Gestion des évènements

Il est possible d'ajouter des actions qui réagissent à des évènements de la chatbox. Ci-dessous retrouvez la liste des évènements couvert et la façon de les utiliser : il faut, depuis canaux, activer les events en cochant la case events -> active : True. A partir de là vous avez acces aux méthodes listées soit directement dans votre custom JS comme sur l'image ci-dessous, soit via les methodes direct window.<nom de la méthode>.

voici la liste des évènements actuellement disponibles.

chatbox :
- loadChatbox
- onMinimize
- questionSent
- rewordDisplay
- insatisfactionClicked
gdpr:
- acceptGdpr
- getPersonalData
- deletePersonalData
- displayGdpr
onBoarding:
- onBoardingDisplay
- onBoardingCompleted
tab:
- contactDisplay
teaser:
- onClick
top:
- topDisplay
- topClicked

PrécédentChatbox V5 SuivantRelease Note

Dernière mise à jour il y a 10 jours

Cet article vous a-t-il été utile ?

Intégration

Intégrez votre chatbox à une page web

Après avoir créé un chatbot à partir de dyduBox ou depuis notre dépôt public vous pouvez l'intégrer sur votre site web.

Afin d'intégrer le chatbot sur votre site web, vous devrez :

Intégrer un script sur la page web où vous voulez que le chatbot soit affichée.
Ce script se trouve sur la page de publication de votre intégration sur canaux (exemple ci-dessus).
Jusqu'à la version edge_2024-11-26 , ce script se terminait en bundle.min.js.
à partir de la version edge_2024-12-10, il y'a un changement à apporter sur les URLs de vos sites web , car ce script se termine maintenant en loader.js. Cette modification a été apportée pour résoudre des problèmes de cache qui pouvaient se produire lors de la publication de nouvelles versions. Une rétrocompatibilité est assurée avec l'ancienne notation bundle.min.js mais il est fortement recommandé d'utiliser la nouvelle URL en loader.js.

Exemple de script d'intégration :

    <head>

    </head>
    <body>
    <script src="https://cdn.doyoudreamup.com/dydubox/configurations/xxxxxxxx/loader.js"></script>
    </body>

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

Définir le mode de qualification de la chatbox (optionnel)

Lorsque vous intégrez le script loader.js dans une page web, vous pouvez spécifier si les conversations générées sur cette page seront considérées comme des tests ou de production.

Les conversations de test seront enregistrées dans le BMS et affichées dans le menu Apprentissage - Conversations (avec les filtres "Tests seuls" ou "Avec tests"). Elles ne seront pas comptabilisées dans le module Statistiques.
Au contraire, les conversations de production seront enregistrées et affichées dans le menu Conversations ET seront comptabilisées dans le menu Statistiques.

Pour ce faire, vous pouvez ajouter une variable à la page HTML qui intègra votre chatbox : DYDU_QUALIFICATION_MODE.

Si la variable DYDU_QUALIFICATION_MODE = true, alors les conversations seront considérées comme des tests et ne seront pas comptabilisées dans le menu Statistiques.
Si DYDU_QUALIFICATION_MODE = false OU la variable n'est pas spécifiée, alors les conversations seront considérées comme production et seront comptabilisées dans le module Statistiques.

Exemple :

    <head>

    </head>
    <body>
    <script src="https://cdn.doyoudreamup.com/dydubox/configurations/xxxxxxxx/loader.js"></script>
    <script> DYDU_QUALIFICATION_MODE = true </script>
    </body>

Comment définir des variables personnalisées pour la chatbox

setRegisterContext

window.dydu.chat.setRegisterContext(name, value);

Avant d'appeler cette fonction, il est nécessaire d'attendre que le chatbox soit complètement chargée sur le site web.

dyduAfterLoad

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

Exemple :

<script>
    dyduAfterLoad = () => {
        window.dydu.ui.toggle(2)
    };
</script>

dyduChatboxReady

Si vous souhaitez appeler certaines de nos fonctions en lien avec la conversation, il vaut mieux utiliser cette fonction.

Par exemple, pour l'enregistrement de variables personnalisées:

<script>
      dyduChatboxReady = () => {
        window.dydu.chat.setDialogVariable("variable_custom", "valeur variable custom");
      }
</script>

setDialogVariable

window.dydu.chat.setDialogVariable(name, value);

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

Autres fonctions de la chatbox

Il est possible de déclencher différents comportements de la chatbox à l'aide des méthodes suivantes

Modifier le mode d'ouverture de la chatbox

Basculer le chatbot :

window.dydu.ui.toggle(integer)

Le paramètre integer peut avoir les valeurs suivantes

0 - la chatbox est masquée
1 - la chatbox est en mode Teaser
2 - la chatbox est en mode Popin
3 - la chatbox est en mode Plein écran

Gérer le champ de saisie de la chatbox

Le champ de saisie est l'espace où l'utilisateur écrit son message. Deux méthodes sont disponibles pour cette section :

Modifier son placeholder window.dyduCustomPlaceHolder('nouveau_placeholder');
Bloquer la saisie utilisateur window._dydu_lockTextField();

Fonctions spéciales pour la section de conversation de la chatbox

Déclencher une reformulation

Une conversation avec la chatbox est composée de bulles de réponse du bot et de questions envoyées par les utilisateurs. Dans la conversation, il est possible de déclencher une reformulation :

window.reword('nomConnaissance', {});

La fonction de reformulation permet d'envoyer une question au moteur de dialogue et d'afficher en même temps la chatbox s'il n'était pas visible sur la page.

Il est aussi possible de déclencher une reformulation sans afficher la bulle de question de la chatbox avec la fonction suivante :

window.reword('nomConnaissance', {hide:true});

window.reword('nomConnaissance, {hide:true, accessibilityContext:"Texte à afficher"})

Si vous n'ajoutez pas d'option, seuls "Aide Utile" et "Aide Inutile" seront affichés au survol.

Ajouter une réponse au bot

window.dydu.chat.reply('votre réponse doit être saisie ici');

Déclencher des fonctionnalités de la chatbox

window.dydu.promptEmail.prompt('gdpr'); - déclenche la fonction d'export RGPD
window.dydu.promptEmail.prompt('exportConv');- déclenche l'export de conversation
window.dydu.ui.secondary(boolean, {}); - Ouvre/ferme le panneau lateral de la chatbox

Gestion des espaces de consultation et des langues

window.dydu.localization.get(); - Obtenir la langue actuelle de la chatbox
window.dydu.localization.set('en'); - Modifier la langue de la chatbox
window.dydu.space.get(); - Avoir l'espace de consultation utilisé par la chatbox
window.dydu.space.prompt(); - Proposer un changement d'espace de consultation
window.dydu.space.set('spaceName'); - Définir un nouvel espace de consultation

Gestion des évènements

voici la liste des évènements actuellement disponibles.

chatbox :
- loadChatbox
- onMinimize
- questionSent
- rewordDisplay
- insatisfactionClicked
gdpr:
- acceptGdpr
- getPersonalData
- deletePersonalData
- displayGdpr
onBoarding:
- onBoardingDisplay
- onBoardingCompleted
tab:
- contactDisplay
teaser:
- onClick
top:
- topDisplay
- topClicked