Aller au contenu principal

Mise en place et intégration

Intégration

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 :

  • importez le fichier script bundle.min.js sur la page web où vous voulez que le chatbot soit affiché
  • créer un div vide avec un className "dydu-root" sur le body de votre page
  • Exemple :
    <head>
<script src="<https://xxxxxxxx/bundle.min.js>"></script>
</head>
<body>
<div id="dydu-root"></div>
</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.

Comment définir des variables personnalisées pour le chatbot

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 : OS, navigateur, terminal 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. Pour configurer une variable de contexte sur le chatbot, 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 chatbot soit complètement chargé sur le site web.

dyduAfterLoad

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

Exemple complet :

<script>
window.dyduAfterLoad = () => {
dydu.chat.setRegisterContext("nom", "Jean")
};
</script>

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.

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

Autres fonctions du chatbot

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

Modifier le mode d'ouverture du chatbot

Changez le mode d'ouverture du chatbot:

window.dydu.ui.toggle(integer)

Le paramètre integer peut avoir les valeurs suivantes

  • 0 - le chatbot est masqué
  • 1 - le chatbot est en mode Teaser
  • 1 - le chatbot est en mode Popin
  • 3 - le chatbot est en mode Plein écran

Gérer le champ de saisie du chatbot

Le champ de saisie est l'espace où l'utilisateur écrit au bot. 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 du chatbot

Déclencher une reformulation

La conversation du chatbot 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 le chatbot s'il n'était pas visible sur la page.

Il est aussi possible de déclencher une reformulation sans afficher la bulle de question du chatbot 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 du chatbot

  • 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 du chatbot

Gestion des espaces de consultation et des langues

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