> For the complete documentation index, see [llms.txt](https://docs-en.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-en.dydu.ai/developers/chatbox-v5/setup-and-integration.md).

# Setup and integration

## Integration

### Integrate your chatbot to a web page

After creating a chatbot from dyduBox or from our public [Github repository](https://github.com/Do-you-dream-up/CV5), you can integrate it on your website.

<figure><img src="/files/X6libUWEYzKfKEIkP1pk" alt=""><figcaption></figcaption></figure>

To integrate the chatbot into your website, you will need to:

* Include a script on the web page where you want the chatbot to appear.
* This script is available on the **"Channels"** publishing page of your integration (see example above).
* Up to version `edge_2024-11-26`, this script ended with `bundle.min.js`.
* Starting from version `edge_2024-12-10`, a change was made: the script now ends with `loader.js`.

Example:

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

```

The `loader.js` script will load all necessary files for the chatbox to function properly from the hosting server.

### Define the qualification mode of the chatbot (optional)

When integrating the `loader.js` script into a web page, you can specify whether conversations generated on this page should be considered **test** or **production**.

* **Test conversations** will be saved in the BMS and displayed in the **Learning > Conversations** menu (using the filters "Tests only" or "With tests"). They will **not** be included in the **Statistics** module.
* **Production conversations**, on the other hand, will be saved and displayed in the **Conversations** menu **and** will be counted in the **Statistics** module.

To configure this, you can add a variable to the HTML page where your chatbox is embedded: `DYDU_QUALIFICATION_MODE`.

* If `DYDU_QUALIFICATION_MODE = true`, then conversations will be treated as **test** and **not** counted in the **Statistics** module.
* If `DYDU_QUALIFICATION_MODE = false` **or** if the variable is **not defined**, then conversations will be treated as **production** and will be **counted** in the **Statistics** module.

Example:

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

```

## Chatbox functions

### Conversation and variable management

These functions allow manipulation of the conversation flow, history, and context data.

They must start with `window.dydu.chat`

<table><thead><tr><th width="305">Method</th><th width="290">Decription</th><th>Parameters</th></tr></thead><tbody><tr><td><code>setRegisterContext(name, value)</code></td><td>Registers a persistent context variable for the user's session.</td><td><code>name</code> (string), <code>value</code> (string)</td></tr><tr><td><code>setDialogVariable(name, value)</code></td><td>Sets a dialog variable that will be sent with the next user interaction.</td><td><code>name</code> (string), <code>value</code> (string)</td></tr><tr><td><code>handleRewordClicked(text, options)</code></td><td>Simulates the action of clicking a rephrase button (<em>reword</em>).</td><td><code>text</code> (string), <code>options</code> (object)</td></tr><tr><td><code>clearInteractions()</code></td><td>Clears the currently displayed conversation history in the Chatbox.</td><td>None</td></tr><tr><td><code>reply(text)</code></td><td>Displays an unsolicited message or notification in the Chatbox without generating a server-side interaction.</td><td><code>text</code> (string)</td></tr></tbody></table>

### User interface (UI) control

These functions allow modification of the appearance and state of Chatbox interface elements.

They must start with `window.dydu.ui`

<table><thead><tr><th width="305">Method</th><th width="290">Description</th><th>Parameters</th></tr></thead><tbody><tr><td><code>lock(value)</code></td><td>Locks/unlocks the user input field.</td><td><code>value</code> (boolean)</td></tr><tr><td><code>placeholder(value)</code></td><td>Modifies the help text displayed in the input field (<em>placeholder</em>).</td><td><code>value</code> (string)</td></tr><tr><td><code>upload()</code></td><td>Displays the file upload button.</td><td>None</td></tr><tr><td><code>sidebar(open, { body, title })</code></td><td>Opens or closes the Chatbox sidebar and sets its content/title.</td><td><code>open</code> (boolean), <code>body</code> (content), <code>title</code> (string)</td></tr><tr><td><code>toggle(mode)</code></td><td>Changes the view state of the Chatbox (hidden, minimized, open, full view).</td><td><code>mode</code> (number)</td></tr></tbody></table>

### Bot, localization, and global context management

These functions manage the fundamental settings of the environment (language, knowledge space, bot ID).

<table><thead><tr><th width="305">Method</th><th width="290">Description</th><th>Parameters</th></tr></thead><tbody><tr><td><code>dydu.localization.set(locale)</code></td><td>Resets the conversation and updates the main bot language, relaunching initial knowledge items.</td><td><code>locale</code> (string)</td></tr><tr><td><code>dydu.localization.setUi(locale)</code></td><td>Updates only the language of the user interface labels.</td><td><code>locale</code> (string)</td></tr><tr><td><code>dydu.localization.get()</code></td><td>Retrieves the current bot <em>locale</em> (server-side language).</td><td>None</td></tr><tr><td><code>dydu.setBotId(botUUID)</code></td><td>Changes the active bot ID (<code>botUUID</code>). Clears history and reloads the welcome knowledge for the new ID.</td><td><code>botUUID</code> (string)</td></tr><tr><td><code>dydu.newdialog()</code></td><td>Completely resets the conversation, local history, and user context, then reloads initial knowledge items.</td><td>None</td></tr></tbody></table>

### Consultation Space Management

These functions are dedicated to manipulating and retrieving the consultation space used by the bot.

They must start with `window.dydu.sapce`

<table><thead><tr><th width="305">Method</th><th width="290">Description</th><th>Parameters</th></tr></thead><tbody><tr><td><code>dydu.space.get()</code></td><td>Retrieves the current knowledge space of the bot.</td><td>None</td></tr><tr><td><p><code>dydu.space.set(space,</code></p><p><code>{ quiet = true })</code></p></td><td>Sets the new knowledge space.</td><td><code>space</code> (string), <code>quiet</code> (object)</td></tr><tr><td><code>dydu.space.prompt()</code></td><td>Triggers the display of a prompt to choose the knowledge space.</td><td>None</td></tr></tbody></table>

### Specific / Utility Functions

These functions are intended for specific uses, such as form prompts or debugging.

<table><thead><tr><th width="305">Method</th><th width="290">Description</th><th>Parameters</th></tr></thead><tbody><tr><td><code>dydu.promptEmail.prompt(type)</code></td><td>Triggers the display of an input screen (prompt), for example, for email collection or other form.</td><td><code>type</code> (string)</td></tr><tr><td><code>dydu.lorem.split()</code></td><td>Displays a split <em>lorem ipsum</em> (placeholder text) response.</td><td>None</td></tr><tr><td><code>dydu.lorem.standard()</code></td><td>Displays a standard <em>lorem ipsum</em> (placeholder text) response.</td><td>None</td></tr></tbody></table>

## Event Management

it's possible to add actions that react to chatbox events. Below is a list of the events covered and how to use them:

From channels, you must enable events by checking the events -> active: True box. From there, you can access the listed methods either directly in your custom JS, as shown in the image below, or via the direct window.\<method>.

<figure><img src="/files/i6UpEYndpXd1vCGuVBCw" alt=""><figcaption></figcaption></figure>

&#x20;

<figure><img src="/files/AHzk5aEnwpF0it3NLRnQ" alt=""><figcaption></figcaption></figure>

Here is the list of events covered by these functions.

* chatbox :&#x20;
  * `loadChatbox`
  * `onMinimize`
  * `questionSent`
  * `rewordDisplay`
  * `insatisfactionClicked`
  * `rewordClicked`: Allows an action to be executed after the user clicks a reword button within a knowledge entry.
  * `urlClicked`: Allows an action to be executed after the user clicks a URL within a knowledge entry.
* gdpr:
  * `acceptGdpr`
  * `getPersonalData`
  * `deletePersonalData`
  * `displayGdpr`
* onBoarding:
  * `onBoardingDisplay`
  * `onBoardingCompleted`
* tab:
  * `contactDisplay`
* teaser:
  * `onClick`
* top:
  * `topDisplay`
  * `topClicked`
