Table of Contents

Design Section Guide 🎨

Jonathan Goodfellow Updated by Jonathan Goodfellow

Prefer watching than reading?Β No problem, we've got you covered πŸ‘‡

πŸ₯³ 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

πŸŽ‰ 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 - Font and Background

In the General section you can choose the Font Style and Size for the text in your Agent, and the background colour and style.

If you choose to add an Image to use as your background, you can select different images to display when the Agent is accessed on Desktop and Mobile:

You can choose between uploading a file, adding a URL where the image is hosted or selecting from Giphy.

If you choose to add you own Video you must create an mp4 and Webm version:

Hidden option

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 - Header and Launcher Icon

In the Header section you can trigger the Header to display or not, set the Logo Text, Logo Image and Tagline, set the Background and Text Colour, and turn on or off the Line separator display:

Note: There is a limitation of 100 characters for the tagline.

The Launcher Icon is the icon that will display when you embed your agent in your Website.

Here you can choose whether the Icon is highlighted by a Bubble and select the colour, and choose your own Icon image:

Chat - Avatar & Elements πŸ’¬

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

  • Agent messages background
  • Agent messages text
  • User messages background
  • User message text

Buttons and forms πŸ”˜

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

  • Buttons border
  • Buttons background
  • Buttons text

You can also customize the color of the text area background, border, and text for Forms.

Finally, you can customize the Agent Avatar by adding your own image or selecting from the options available.

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

Custom code πŸ’»

You can customize your Agent with CSS and JS:

πŸ‘†πŸ»For a full guide to using CSS and JS to customize your account, please check out our article: Advanced (Custom CSS & Custom JS) article πŸ€“

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

Design Tips 🎨

😎 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.

Was this article helpful?

Icons & Logo - Avatar (Web)

Contact