Table of Contents

Get started guide for CSS Design in Landbot

Abby Updated by Abby

Basics Guide for CSS Designers

Here you will find a guide with all the basic concepts you need to be aware of to add your customizations to the bot, from tips and explanations to links to the articles you should check:

GUI Design Section

You'll find all of the tools to customize your bot in the Design section of the builder:

For basic customization, you won't need to use CSS, as you can change the fonts, Hex colors, etc from the basic editor:

Custom Code Section

About the Custom Code section:

You'll find the CSS editor in the Design > Custom Code section of the builder:

From here you can add CSS classes and change the attributes of specific elements.

As soon as you apply the CSS in the editor you'll see a preview on the right side.

If the element hasn't been changed in the preview section it won't be changed in production.

Desktop/Mobile Sizes and type of embeds

Different types of sizes and how is displayed based on the embed:

Livechat on desktop(453x674px) vs mobile:

On mobile, the padding will always be 14px:

Embed in desktop vs mobile (please note that you can always change the size):

Landbot Branding

As long as you have a Business or Professional plan you can hide the Landbot branding.

All you need to do is go to "Settings" and toggle off "Show branding":

Scopes

When using CSS to alter your bot there are certain things that must be changed in the page where your bot is embedded, and others that must be changed from within the builder.

One example of something you'll need to change from your web page is the position of the Livechat launcher.

For more information please look at this article:

Customize Widget/Bubble

Identify block

First, get the block reference from the builder by right-clicking the top of the block:

Once you have the reference copied you'll go to "Custom CSS" and paste the following code, changing the reference to your own and adding _0 after:

[data-block="Nkbrswks_0"]

Here's another example:

This is what we will see in the console:

You can also target a specific child within a block (one button out of several for example):

For more information please check this article: Identify blocks

Fonts

Landbot offers by default a range of fonts that you might want to use in your bot. But in some cases, you might want to use something more personal or special. Google Fonts offers a wide range of free fonts that you can use also in your bots

You can check out this article for more information:

Google Fonts in Landbot

CSS Library

We've compiled a library of the most used CSS classes, of course, you can always search for specific classes in the Google Chrome Console by targeting the element you'd like. Here's an article with the class libraries:

CSS Library

Examples of:

Dynamic Customizations

You can dynamically change your bot throughout the flow, this could include changing the background video, color, etc..

Here's an example of how you can dynamically change the background video throughout the flow:

Here's an article with guidelines and more ideas: Dynamically Change Background

Design Customizations

There might be a case, where you want to change some elements from the bot style completely, based on the page where it's embedded. Maybe you might need to adapt to the flag of the country language, or to a specific branding of a product, etc...

To change dynamically it here is how you can do it:

Change CSS From Parent Page

Embed Customizations

We can alter almost any element using CSS. Here are some examples of how we can customize the Landbot widget:

For more instructions on how to change the widget check out this article:

Customize Widget/Bubble

We can also remove the bubble and add a function that opens the bot with a button like below:

For instructions, you can check out this article:

Launch Landbot by Clicking a Button

Customized display in the bot

There are unlimited ways to change the customized display in the bot! You can select any node, or any element and change it directly from the CSS within the builder, here's an example:

For more articles on custom CSS look here:

Code Customizations

CSS Framework

Landbot uses the Bulma CSS framework, which provides even more options for customization that you can implement in your custom CSS, for more info you can look here:

Bulma Docs

Javascript in Landbot v3

With Javascript in your Landbot you can do anything from setting opening new windows to closing the bot at the end of the flow. Here's more information on how to use Javascript in Landbot:

Javascript in Landbot V3

How did we do?

CSS Customization Examples: "Back to School" Theme

CSS Customization Examples: Call To Action: WhatsApp

Contact