CSS and Design Customizations
Design Customizations
Advanced (Custom CSS & Custom JS)
Landbot 3 🚀. Landbot 3 is the new version of our chatbots UI. As well as in the previous version, you can add custom: CSS. JS. You can also expand them like this: Click on Apply , then on Save , to s…
Components CSS Library Index
A CSS Library with links to articles and several classes
Background Class CSS
Background classes and some examples of how to use them
Identify Blocks CSS
Block classes and some examples of how to use them
Buttons Class CSS
Button classes and some examples of how to use them
Header Class CSS
Header classes and some examples of how to use them
Media Class CSS
Media classes and some examples of how to use them
Message Bubble Class CSS
Message bubble classes and some examples of how to use them
Miscellaneous Classes CSS
Miscellaneous classes and some examples of how to use them
CSS Customization Examples: "Back to School" Theme
Here's an example of some customizations in an embedded bot
Get started guide for CSS Design in Landbot
Prefer watching than reading? No problem, we’ve got you covered 👇. 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…
CSS Customization Examples: Call To Action: WhatsApp
Create a personalized widget for web that will redirect the user to Whatsapp
CSS Examples: Lead Gen
Collecting information from leads can be tricky as they have a tendency to quit halfway through. For these simple lead cases, we've created a template that displays the questions one by one so the us…
CSS Customization Examples: "Translucid"
In this example, we'll create a translucid modal that overlays our webpage in order to provide a more simple way to chat.
CSS Customization Examples: "Minimalist" Theme
Minimalist design example
Dynamic Data CSS
There are just a few classes for the Dynamic Data block, however, with little we can do a lot. Autocomplete..dropdown-item:hover{ }.DropdownItem__Content{ } To change the background color (or text co…
Form Block CSS
Form Title. [data-type="multi_question"].MessageBubble__content h4 { } Width of Form Block:. [data-type="multi_question"].Message__message-content { } Form Subtitle. [data-type="multi_question"].Mess…
CSS for Typewriter Effect
This article will help you create a Typewritter effect for the message blocks using CSS. You need to copy the following CSS and paste it in the Design Section >> Custom CSS: body { font-family: monos…
CSS Customization Examples: Carrd Embed Beginner
Here's a basic embed in Carrd template example with CSS recommendations for this specific type of embed.
Dynamically Change a Bot's Background
Please note that this will only work in Landbot V3 There are times during the flow that you may want to change your bot's background, we've created a workaround that lets you do just that! You can ch…
Proactive Message Customizations with Javascript and CSS
Solutions for a more customizable proactive in your webpage
Landbot v3 - Web CSS - RTL
If you want to adapt the design of the interface for RTL users, please add the code below to the Design / Code / Add CSS section v.04 Last update 19th April 2021 (Spacing in text input) body{ directi…
CSS Customization Examples: Video Bubble
Add a video to your welcome message!
Dynamically Change Any Style
There are some instances where we may need to change the styles halfway through, or maybe we want to 'Jump to' another bot and change the styling there as well. We already have documentation for doin…
CSS Customization Examples: CV Template
In this example we're going to build an interactive CV template, with a persistent menu and some call to action functionalities such as open email, Whatsapp, and redirect to a PDF
Change Landbot custom CSS dynamically from parent page onload
By default, in case you want to add customisations with CSS to the style of your web bot, you will have to add the code in the Design > Custom > Code section: But there might be a case, where you wan…
Widget/Bubble Customizations with Javascript and CSS
These modifications can be applied only when you use the Live chat or Pop up Embed. The little chat bubble (aka widget or launcher) displayed in the bottom right corner of your page sometimes needs s…
