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 Github vous pouvez l'intégrer sur votre site web.

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

ajouter le script bundle.min.js sur la page web où vous voulez que le chatbot soit affiché
créez un div vide avec un className "dydu-root" sur le body de votre page
écrivez le className du div sur le fichier configuration.json comme dans l'exemple ci-dessous

Exemple :

    <head>

    </head>
    <body>
    <div id="dydu-root"></div>
    <script src="<https://xxxxxxxx/bundle.min.js>"></script>
    </body>

Le script bundle.min.js chargera 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 bundle.min.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>
    <div id="dydu-root"></div>
    <script src="<https://xxxxxxxx/bundle.min.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.

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});

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

PrécédentChatbox V5 SuivantRelease Note

Dernière mise à jour il y a 5 jours