What's New?
Landbot Affiliate Program
Multi-Question - the Question editor (Landbot 3 - only)
Introducing Formulas โก๏ธโก๏ธโก๏ธ
Introducing Landbot 3! ๐ฌ
Introducing a new Landbot Community ๐
Security Update - HTTPS URLs only
Create your bot
Build a bot
Blocks
Basics - Essentials when building a bot
Builder Interface
Send a Message block - Simple Message
Buttons block
Welcome Message
Media block
Default Output Explained
Question blocks
Question: Name block
Question: Text block
Question: Email block
Question: Number block
Question: Address block
Question: File block
Question: Phone block
Question: Date block
Question: URL block
Question: Yes/No block
Question: Autocomplete block
Question: Scale block
Question: Rating block
Question: Picture Choice block
Chat with humans
Flow operations
Formulas
Formulas - Date
Formulas - Comparison
Formulas - Regex
Formulas - Math
Formulas - Array
Formulas - Logical
Get started with the Formulas block
Formulas - Object
Formulas - String
Set Variable
Keyword Jump
AB Test
Code block
Conditions block
Conditions block II (with Dates, Usage and Agents variables)
Goodbye block
Jump To block
Persistent Menu
Global Keywords ๐
Keyword Options ๐ Assign keywords to buttons (WhatsApp and Facebook)
Integrations
Dynamic Data (Arrays)
Send an Email
Zapier
Zapier II
MailChimp
Slack Notification
Google Sheets (Insert, Update and Get data)
Salesforce (Add leads)
Integrations > Dialogflow Block
Stripe integration (v2)
Webhook
Others
Bricks
Bricks FAQs
Bricks Ultimate Guide
Brick Templates
Bricks Workarounds (ready to use)
Get a timestamp according to a defined TimeZone
Simple cart v0.2
How to extract data with Google Maps API
Variables
Landbot system Variables
Javascript in Landbot v2
Send variables from your page (the container site) to your embedded Landbot
Create custom Landbot variables & formats
Guidelines ๐ 5 best practices for chatbot design in Landbot ๐ค
Chats
Bot Settings
Settings - General
Custom System Messages
Typing Emulation
Second Visit Settings
Hidden Fields (Get params / UTMs from url and use it as variables)
Landbot native SEO & Tracking tools
Share & Embed
Embed Landbot in main platforms
Landbot in your web with Google Tag Manager
Landbot in Webflow
Embed in Sharetribe
Landbot in Shopify
Landbot in Wordpress
Landbot in Squarespace
Supported Browsers
Embed into your website
Share > Share the bot URL
Customizing the Proactive Message
Export flow on canvas as PNG
Embed Landbot in an iframe
Design (bots for Web)
Integrations Section
Integrations in Builder Apps and blocks
Salesforce Integration Dashboard
Zapier Integration Dashboard
Slack Integration Dashboard
Google Maps API Key for Address block
Sendgrid Integration Dashboard
Formulas Blocks Dashboard
Dialogflow Integration Dashboard
Stripe Integration Dashboard
Google Spreadsheets Integration Dashboard
Mailchimp Integration Dashboard
Webhook Blocks Dashboard
Integrations How to's
Reply From
What is the Integrations Section?
Account Settings and Billing
Billing
General FAQ
Startup Discounts
NGOs and Educational Organizations Discounts
Payment FAQ ๐ณ
Subscription Section (v3)
GDPR, Privacy & Security
Landbot's Abuse Policy - How to Report an Abusive Use of Landbot
Landbot's Privacy & Security Policies
Compliance with the GDPR - ย General Data Protection Regulation
Account Settings
Teammates - Add extra agents (seats) to your Account
Agent Status and Log out
Account Settings
Experiments
Fair Use Policy
Dashboard
Event Tracking
Google Analytics - Track Events (Not embedded)
Google Analytics - Track Events (Embedded)
Facebook Pixel - Track Events (Embedded)
Google Adwords - How to track Google Adwords in Landbot
GTM - How Track Google Analytics Events in Landbot with Google Tag Manager
Facebook Pixel - Track Events (Not embedded)
Channels - Web, Whatsapp, Messenger and API
WhatsApp API Overview ๐
1: WhatsApp Official API Integration FAQs ๐ฏ
2: WhatsApp Testing Section ๐งช
3: Requesting a WhatsApp official phone number ๐
4: WhatsApp Business Section โ
5: Parent Bot/Linked Bot (WhatsApp) ๐ค
WhatsApp Bot Creation โ๏ธ
WhatsApp Opt-in Users ๐
1: What is the Opt-in process? โ๏ธ
2: Why is the opt-in process mandatory? โ ๏ธ
3: How to get Opt-ins (Subscribers) for your WhatsApp ๐
4: WhatsApp Opt In Template โ
WhatsApp Templates & Campaigns ๐ฉ
WhatsApp features & Content types ๐ฉ
1: Types of content you can use in WhatsApp ๐ผ
2: Features not currently supported in WhatsApp ๐ โโ๏ธ
WhatsApp How to's and useful tips. ๐ค
1: How to capture and use the first user's interaction (input) in Whatsapp/Messenger
2: How to direct a user through a different bot flow on their second visit (for WhatsApp/Messenger)
The Ultimate WhatsApp Guide ๐ฌ๐ง
Facebook Business Verification - Best Practice ๐ฌ๐ง
La Guรญa รptima para WhatsApp ๐ช๐ธ
Verificar tu negocio en Facebook ๐ช๐ธ
La guida definitiva di WhatsApp ๐ฎ๐น
Facebook Business Verification ๐ฎ๐น
Verificaรงรฃo de Empresas no Facebook - Processo ๐ง๐ท๐ต๐น
API Chat [for Developers]
Facebook Messenger
What is the Channels section? ๐บ
For Developers & Designers
CSS and Design Customizations
Dynamic Customizations
Embed Customizations
Open LiveChat bot as soon as page loads (3 ways)
How to launch a Landbot by clicking a button
Modifying Embed Size
How to embed a pop bot with automatic load and button
How to trigger events and/or pass values from Landbot to the container site
How to "send" a user to a specific point in the flow with Javascript and with the API
Change Landbot custom CSS dynamically from parent page onload
Design Customizations
Customizing the bubble/widget (Livechat & Popup)
How to use Google Fonts in Landbot
Hide time stamp (under avatar)
Detect if a visitor is on Mobile/Tablet or Desktop
Landbot v3 - Web CSS - RTL
How to remove Landbot branding
How to hide elements in the Bot design
Customized display in the bot
Add a Chart (with Chart JS library) in your Landbot
How to display an HTML Table in Landbot v3 web
Pop up modal to embed third party elements
Different ways to embed Videos in Landbot
How to embed a .gif file inside a message
Display video and hide button to continue until video has ended
Components CSS Library
Components CSS Library Index
Background Class CSS
Identify Blocks CSS
Buttons Class CSS
Header Class CSS
Media Class CSS
Message Bubble Class CSS
Miscellaneous Classes CSS
Get started guide for CSS Design in Landbot
CSS Customization Examples: "Back to School" Theme
Landbot APIs
Javascript and SDK
Analyze bot Metrics and data
Metrics Section
...โถ, ๐, ๐ฏ ways to analyze your data ๐
How to export the data from your bots
Workarounds and How To's
Building Tips & How to's
How to build an event registration Landbot (to be used in one screen by many attendees)
How to display images with a variable url source
How to set the flow according to Open/Closed Business Hours
How to set up Multiple Choice questions
How to open new a URL in another tab (window)
How to ask a question based on a variable not being set (empty url params) (v3)
How to redirect visitors to another URL in the same tab (Landbot URL / not embedded)
How to redirect user to another url in your site with Livechat open to continue conversation
How to avoid visitors selecting specific days of the week
How to let user select a time of booking (with a minimum 45 minutes notice)
How to Perform Basic Calculations
Get Index Array selection Whatsapp
Get the array's index of the user selection and extract information from array
How to encode a variable
How to TEST your Http Request (Webhook block)
Builder's keyboard shortcuts and mechanics! ๐
How to calculate the number of days between two selected dates
How to access keys and values, in object variables
How to build a simple scoring bot system
How to "debug" (troubleshoot) your bot's flow to spot possible errors (for non coders)
How to limit dates to pick up to 90 days in advance
How to redirect visitors to another URL in the same tab (embedded landbot)
How to POST, GET (and more) with Landbot
How to add a Click-to-Call/Email/WhatsApp button
Workarounds & Codes
Proactive message on mobile
Different ways to format numbers with JS
How to Upload Document & store link
How to make a "counter" for variables
How to not display Proactive Message to repeating Visitors
Random 4 digits Number
Set the flow depending on the url path (for embedded landbots)
Trigger a Global Keyword with JS (web v3)
Generate a URL that has variables from user answers
Automations Integrations
Pabbly Automation Integration
Automate.io Automation Integration
Integromat Automation Integration
Integrately Automation Integration
Zapier automation integration
IFTTT Automation Integration
Workarounds with other tools
How to validate phone number with SMS verification (with Nexmo Verify)
How to use Google Sheets to create a simple verification system for returning visitors
Send contact info to Hubspot CRM
Get data filtered from Airtable with a Brick- Shop example
20 different ways to GET and filter data from Airtable
How to extract parameters from Dialogflow response with Formulas
Fill and download PDF with PDF Monkey
How to give unique Coupon Codes (with Google Spreadsheets)
How to add/update different field types in Airtable (POST, PATCH & PUT)
Create a contact and assign it to a list in Activecampaign (API)
How to create a custom SendGrid email - (Custom "from" email)
How to insert a new row with data and formulas in Google Sheets
How to Create, Update, Retrieve and Delete records in Airtable (POST, PATCH, GET & DELETE)
Use Google Cloud Functions to set directly new values to Landbot variables
How to use Google Spreadsheet as a Content Management System for your bot
Get more than 100 items from Airtable
General information
Table of Contents
- All Categories
- Create your bot
- Design (bots for Web)
- Advanced (Custom CSS & Custom JS)
Advanced (Custom CSS & Custom JS)
Updated
by Pau Sanchez
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 save your changes. You'll see the changes applied in real-time to the preview on the right side.
Since we don't have a reference for the CSS classes at the moment, we recommend using the Dev Tools in Chrome.
Landbot 2 ๐๐ป
You can add Custom Style Sheets (CSS) and JavaScript functions (JS) to your Landbot to make it look unique or to add special functionalities.
To access the Design / Advanced section, you need to click on the Artist emoji, located in the Top Menu of the Builder, and Select Advance:

