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

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

πŸŽ‰ Let's start:

Design Templates (pick a predefined design)

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!

General

Here are two sections:

Font

Font Family & Font Size

Here you can edit the Font (style) and Size of the text that you add to the bot.

Background

This section will allow you to change the colors of the 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:
  2. 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 types 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.

Layout

Here we have two sections:

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

Logo text

Here you can change the name of the header:

Logo image

Here you can delete Landbot's logo and add your own image from your file, URL, or select a Giphy:

Tagline

Here you can change the text under the logo text:

Note: There is a limitation of 100 characters for the tagline.
Top bar background-color

Here you can change the header 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 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:

Customize the Bubble Launcher icon

Here you can edit:

  • Bubble color
  • Icon

Chat Avatar & Elements πŸ’¬

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:

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.

Pick an avatar for your bot πŸ€–

πŸ‘†πŸ»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.

For WhatsApp

This Section is not compatible with WhatsApp bots.

For Facebook Messenger

This Section is not compatible with Messenger bots.

How did we do?

Icons & Logo - Avatar (Web)

Contact