Table of Contents

Design > Colors

Enrico Updated by Enrico

Landbot 2

The Colors & Background section is where we can modify the color of every element of our landbot. Here we have several areas, in details:

Base Colors

These are the four colours that have the most presence in your design. If you don't want to spend a lot of time in Design, these are the four variables you should play with.

Base colors - Primary

Base colors - Secondary

Base colors - Dark

Base colors - Light

Background

Choose between five different types of background:

Background - Gradient

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

Background - Color

The classic of the classics.

Background - 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:

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.

Background - 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!

Background - Hide

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

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

Header - Custom
  1. Top bar background color

  1. Top bar text

Header - Hide

Chat bubbles 

Modify every colour from the bubbles (visitor's, landbot's, box, text...).

Chat bubbles - Custom
  1. Bot messages background

  1. Bot messages text

  1. User messages background

  1. User messages text

Forms

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

Forms - Custom
  1. Buttons background

  1. Buttons text

  1. Textarea background

  1. Textarea border

  1. Textarea text

Landbot 3 🚀

Landbot 3 is the new version of our chatbots UI.

It comes with a brand new interface and more options for customization! 💪

In the Colors & Shape sections we can customize the color and shape of every element of our bot.

Global colors

Here you can easily customize the color of the Buttons, Background, Messages and Text.

If you change the colors of one of these elements in the specific sections (below) it will prevail on the global colors settings.

Background

Solid

Select a solid color for the background.

Gradient

Choose the start color and end color for the linear gradient.

Image

Upload a background image (and one for the mobile version). You can also add a transparent layer of color to your image called "color mask".

Video

Choose a video or upload your own. You can also add a transparent layer of color to your video called "color mask".

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.

Header

Here you can choose to show the header or not and to show or not a line as a separator. And of course, customize the colors of header, line and text.

Message bubbles

Here you can choose the shape of bot's and user's messages, as well as customize the color of background and text for both.

Buttons and forms

Buttons

You can easily set the border radius for your buttons and choose the color of button's background, border and text.

Textarea

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

How did we do?

Logo & Avatar

Fonts

Contact