Skip to main content

Customisation

Introduction

This document explains how the dydu chatbox works with a description of its components. Here’s a link to a test chatbox: https://cdn.doyoudreamup.com/development/prod/index.html

Elements of a dydu chatbox

General informations

For a new chatbox setup, 2 parameters are important and can be applied to multiple elements:

  • the text displayed on the chatbox
  • the primary color of the chatbox

Customize the texts & translations

Text modification is possible. You need to ask the IT team for the last version of the file that contains all the textual resources. You will need to:

  • download the file
  • open it, make your modifications and save the changes
  • send it back to the IT team for integration

The chatbox is translated in French and English.

Customize the primary color

On the chatbox the primary color (blue on our example) will be applied to the following elements.

  • Header
  • Buttons
  • User questions bubble with alpha 0.2 (transparency)
  • Text links
  • Text teaser

Opening the chatbox

When the user arrives on the page where a dydu chatbox is installed there are 3 possible options of display:

  • Teaser mode: The chatbox is closed, a logo button is displayed so the user can click on it and open the chatbox.

  • Popin mode: The chatbox is already opened and ready to be used by the user.

  • Full screen mode: The chatbox is already opened full width all over the page.

Teaser

When the chatbox is closed a button composed of an image and a help text is displayed allowing the user to click on it to open the chatbox. This is the teaser.

The teaser of the chatbox can be customized.

  • You can choose to add or not the help text (example: Need help?).
  • You can customize the image. We recommend using .svg files for the teaser image of the chatbox.

GDPR disclaimer

When the user arrives for the first time on the chatbox a GDPR disclaimer is displayed.
The user needs to agree to this disclaimer to have access to the chatbox.

In this page you can customize :

  • the text of the disclaimer
  • the text of the buttons
  • for the buttons, the primary color will be applied

Onboarding

Onboarding is an important step in the user journey on your chatbox. It’s the first approach the user will have with your bot. You can put here tips and advice for a better use of the chatbox.

For the onboarding you can :

  • activate or deactivate the onboarding module
  • customize the images
  • customize the texts: titles and descriptions

Top asked questions - Top knowledge

You can choose to enable or disable the display of top knowledge (manual or dynamic) on the chatbox.

For the top knowledge you can:

  • set 3 top knowledge to be displayed in your chatbox
  • customize the introducing text via the text file

