> For the complete documentation index, see [llms.txt](https://docs.dydu.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dydu.ai/developpeurs/chatbox-v5/mise-en-place-et-integration.md). # 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](https://github.com/Do-you-dream-up/CV5) 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.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 `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éthodeDescriptionParamè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éthodeDescriptionParamè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 interactionAucun
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 :
- 0 -> caché
- 1 -> minimisé
- 2 -> ouvert
- 3 -> 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éthodeDescriptionParamè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éthodeDescriptionParamè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éthodeDescriptionParamè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
### Initialisation de la Chatbox Ces fonctions sont dédiées au suivi du cycle de démarrage de la chatbox, permettant d'intercepter son chargement ou son activation afin de déclencher des actions spécifiques.
MéthodeDescription
dyduAfterLoad()Permet de détecter la fin du chargement de la chatbox sur la page web.
dyduChatboxReady()Indique le moment exact où la chatbox est pleinement opérationnelle et prête à communiquer avec l'utilisateur.
## **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.\.
voici la liste des évènements actuellement disponibles. * chatbox : * `loadChatbox` * `onMinimize` * `questionSent` * `rewordDisplay` * `insatisfactionClicked` * `rewordClicked` : Permet d'exécuter une action après que l'utilisateur a cliqué sur un bouton de reformulation (reword) au sein d'une connaissance. * `urlClicked` : Permet d'exécuter une action après que l'utilisateur a cliqué sur une URL au sein d'une connaissance. * gdpr: * `acceptGdpr` * `getPersonalData` * `deletePersonalData` * `displayGdpr` * onBoarding: * `onBoardingDisplay` * `onBoardingCompleted` * tab: * `contactDisplay` * teaser: * `onClick` * top: * `topDisplay` * `topClicked`