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:

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

How to define custom variables for the chatbox

setRegisterContext

By default, and in order to respect user privacy, the Dydu solution collects very little user information: operating system, browser, device type, and current URL.

To personalize the chatbox responses or display additional information to Livechat operators, you can add context variables to the conversation. This can, for instance, allow the bot to know the user's name or the product they are viewing.

To set a context variable on the chatbox, call the following function:

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

⚠️ Make sure the chatbox is fully loaded on the website before calling this function.

Each time a user question is sent to the Dydu engine, the request will include the register context data. These are considered constants and cannot be modified in the knowledge base.

dyduAfterLoad

The dyduAfterLoad function is automatically triggered when the script has finished loading.

A loaded script does not necessarily mean that the chatbox is ready to be used. It may still be initializing when this function is called.

Example:

<script>
    dyduAfterLoad = () => {
        window.dydu.ui.toggle(2);
    };
</script>

dyduChatboxReady

This function is triggered when the chatbox is fully ready to use. This means the visitor is registered, the #welcome# knowledge has been received, the conversation history is loaded, and the top knowledge items are retrieved.

If you want to call chat-related functions, it is recommended to use this function.

Example for setting custom variables:

<script>
      dyduChatboxReady = () => {
        window.dydu.chat.setDialogVariable("custom_variable", "custom variable value");
      };
</script>

setDialogVariable

This method is used to initialize a variable server-side (e.g., user identified = false at start, and modified via knowledge later). The information is sent only once. setDialogVariable works similarly to setRegisterContext.

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

To verify that these variables are taken into account, simply type the keyword #contextvariables# in the chatbox.

Other functions of the chatbot

It is possible to trigger different chatbot behaviors with the following methods

Edit the chatbot opening mode

Toggle the chatbot :

window.dydu.ui.toggle(integer);

The integer can have the following values

0 - the chatbot is hidden
1 - the chatbot is in Teaser mode
2 - the chatbot is in Popin mode
3 - the chatbot is in Full Screen mode

Manage the input field of the chatbot

The input field is the space where the user writes to the bot. Two methods are available for the input :

Change placeholder text:

window.dyduCustomPlaceHolder('new_placeholder');

Lock user input:

window._dydu_lockTextField();

Special functions for dialog section of the chatbot

Trigger a reword

Each conversation is composed of bot replies and user questions. You can trigger a reword using:

window.reword('knowledgeName', {});

This will send a question to the engine and display the chatbox if it's hidden.

To trigger a reword without showing the chat bubble:

window.reword('knowledgeName', {hide:true});

For compliance with RGAA criteria, it is possible to contextualize the description of user feedback buttons when using window.reword. The accessibilityContext function allows you to add a text that will be displayed on hover, following "Helpful" and "Not Helpful". To integrate it, use the following syntax:

window.reword('knowledgeName', { hide: true, accessibilityContext: "Text to display" })

If no option is added, only "Helpful" and "Not Helpful" will be displayed on hover.

Add a reply to the bot

window.dydu.chat.reply('you can put any string here as a reply');

Trigger chatbot features

window.dydu.promptEmail.prompt('gdpr'); - triggers the GDPR export feature
window.dydu.promptEmail.prompt('exportConv');- triggers the export dialog feature
window.dydu.ui.secondary(boolean, {}); - Open/Close the chatbot’s sidebar

Language and consultation space management

window.dydu.localization.get(); - Get the current language of the chatbot
window.dydu.localization.set('en'); - Change the language of the chatbot
window.dydu.space.get(); - Get the current consultation space
window.dydu.space.prompt(); - Prompt a change of consultation space
window.dydu.space.set('spaceName'); - Set a new consultation space

Custom javascript 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 23 days ago

Was this helpful?