FrenchEnglish

Setup and integration

Integration

Integrate your chatbot to a web page

After creating a chatbot from dyduBox or from our public Github repository, you can integrate it on your website.

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:

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:

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

Method
Decription
Parameters

setRegisterContext(name, value)

Registers a persistent context variable for the user's session.

name (string), value (string)

setDialogVariable(name, value)

Sets a dialog variable that will be sent with the next user interaction.

name (string), value (string)

handleRewordClicked(text, options)

Simulates the action of clicking a rephrase button (reword).

text (string), options (object)

clearInteractions()

Clears the currently displayed conversation history in the Chatbox.

None

reply(text)

Displays an unsolicited message or notification in the Chatbox without generating a server-side interaction.

text (string)

User interface (UI) control

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

They must start with window.dydu.ui

Method
Description
Parameters

lock(value)

Locks/unlocks the user input field.

value (boolean)

placeholder(value)

Modifies the help text displayed in the input field (placeholder).

value (string)

upload()

Displays the file upload button.

None

sidebar(open, { body, title })

Opens or closes the Chatbox sidebar and sets its content/title.

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

toggle(mode)

Changes the view state of the Chatbox (hidden, minimized, open, full view).

mode (number)

Bot, localization, and global context management

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

Method
Description
Parameters

dydu.localization.set(locale)

Resets the conversation and updates the main bot language, relaunching initial knowledge items.

locale (string)

dydu.localization.setUi(locale)

Updates only the language of the user interface labels.

locale (string)

dydu.localization.get()

Retrieves the current bot locale (server-side language).

None

dydu.setBotId(botUUID)

Changes the active bot ID (botUUID). Clears history and reloads the welcome knowledge for the new ID.

botUUID (string)

dydu.newdialog()

Completely resets the conversation, local history, and user context, then reloads initial knowledge items.

None

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

Method
Description
Parameters

dydu.space.get()

Retrieves the current knowledge space of the bot.

None

dydu.space.set(space,

{ quiet = true })

Sets the new knowledge space.

space (string), quiet (object)

dydu.space.prompt()

Triggers the display of a prompt to choose the knowledge space.

None

Specific / Utility Functions

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

Method
Description
Parameters

dydu.promptEmail.prompt(type)

Triggers the display of an input screen (prompt), for example, for email collection or other form.

type (string)

dydu.lorem.split()

Displays a split lorem ipsum (placeholder text) response.

None

dydu.lorem.standard()

Displays a standard lorem ipsum (placeholder text) response.

None

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

Here is the list of events covered by these functions.

  • chatbox :

    • loadChatbox

    • onMinimize

    • questionSent

    • rewordDisplay

    • insatisfactionClicked

  • gdpr:

    • acceptGdpr

    • getPersonalData

    • deletePersonalData

    • displayGdpr

  • onBoarding:

    • onBoardingDisplay

    • onBoardingCompleted

  • tab:

    • contactDisplay

  • teaser:

    • onClick

  • top:

    • topDisplay

    • topClicked

PreviousChatbox V5

Last updated

Was this helpful?