The header is the top bar of your chatbox. For the header you can:

  • customize the background color of the header (primary color)
  • customize the avatar image
  • enable or disable the title of the header: in the example above Need help?. If you need to change the displayed text, please refer to the text file
  • enable or disable action buttons
    • close button
      • when clicking on this button the chatbox is closed and does not appear anymore on the website. To display it again you must refresh the page
      • before the chatbox is closed a modal with a confirmation message is displayed. The text of this modal can be customized on the text file
    • minimize button => the chatbox goes into teaser mode
    • expand button => the chatbox goes to full screen mode
    • more button => this button will display more options like:
      • GDPR => possibility to export or get data of a conversation for the user.
      • Send conversation by email
      • Print conversation
      • in the case where the bot has several consultation spaces with manual switch, the option will appear here ( all the texts for those options can be customized on the text file

Consultation spaces

If the bot has multiple consultation spaces, please precise to the IT Team if the switch will be manual or dynamic

  • in case of manual switch, check the explanation above
  • in case of dynamic switch : please communicate to the IT Team which parameter the customer wishes to use in order to switch, so a feasibility study can be carried out by the IT team. Currently, this dynamic switch can be performed:
    • according to the url or
    • depending on the presence of a cookie (note the value of the cookie must take the value of the consultation space defined in the BMS or vice versa).

Custom avatar

On the chatbox you can choose to customize your avatar in the header depending on the bot level of understanding. (available only for the header avatar and not for the main avatar displayed in the teaser and for the bot’s response).
The avatar can change following 4 different states. You can customize each one of those steps:

  1. Default
  2. Reword
  3. Misunderstood sentence
  4. Understood match

Note: you can not set up an avatar only for one state, if you choose to activate this component you should send an avatar for the 4 steps. Free to you to choose the same avatar for 1 or more states.

You can set up a banner with a custom message for your chatbox. The banner is displayed when the user opens the chatbox for the first time.

On this part you can:

  • customize the displayed text from the text file
  • choose to display the 2 buttons or not

Role of the two buttons

  • Thanks button => it allows to dismiss the banner
  • More information button => it opens an URL on a new page. The URL can be customized on the text file

Dialog

When the chatbox is opened and there is a conversation with the user we can see:

  • The response of the bot with the following elements

    • (1) avatar of the response => customizable image, can be displayed or not. This image is not the same as the bot avatar.
    • (2) the response => the color can be customized
    • (5) the feedback module
  • The request of the bot with the following elements

    • (3) the request => by default the background color will have the primary color with an opacity of 10%
    • (4) the avatar of the request => can be displayed or not

Feedbacks

After a bot answer, you can ask the user to evaluate the quality of the answer.
You can activate and deactivate the feedback feature for each knowledge in the BMS.
If active, this feature allows you to display below the knowledge 2 feedback buttons: one for negative and one for positive user feedback.

The 2 buttons are presented with a thumb up and the other one with a thumb down. You can customize the colors.

The Ask choice feature can be displayed when the user clicks on the negative feedback button: it sets up 3 choices by default (see below).

You can customize those texts however they are not synchronized with the labels in the back office.
The reasons suggested are displayed like any other bot response bubble.
The color of the text can be customized.

Also the Ask comment property enables or disables a comment field when the user clicks the negative feedback button. When the negative feedback button is selected, then a text field is displayed so the user can submit a personal comment.

The Submit / Cancel buttons are displayed in the primary color set in the parameters. You can customize the text of those buttons.

A message thanks the user for his feedback:

You can customize the message via the text file.

Loader

You can choose to display or not an animated loader before each bot response.

You can set values for the average response time.
For example, the loader takes between 400 and 600 ms on average, but you can change these values so that it is longer or shorter.

Welcome knowledge

If you need to display a welcome message at the beginning of a conversation, you need to create a knowledge on the knowledge base of your bot called #welcome#.

Otherwise an error message will be displayed as the chatbot won't be able to find the welcome message to display.

The footer is the component displayed at the bottom of the chatbox. You can set up several features that will be displayed in this section:

Language

If you choose to have more than one language for the chatbox, a little flag will be displayed on the left of the footer.
By clicking on the flag a dropdown menu will appear. All the languages that can be used by the bot will be displayed.
If you choose to have more than one language, you have to specify which is the default language of your chatbox.

The default language of the chatbox can also be displayed depending on the language of the website of the chatbox.

The switch of language can be:

  • manual => with the drop down menu in the footer
  • dynamic => a feasibility study will be done by the IT team in this case
    • the language of the chatbox can be identical to the language of the customer's website
    • the language of the chatbox can be set up according to the advanced parameters of the customer.

Input

The input field is where the user will write his question for the bot. You can customize the text that is displayed as a placeholder in the input field (for example: Type here...).

The input field in the footer of the chatbox can display or not a counter of the remaining characters.

  • You can customize the color of this counter.
  • You can also decide the maximum number of characters you allow per question/intention. In the example below, the maximum number of characters allowed is 100:

Automatic suggestions

You can activate or deactivate the auto-suggestion feature: when a user starts to type his intention, some knowledge can be suggested.

The number of those knowledge suggestions is by default set to 3 in your chatbox.

Some of the bot responses can be displayed with a sidebar to add more content. The sidebar panel can be hidden or displayed

Here are some examples of a sidebar panel:

You can configure the side panel of your chatbox this way:

  • You can enable or disable the automatic opening of the panel each time it is set up (this behavior will be the same whether on computer, mobile or on the full screen chatbot ).
  • You can choose the opening direction of the panel: left, right, top or bottom of the chatbox.
  • You can set the permanence of this side panel. The sidebar can be displayed only once and disappear when the page is refreshed, or it can be accessible all the time and disappear only after the user's action.

For example the close button below hides the side panel:

Note: from v5.6.22, when the chatbox is in full screen mode in web or mobile, the side panel does not open automatically. The user can open it by clicking on a More action button. The manual opening of the side panel on a full screen chatbox can be deactivated so that it can open automatically. Beware, this case of figure can surprise the end user.

Tabs

You can enable or disable another tab of contact on your chatbox. For the tabs you can choose to display

  • only icons
  • text & icons
  • only texts

Test keywords CV5

Here are some keywords to help you test your chatbox:

  • #meta# -> gives chatbox informations
  • #host# -> gives the server name
  • #reset# -> resets the dialog in the chatbox
  • #secondary# -> opens the sidebar
  • #split# -> displays some split content
  • #contextVariables# -> displays context variables if created before
  • #botid# -> gives bot id
  • #lorem# -> shows how text can be displayed in the chatbox