Css editor

For advanced profiles, it is possible to customize the CSS style of the chatbox directly from this section. Through CSS edit, it is possible to review more details of the visual appearance of the chatbot.

Customize icons

As a Dydubox user, you can personalize the default icons used in the web chatbot by using a CSS override in the CSS editor.

You have 2 options:

• change a default icon’s color.

• use a custom icon (that is on the image format hosted on a website).

1. Change a default icon’s color

Steps to follow:

1. Open your existing web chatbot configuration in Dydubox or create a new one.

2. Open the CSS editor of your web chatbot.

3. Paste the following lines of code in your editor:

    .NameOfTheIcon {
    color: HexColorCodeOrColorNameinEnglish;
    }

• "NameOfTheIcon": here, specify the name of the icon you want to personalize. To get the name, use the inspector tool on your web browser. The name always starts with “icon-chatbox_”.

• "color": your can either specify the HEX code or the color name in English (red, blue…).

Example:

5. Click on “apply” to apply changes. You should be able to immediately see the changes in the preview bot.

6. Publish your changes and voilà.

2. Use a custom icon

Steps to follow:

1. Open your existing web chatbot configuration in Dydubox or create a new one.

2. Open the CSS editor of your web chatbot.

3. Paste the following lines of code in the editor:

.NameOfTheIcon {
 background-position: center center;
 background-size: contain;
 background-image: url(UrloftheCustomIcon);
 width: 24px;
}
.NameOfTheIcon::before{
 display:none;
}

• “NameOfTheIcon”: specify the name of the icon you want to personalize. To get the name, use the inspector tool on your web browser. The name always starts with “icon-chatbox_”

• "background-image: url(UrloftheCustomIcon)": paste in the parenthesis the link of your custom icon under an image format. (we recommend the png format for websites.)

Example

4. Click on “apply” to apply changes. You should be able to immediately see the changes on the preview zone.

5. Publish your changes and voilà.

Display a contact tab

If you need to display less then the three sections for the contact tab: