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
Add an animation to the Messenger under "Bubble animation type"
Display or hide the badge (the red notification)
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. SECTION: FOOTER
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: