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

For Landbot (Web v3)πŸš€

We have improved one of our favorites sections 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:

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:

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 Landbot (Web v2) πŸ€“

Our old version 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

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?

Advanced (Custom CSS & Custom JS)

Contact