{"id":2242,"date":"2022-11-08T14:29:40","date_gmt":"2022-11-08T13:29:40","guid":{"rendered":"https:\/\/botnation.ai\/how-to-customize-my-web-chatbot\/"},"modified":"2026-01-02T16:29:59","modified_gmt":"2026-01-02T15:29:59","slug":"how-to-customize-my-web-chatbot","status":"publish","type":"support","link":"https:\/\/botnation.ai\/en\/support\/how-to-customize-my-web-chatbot\/","title":{"rendered":"How to customize my web chatbot?"},"content":{"rendered":"<p>How to change the appearance of my web bot<\/p>\n\n\n\n\n\n<p>Since version 2.7, the customization of the appearance of its web chatbot has become much more complete. This article will explain all the parameters and their effects on the design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/web_bots-1024x477.png.webp\" alt=\"\" class=\"wp-image-6241\"><\/figure>\n\n\n\n<p>You will find this customization module in the \u201c<strong>SETTINGS<\/strong>\u201d tab \u201c<strong>Appearance<\/strong>\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-107.png.webp\" alt=\"\" class=\"wp-image-2244\" style=\"width:695px;height:172px\"><\/figure>\n\n\n\n<p><strong>The interface is divided into 3 parts, from left to right:  <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sections and Sub-sections = Areas where changes can be made,<\/li>\n\n\n\n<li>Parameters = Parameters corresponding to the area in question,<\/li>\n\n\n\n<li>Preview = Visualization of parameter changes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-108-1024x582.png.webp\" alt=\"\" class=\"wp-image-2246\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-section--fentre-de-discussion\">1. SECTION : CHAT WINDOW<\/h2>\n\n\n\n<p>By default, you will be in the \u201cChat Window\u201d section which gathers the basic visual settings of <a href=\"https:\/\/botnation.ai\/en\/add-an-image-to-your-chatbot\/\">your chatbot<\/a>. These parameters are enough to personalize the chatbot at least.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-109-1024x635.png.webp\" alt=\"\" class=\"wp-image-2248\"><\/figure>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Chatbot title &amp; Description = Texts that appear in the Header<\/li>\n\n\n\n<li>the image of the Avatar<\/li>\n\n\n\n<li>Possibility to add personas<a href=\"https:\/\/botnation.ai\/fr\/support\/comment-ajouter-un-persona-a-mon-chatbot-web\">(see the article on personas<\/a>)<\/li>\n\n\n\n<li>Theme color = This is the color that will be used by default for most of the chatbot\u2019s graphical elements (header background, button text, user bubble, icons, etc.) if you don\u2019t change them in another section<\/li>\n\n\n\n<li>Background color<\/li>\n\n\n\n<li>Full screen mode = By activating this setting, when you put your chatbot on a page of your site, the chatbot will fill the whole screen. This is called a LandBot (Landing Page + Chatbot).<\/li>\n\n\n\n<li>If the Full Screen Mode is activated, instead of the background color, you can put an image (minimum 1366\u00d7768 px)<\/li>\n\n\n\n<li>Font = choose from Google Fonts. A tip, to choose the font, go to <a href=\"https:\/\/fonts.google.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/fonts.google.com\/<\/a> and note its name.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>ATTENTION<\/strong><br>Even if your changes appear in the preview, it doesn\u2019t mean that they have been saved!<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>IMPORTANT<\/strong><br>To save your changes, click on the green \u201c<strong>PUBLISH<\/strong>\u201d button.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-110.png.webp\" alt=\"\" class=\"wp-image-2251\"><\/figure>\n\n\n\n<p><em>The settings are saved when you have the following text:<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-111.png.webp\" alt=\"\" class=\"wp-image-2253\"><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>IMPORTANT BIS<\/strong><br>Some settings are not visible in the Preview (like Full Screen). To see the real changes on your chatbot, run a full visualization by clicking on the \u201c<strong>TEST<\/strong>\u201d button at the very top right.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-section--fentre-de-lancement\">2. SECTION : LAUNCHER<\/h2>\n\n\n\n<p>To see the changes in the \u201cPreview\u201d section, at the top, you have the option \u201cOpen or closed conversation\u201d which allows you to see the chatbot in \u201cLauncher\u201d mode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-112.png.webp\" alt=\"\" class=\"wp-image-2255\"><\/figure>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bubble Icon = to replace the default Botnation icon<\/li>\n\n\n\n<li>Welcome message<\/li>\n\n\n\n<li>Name of the button<\/li>\n\n\n\n<li>Add a bubble animation in \u201cBubble animation type\u201d.<\/li>\n\n\n\n<li>Show or hide the badge (the red notification \u201c1\u201d)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-section--gnral\">3. SECTION : GENERAL<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"31-sous-section--options-du-thme\">3.1 Subsection: Theme Options<\/h4>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avatar shape = Round (default), rounded corners and square<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-113.png.webp\" alt=\"\" class=\"wp-image-2257\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>  Image corners = Rounded (default), Slightly rounded, Round and Square<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-114.png.webp\" alt=\"\" class=\"wp-image-2259\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The type of navigation icon in the Carousels and Quick Answers = Black (default) or white to be chosen according to your background color for a better readability<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-115.png.webp\" alt=\"\" class=\"wp-image-2261\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"32-sous-section--bordures\">3.2 Subsection: Borders<\/h4>\n\n\n\n<p>These changes concern the border of the chat window.<\/p>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Window corners = Slightly rounded (default), Rounded and Square<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-116.png.webp\" alt=\"\" class=\"wp-image-2263\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Window borders = None (default) , Thin and Thick<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-117.png.webp\" alt=\"\" class=\"wp-image-2265\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The color of the contours<\/li>\n\n\n\n<li>The type of shadows in the window = Small (default), Medium, Large, Cartoon and None<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-118.png.webp\" alt=\"\" class=\"wp-image-2267\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-119.png.webp\" alt=\"\" class=\"wp-image-2269\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-section--en-tte\">4. SECTION : HEADER<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"41-sous-section--intitul42-sous-section--description\">4.1 Subsection: Heading<br>4.2 Subsection: Description<\/h4>\n\n\n\n<p>The first line of text is the title of the chatbot, the second is the description.<br><br><strong>The modifiable parameters are the same for both subsections:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text color<\/li>\n\n\n\n<li>Text size = Small, Medium (default) or Large<\/li>\n\n\n\n<li>Text weight = Normal (default), Fine and Bold<\/li>\n\n\n\n<li>Text format = Lower case (default) or all caps<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-section--zone-de-dialogue\">5. SECTION : CHAT AREA<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"51-sous-section--gnral\">5.1 Subsection: General<\/h4>\n\n\n\n<p>Here you can change the appearance of the chat bubbles in general.<br><br><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bubble corners = Rounded (default), Slightly rounded, Round and Square<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-120-1024x137.png.webp\" alt=\"\" class=\"wp-image-2271\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Whether or not to show the bubble arrow = Show (default) or Hide  <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-121.png.webp\" alt=\"\" class=\"wp-image-2273\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"52-sous-section--bulles-du-bot53-sous-section--bulles-de-lutilisateur\">5.2 Subsection: Bot Bubbles<br>5.3 Subsection: User Bubbles<\/h4>\n\n\n\n<p>Here we can customize the dialogue bubbles independently of each other.<br><br><strong>The modifiable parameters are the same for both subsections:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text color<\/li>\n\n\n\n<li>Bubble background display = Visible (default) or Invisible<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-122.png.webp\" alt=\"\" class=\"wp-image-2275\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color of the bubble background<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"54-sous-section--boutons\">5.4 Subsection: Buttons<\/h4>\n\n\n\n<p>By default the chatbot buttons are: text in the theme color, white background, with round corners and no outline.<br> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/Butt_default.png.webp\" alt=\"\" class=\"wp-image-6279\"><\/figure>\n\n\n\n<p>And when you move the mouse over it, the background changes using the theme color in transparency.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/Butt_default_hover.png.webp\" alt=\"\" class=\"wp-image-6281\"><\/figure>\n\n\n\n<p>This section allows you to override this default design.<\/p>\n\n\n\n<p><strong>Example 1:  <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/Butt_sample.png.webp\" alt=\"\" class=\"wp-image-6283\"><\/figure>\n\n\n\n<p><strong>Example 2:  <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/Butt_sample_bis.png.webp\" alt=\"\" class=\"wp-image-6285\"><\/figure>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Button corners = Round (default), Slightly rounded or Square<\/li>\n\n\n\n<li>Text size = Small, Medium (default) or Large<\/li>\n\n\n\n<li>Outline size = Thin (default), Thick and None<\/li>\n\n\n\n<li>Text, background and button outline colors<\/li>\n\n\n\n<li>Text, background and outline colors of the clicked button<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"55-sous-section--carroussell\">5.5 Subsection: Carroussell<\/h4>\n\n\n\n<p>This section allows you to change the appearance of the different components of a carousel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-123.png.webp\" alt=\"\" class=\"wp-image-2277\"><\/figure>\n\n\n\n<p><strong><em>Navigation has 3 states:  <\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>By default<\/em><\/li>\n\n\n\n<li><em>Active = Current carousel item<\/em><\/li>\n\n\n\n<li><em>Clicked = when you move the mouse over an icon<\/em><\/li>\n<\/ul>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Carousel corners = Rounded (default), Slightly rounded, Round or Square<\/li>\n\n\n\n<li>Visible or non visible background<\/li>\n\n\n\n<li>Background color<\/li>\n\n\n\n<li>Outline size = Thin (default), Thick and None<\/li>\n\n\n\n<li>Color of the outline<\/li>\n\n\n\n<li>Title Size = Small, Medium (default) or Large<\/li>\n\n\n\n<li>Title Color<\/li>\n\n\n\n<li>Description Size = Small, Medium (default) or Large<\/li>\n\n\n\n<li>Color of the Description<\/li>\n\n\n\n<li>The colors of the 3 states of navigation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-section--pied-de-la-conversation\">6. SECTION: FOOTER<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/11\/image-124.png.webp\" alt=\"\" class=\"wp-image-2279\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"61-sous-section--zone-de-saisie-de-texte\">6.1 Subsection: Text Entry Area<\/h4>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Corners of the input bubble = Rounded (default), Slightly rounded, Round or Square<\/li>\n\n\n\n<li>Arrow of the bubble visible or not<\/li>\n\n\n\n<li>Outline size = Thin (default), Thick and None<\/li>\n\n\n\n<li>Color of the outline<\/li>\n\n\n\n<li>Input text color<\/li>\n\n\n\n<li>Color of the send message icon (also applies to the send image icon)<\/li>\n\n\n\n<li>Description Size = Small, Medium (default) or Large<\/li>\n\n\n\n<li>Bottom of the bubble visible or not<\/li>\n\n\n\n<li>Color of the bubble background<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"62-sous-section--icne-de-menu\">6.2 Subsection: Menu Icon<\/h4>\n\n\n\n<p><strong>The parameters that can be modified are the following:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Corners of the icon = Rounded (default), Slightly rounded, Round or Square<\/li>\n\n\n\n<li>Color of the icon<\/li>\n\n\n\n<li>Background color of the icon<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"63-sous-section--arrire-plan\">6.3 Subsection: Background<\/h4>\n\n\n\n<p>The only parameter that can be modified is the background color of the conversation footer.<\/p>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"categorie-support":[194,198,221],"class_list":["post-2242","support","type-support","status-publish","hentry","categorie-support-features","categorie-support-tutorials","categorie-support-web-chatbot-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/support\/2242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/types\/support"}],"wp:attachment":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/media?parent=2242"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/categorie-support?post=2242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}