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 integer it on your website.

To integer the chatbot on your website you will need to :

import the script bundle.min.js on the web page that you want chatbot to be displayed
create an empty div with a className “dydu-root” on the body of your page
write the className of the div on the configuration.json file like on the example below

Example:

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

The script bundle.min.jswill then load all the necessary files for the proper functioning of the chatbot from the hosting server.

Define the qualification mode of the chatbot (optional)

When you integrate the bundle.min.js script to a web page, you can specify if the conversations generated on this page will be considered as test or production.

The test conversations will be saved in the BMS and shown in the Learning - Conversation menu (with the filters "Tests only" or "With tests"). They will not be counted as data in the Analytics module.
On the contrary, the production conversations will be saved and shown in the Conversation menu AND will be counted by the Analytics module.

To do so, you can add a variable to the HTML page that integrates your chatbot: DYDU_QUALIFICATION_MODE.

If the variable DYDU_QUALIFICATION_MODE = true, then the conversations will be considered as tests and not counted as data in the Analytics module.
If DYDU_QUALIFICATION_MODE = false OR the variable is not specified, then the conversations will be considered as production and will be counted in the Analytics 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 set customize variables for the chatbot

setRegisterContext

By default and to respect the privacy of users, the solution dydu collects very little information about the user: OS, browser, platform and URL.

In order to customize the knowledge base response or to display other information to Livechat operators, it is possible to add context variables to the discussion. This allows, for example, to read the name of the user or the product he is looking at. To set up a context variable on the chatbot you need to call the following function :

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

Before calling this function it is necessary to wait for the chatbot to fully load on the website.

dyduAfterLoad

The dyduAfterLoad function is automatically called at the end of the script loading process.

Please note that a loaded script does not necessarily mean the chatbox is ready to use. It might still be initializing when this function is called.

Example:

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

dyduChatboxReady

This function is called when the chatbox is ready to be used. The chatbox is considered ready when the visitor has been registered, the #welcome# knowledge has been received, the conversation history has been retrieved, and the top knowledge items have been received.

If you want to call any of our functions related to the conversation, it is better to use this function.

For example, to set custom variables:

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

setDialogVariable

This method is used to initialize a server-side variable (example: identified user initialized to false and modified in knowledge). This information is sent once. setDialogVariable works on the same principle as registerContext.

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

To ensure that these variables are taken into account by the application, just type the keyword "#contextvariables#" in the chatbot.

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 :

Edit the input field placeholder window.dyduCustomPlaceHolder('new_placeholder');
Lock the input field window._dydu_lockTextField();

Special functions for dialog section of the chatbot

Trigger a reword

The dialog of the chatbot is composed of answer bubbles from the bot and requests send by users. In the dialog section it is possible to trigger a reword :

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

The reword function allows you to send a question to the dialog engine and at the same time display the dialog box if it was not visible on the page.

It is also possible to trigger a reword and hide the request bubble of the chatbot with the following function :

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

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

PreviousChatbox V5

Last updated 1 month ago