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 🎩
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
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
- For Developers & Designers
- CSS and Design Customizations
- Components CSS Library
- Miscellaneous Classes CSS
Miscellaneous Classes CSS
Updated
by Abby
Miscellaneous Classes
Emoji
.is-emoji-button {
}
Rating
.InputRating {
}
Back button
.BackButton__Button {
}
.custom-button{
}
Loader
.lb-loader{
}
Input text
.InputTextLong__TextArea{
}
Persistent menu items in header
.is-horizontally-centered{
}
There are several small elements that we may want to change to match the design of our page.
Here are some of those classes with examples of how we can change them:
Emoji


Rating


Back Button
To make the back button always visible:


Loader


Input Text



Persistent Menu
Here's how to hide the options from the header while keeping them in the persistent menu:

Here's the result:
