Table of Contents

Design Section Guide 🎨

Sofia Teran Updated by Sofia Teran

πŸ₯³ Welcome to the new Design section, where you can customize your Landbot to make it unique 🀩

To access this section, all you need to do is click the Design button in the top menu of your builder

Landbot 3 πŸš€

We have improved one of our favorites section to help you build a customized Chatbot just with a few clicks! 🀩

🎨 As you can see in the Design framework we implemented two subsections: Templates and Customize

πŸŽ‰ Let's start:

Templates

In this section you can select the template you like the most and use it in your bot:

Tip: Take your time, see which template fits better to your needs, and once done go-ahead to the next area of the Design Section!

Customize

Here are four subsections:

Colors & Shapes 🌈

Here you can customize the color and shape of every element of our bot, nevertheless, you can choose in between < Basic or Advanced >

Note: You must always make the changes only in one of both options and saved it, otherwise, if you change on both sides the bot will mix it and will not be saved any changes! πŸ€“

Basic

Here you can find the Global Colors which you can use to change according to your needs.

Global Colors 🎨

This section will allow you to change the colors of:

  • Buttons: Buttons & user messages
  • Background: Background and header
  • Messages: Messages, forms, and floating texts
  • Texts: Text in bot messages
Note: If you change the colors of one of these elements in the specific sections (below) it will prevail in the global colors settings.

Below is a video in which you can see the changes in each of the options πŸ€“

Advanced

Background πŸ–Ό
Solid

You can choose a solid color for the background through our color palette:

Gradient

Here you can change the gradient start color and the gradient end color for the linear gradient.

πŸ‘€ Keep in that you have these colors set by default:

But you can choose 2 colors from our color palette:

Image

Here you have Background image, Background image mobile, and Background image color mask

Note: you can choose to add an image in between Upload a file, URL, or Giphy:
  1. Background image:
  1. Background image mobile

If you decide to edit this section you will only be able to see this in the builder:

But once you run a test of your bot into your mobile device you will be able to see the changes that you made

  1. Background image color mask
Video

You have two type of videos:

  1. Default
Tip: can also add a transparent layer of color to your video called "color mask".
  1. Custom: To use your custom video you must create an mp4 and Webm version.
Hidden

If you select this, your background will be transparent. This is useful for embedded bots, to make sure that the background of your page shows behind.

Show header

You can enable/disable the option to show the header:

Top bar background-color
Show line separator

You can enable/disable the option to show the line separator, and once you make it you can also customize:

  • Top bar separator color
  • Top bar text color
Top bar text color

You can change this color, but you must keep in mind that if you set one color before through the show line separator, this will be a new update.

Message bubbles πŸ’¬

Here you can choose the shape of bot's and user's messages, as well as customize:

  • Bot messages background
  • Bot messages text
  • User messages background
  • User message text

These are the default colors:

But you can customize as you want:

Buttons and forms πŸ”˜

Buttons

You can easily set the border radius for your buttons and customize the color of:

  • Buttons border
  • Buttons background
  • Buttons text

These are the default colors:

But you can also customize those colors and the border-radius:

Forms

Here you can customize the color of the text area background, border, and text.

Here you can see how it look when you change the colors:

Fonts A

Here you can customize:

  • Font Family: type of letter
  • Font size: the size of the letter

πŸ‘†πŸ»You can find all the information about customizing this section by clicking on our Icons & Logo article πŸ€“

Custom code πŸ’»

You can customize CSS and JS:

πŸ‘†πŸ»To have more information about it, please click on our Advanced (Custom CSS & Custom JS) article πŸ€“

Warning: the URL must be an HTTPS://Β otherwise you will get an error that will not allow you to save changes.

😎 Here are some tips about the Design section that will be really useful for you:

  1. Real-time changes.Β Every change you make using the left menu will be shown in real-time on the right side of the screen. So, if you're making some changes using, let's say, the Custom Style editor, and you notice no changes, something might be going wrong!
  2. Saving.Β The app will auto-save your changes every time you move from one section to another to make sure you don't lose any edits, so keep that in mind.
  3. Preview.Β The right side of the screen contains a fully interactive Landbot so you don't need to click preview to test the flow along with the design edits.

Landbot 2 πŸ€“

Our old version that helps you to make all the customizations that you want according to your bot design:

Design Templates 🎁

We will show you several template options so that you can choose the one that best suits your needs

Logo & Avatar πŸ™‚

In this section, you will be able to change:

  • Header logo text
  • Header logo
  • Chatbot avatar
  • Share
  • Scale

πŸ‘€ Do you want to know how the changes are made?

We invite you to click on our Icons and Logo article where you can see the changes step by step πŸš€

Colors & Background 🎨

Here you can modify the color of every element of your Landbot

Base Colors 🌈

You can customize the Primary, Secondary, Dark, and Light colors:

Primary
Secondary
Dark
Light

Background πŸ–Ό

Choose between five different types of background

Gradient

A color that transforms into other colors. Choose both - top and bottom - to create your own gradient.

Color

The classic of the classics.

Image

Upload your own image (JPG, PNG, or GIF) as a background. And select if you want to use the same for all devices, or one specific for mobile.

Check in the Builder's Preview how will the images look for each device:

Tip: Try to use at least Full HD resolution (1920X1080) if you use the same image for all devices to make sure it's correctly displayed everywhere.
Video

Pick between our gallery of videos and your Landbot will look alive! You can't add your own videos yet, but we're working on it!

Hide

Avoid any background and use the one you are already using on your website.

Header 🚩

Choose how you want your header! you can keep it as it is or customize it! Edit the color of the text contained too!

Custom
  1. Top bar background-color

  1. Top bar text

Hide

Chat bubblesΒ πŸ’¬

Modify every color from theΒ bubbles (visitors, Landbots, box, text...).

Custom
  1. Bot messages background

  1. Bot messages text

  1. User messages background
  1. User messages text

Forms πŸ”˜

Customize your buttons: pick the background you like more and tune up your text area.

Custom
  1. Buttons background

  1. Buttons text

  1. Textarea background

  1. Textarea border
  1. Textarea text

πŸš€ We hope you have enjoyed our Design section! 🀩

How did we do?

Advanced (Custom CSS & Custom JS)

Contact