Since version 2.7, the customization of the appearance of your web chatbot has become much more complete. This article will explain all the parameters and their effects on design.

You will find this customization module in the “SETTINGS” section in the “Appearance” tab.

The interface is divided into 3 parts, from left to right: 

  • Sections and Subsections = Zones on which we can make modifications,
  • Parameters = Parameters corresponding to the zone in question,
  • Preview = Visualization of parameter changes.

1. SECTION: CHAT WINDOW

By default, you will be in the “Chat window” section which gathers the basic visual parameters of your chatbot. These parameters are sufficient to personalize the chatbot as a minimum.

The modifiable parameters are as follows:

  • Chatbot title & Description = Texts that appear in the header
  • the avatar image
  • Possibility to add personas (see the article on personas)
  • Theme color = This color will be used by default for most of the chatbot's graphic elements (background of the header, button text, user bubble, icons, etc.) if you do not modify them not in another section
  • Background color
  • Full screen mode = By activating this parameter, when you put your chatbot on a page of your site, the chatbot will fill the entire screen. This is called a LandBot (Landing Page + Chatbot).
  • If full screen mode is activated, instead of the background color, you can put an image (minimum size 1366x768 px)
  • Font = to choose from Google Fonts. A word of advice, to choose the font, take a look at https://fonts.google.com/ and write down its name.

WARNING
Even if your changes appear in the preview, it does not mean that they have been saved!

IMPORTANT
To save your changes, click on the green “PUBLISH” button.

The settings are saved when you have the following text:

IMPORTANT BIS
Some parameters are not visible in the Preview (like the Full screen). To see the real changes on your chatbot, launch a full visualization by clicking on the “TEST” button at the top right.

2. SECTION: LAUNCHER

To see the changes in the "Preview" section, at the top, you have the "Open or closed conversation" option which allows you to see the chatbot in "Launch" mode.

The modifiable parameters are as follows:

  • Open Chat icon = to replace the default icon
  • The text of the welcome message
  • The name of Call to action button

3. SECTION: COMMON SETTINGS

3.1 Sub-Section: Theme options

The modifiable parameters are as follows:

  • Avatar shape = Round (default), rounded corners and squares

  •   Image corners = Rounded (default), Slightly rounded, Round, and Square
  • The type of carousel navigation icon and Quick Response = Black (default) or white to choose according to your background color for better readability.

3.2 SubSection : Borders

These changes affect the border of the chat window.

The modifiable parameters are as follows:

  • Window corners: Slightly rounded (default), Rounded, Square
  • Window Borders = None (default), Thin, Thick
  • Borders color
  • Type of window shadows = Small (default), Medium, Large, Cartoon or None



The following sections allow you to modify in detail each of the 3 parts that make up the chat window.

4. SECTION : HEADER

4.1 Sub-Section : Title
4.2 Sub-Section : Description

The first line of text is the title of the chatbot, the second is the description.

The modifiable parameters are the same for the two subsections:

  • Text color
  • Text size = Small, Medium (default) or Large
  • Text weight = Normal (default), Thin and Bold
  • Case = Lowercase (default) or all in Uppercase

5. SECTION: CHAT AREA

5.1 Sub-Section : Common settings

Here you can change the appearance of speech bubbles in general.

The modifiable parameters are as follows:

  • Bubble corners = Rounded (default), Slightly rounded, Round and Square
  • Whether or not to display the bubble arrow = Display (default) or Hide

5.2 Sub-Section : Bot Bubbles

5.3 Sous-Section : User Bubbles

Here we will be able to customize the speech bubbles independently of one another.

The modifiable parameters are the same for the two subsections:

  • Text color
  • Display of the bubble background = Show (default) or Hide 
  • Bubble background color

5.4 Sub-Section : Buttons

By default the chatbot buttons are: text in the theme color, white background, with round corners and no outline.
 

And when you hover over it with the mouse, the background changes using the theme color in transparency.

This section allows you to replace this default design.

Exemple 1 : 

Exemple 2 : 

Les paramètres modifiables sont les suivants :

  • Coins du bouton = Ronds (par défaut), Léger arrondis ou Carrés
  • Taille du texte = Petite, Moyenne (par défaut) ou Grande
  • Taille du contour = Fins (par défaut), Épais et Aucun
  • Couleurs du texte, du fond et du contour du bouton
  • Couleurs du texte, du fond et du contour du bouton cliqué

5.5 Sous-Section : Carrousel

Cette section permet de modifier l’aspect des différents composants d’un carrousel.

Navigation has 3 states:

  • By default
  • Active = Current carousel item
  • Clicked = when you move the mouse over an icon

The modifiable parameters are as follows:

  • Carousel corners = Rounded (default), Slightly rounded, Round or Square
  • Visible or invisible background
  • Background color
  • Border size = Thin (default), Thick and None
  • Border color
  • Title Size = Small, Medium (default) or Large
  • Title Color
  • Description Size = Small, Medium (default) or Large
  • Description Color
  • The colors of the 3 navigation states

6.1 Sub-Section: Entry field

The modifiable parameters are as follows:

  • Corners of the input bubble = Rounded (default), Slightly rounded, Round or Square
  • Bubble arrow visible or not
  • Border size = Thin (default), Thick and None
  • Border color
  • Input text color
  • Color of the send message icon (also applies to the send image icon)
  • Bubble background visible or not
  • Bubble background color

6.2 Sub-Section: Menu icon

The modifiable parameters are as follows:

  • Icon corners = Rounded (default), Slightly rounded, Round or Square
  • Icon color
  • Icon background color

6.3 Sub-Section: Background

The only editable parameter is the background color of the conversation footer.




If you like to go further and learn about all the options available for your website chatbot,  here are some articles of interest:

Did this answer your question?