EnglishFrench

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 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 :

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 :

Fonctions de la chatbox

Gestion de la conversation et des variables

Ces fonctions permettent de manipuler le flux de conversation, l'historique et les données de contexte.

Elles doivent commencer par window.dydu.chat

Méthode
Description
Paramètres

setRegisterContext(name, value)

Enregistre une variable de contexte persistante pour la session de l'utilisateur.

name (string), value (string)

setDialogVariable(name, value)

Définit une variable de dialogue qui sera envoyée avec la prochaine interaction utilisateur.

name (string), value (string)

handleRewordClicked(text, options)

Simule l'action d'un clic sur un bouton de reformulation (reword).

text (string), options (object)

clearInteractions()

Efface l'historique de la conversation actuellement affiché dans la Chatbox.

Aucun

reply(text)

Affiche un message dans la Chatbox sans générer d'interaction côté serveur.

text (string)

Contrôle de l'interface utilisateur (UI)

Ces fonctions permettent de modifier l'apparence et l'état des éléments de l'interface.

Elles doivent commencer par window.dydu.ui

Méthode
Description
Paramètres

lock(value)

Verrouille/déverrouille le champ de saisie utilisateur.

value (boolean)

placeholder(value)

Modifie le texte d'aide affiché dans le champ de saisie (placeholder).

value (string)

upload()

Affiche le bouton de téléchargement de fichier à la prochaine interaction

Aucun

sidebar(open, { body, title })

Ouvre ou ferme la barre latérale de la Chatbox et définit son contenu/titre.

open (boolean), body (content), title (string)

toggle(mode)

Change l'état de la vue de la Chatbox (caché, minimisé, ouvert, plein écran).

mode (number)

Gestion du bot, de la localisation et du contexte global

Ces fonctions gèrent les paramètres fondamentaux de l'environnement (langue, espace, identifiant du bot).

Méthode
Description
Paramètres

dydu.localization.set(locale)

Réinitialise la conversation et met à jour la langue principale du bot, relançant les connaissances initiales.

locale (string)

dydu.localization.setUi(locale)

Met à jour uniquement la langue des libellés de l'interface utilisateur.

locale (string)

dydu.localization.get()

Récupère la langue actuelle du bot.

Aucun

dydu.setBotId(botUUID)

Change l'identifiant du bot actif (botUUID). Efface l'historique et recharge la connaissance d'accueil pour la nouvelle ID.

botUUID (string)

dydu.newdialog()

Réinitialise complètement la conversation, l'historique local et le contexte utilisateur, puis recharge les connaissances initiales.

Aucun

Gestion de l'espace de consultation

Ces fonctions sont dédiées à la manipulation et à la récupération de l'espace de consultation utilisé par le bot.

Elles doivent commencer par window.dydu.space

Méthode
Description
Paramètres

dydu.space.get()

Récupère l'espace de consultation actuel du bot.

Aucun

dydu.space.set(space,

{ quiet = true })

Définit le nouvel espace de consultation.

space (string), quiet (object)

dydu.space.prompt()

Déclenche l'affichage d'un prompt pour choisir l'espace de consultation.

Aucun

Fonctions Spécifiques / Utilitaires

Ces fonctions sont destinées à des usages précis, comme le débogage ou les prompts de formulaire.

Méthode
Description
Paramètres

dydu.promptEmail.prompt(type)

Déclenche l'affichage d'un écran de saisie (prompt) pour la collecte d'e-mail.

type (string)

dydu.lorem.split()

Affiche une réponse de type lorem ipsum (texte de remplissage) divisée.

Aucun

dydu.lorem.standard()

Affiche une réponse de type lorem ipsum (texte de remplissage) standard.

Aucun

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 V5SuivantRelease Note

Mis à jour

Ce contenu vous a-t-il été utile ?