- To add Advancedย Settings, click on theย Advanced Settings button at the bottom of the design menu:

You'll see two different sections:
Advanced CSS - Add CSS (Custom Style Sheet)
Here you can add Custom Style Sheet (CSS) to your landbot to customize the shape, size, and color of every element. Want rounded bubbles, remove the timestamp, or make the avatar bigger? This is the way to go.ย Here is also, where Landbot styling options will be placed if you select any custom stylings or templates. There is no need to use the <style> tag

Examples of Custom CSS
Here are some examples of what you can do with some CSS in your Landbot:
- Customize the timestamp to add text instead of the message delivery time:
.hu-message.brand .hu-message-date { color: transparent; } .hu-message.brand .hu-message-date::after { content: "Landbot"; position: absolute; left: 0; top: 1px; color: white; }
You can add other parameters likedisplay: none
ย to fully remove the timestamp from your landbots. - Change the shape of the buttons (to rounded):
.hu-input-menu_button:not(.icon) {
ย border-radius: 100px!important;
}
You can add your custom radius (in pixels).
Advanced JS - Add JS (Custom scripts) [Javascript inside HTML <script> tags]
Here you can add custom JavaScript functions to trigger special functionalities in your landbot, often related to event/conversion tracking or URL parameters.

In case you added custom Javascript and you want to test it, please use the Share Url opening in a new tab or window.
Examples of Custom JS
For more information and examples of what can be done with Javascript in this section, take a look at the Workarounds & Codes section