Create your bot
Basics - Essentials to build a bot
Variables in Landbot - Getting Started
Landbot system Variables
Builder's keyboard shortcuts and mechanics! π
Builder Interface
Supported Browsers
Guidelines π 5 best practices for chatbot design in Landbot π€
How to "debug" (troubleshoot) your bot's flow to spot possible errors (for non coders)
Build a bot
Blocks and flow operations
AB Test block (randomize flow)
Buttons block
Buttons block
Default Output Explained
Welcome Message
How to open new a URL in another tab (window)
How to set up Multiple Choice questions
Chat with humans
Code Block (Javascript)
Conditions block
Conditions block
Conditions block II (with Dates, Usage and Agents variables)
How to ask a question based on a variable not being set (empty url params) (v3)
Flow operations
Global Keywords π
Keyword Jump
Keyword Options π Assign keywords to buttons (WhatsApp and Facebook)
Jump To block
Persistent Menu
Formulas block
Get started with the Formulas block
Formulas - Comparison
Formulas Blocks Dashboard
Formulas - Array
Formulas - Date
Formulas - Object
Formulas - Logical
Formulas - Math
Formulas - Regex
Formulas - String
Goals block
Goodbye block
Media Block
Multi-Question block (Create a Form)
Note block
Question blocks
Question: Address block
Question: Autocomplete block
Question: Date block
Question: Email block
Question: File block
Question: Name block
Question: Number block
Question: Phone block
Question: Picture Choice block
Question: Rating block
Question: Scale block
Question: Text block
Question: URL block
Question: Yes/No block
Send a Message block
Send an Email block
Set Variable block
Bricks
Create Bricks
Brick Workarounds
Bricks Workarounds (ready to use)
How to link your Calendly account and prepare your agenda
Age Calculator Brick Workaround
Get a timestamp according to a defined TimeZone
Simple cart v0.2
How to extract data with Google Maps API and Calculate Distances
How to set the flow according to Open/Closed Business Hours
How to avoid visitors selecting specific days of the week
Bot Settings
Chats - Livechat and Human Takeover
Design (bots for Web)
Share & Embed
Integrations with Landbot
ActiveCampaign
Airtable
Get data filtered from Airtable with a Brick- Shop example
20 different ways to GET and filter data from Airtable
How to add/update different field types in Airtable (POST, PATCH & PUT)
How to Create, Update, Retrieve and Delete records in Airtable (POST, PATCH, GET & DELETE)
Get more than 100 items from Airtable
Automate.io
Calendly
Dialogflow
Integrations > Dialogflow Block
How to extract parameters from Dialogflow response with Formulas
Dialogflow Integration Dashboard
Dialogflow - How to get JSON Key
External API REST
Dynamic Data (Arrays)
How to TEST your Http Request (Webhook block)
Webhook
Webhook Blocks Dashboard
How to POST, GET (and more) with Landbot
Facebook Pixel
Google Analytics
Google Adwords
Google Cloud Functions
Google Maps
Google Sheets
Google Sheets (Insert, Update and Get data)
How to use Google Sheets to create a simple verification system for returning visitors
How to Upload Document & store link
Add a timestamp to a Google Spreadsheet
How to give unique Coupon Codes (with Google Spreadsheets)
Google Sheets Integration Dashboard
How to insert a new row with data and formulas in Google Sheets
How to use Google Spreadsheet as a Content Management System for your bot
Google Tag Manager
GTM - How Track Google Analytics Events in Landbot with Google Tag Manager
Landbot in your web with Google Tag Manager
Hubspot
IFTTT
Integromat
How to upload a file to Google Drive using Integromat
Integromat Automation Integration
How to extract data from an external source with Integromat and use it in Landbot
Integrately
Nexmo
Mailchimp
Pabbly
Paragon
PDF Monkey
Pipedream
Salesforce
Sendgrid
Slack
Stripe
Squarespace
Sharetribe
Shopify
Webflow
Wordpress
Zendesk
Zapier
Account Settings and Billing
Billing
Teammates - Add extra agents (seats) to your Account
Subscription Section (v3)
Payment FAQ π³
Fair Use Policy
Account Settings
Privacy and Security
Landbot Channels - Whatsapp, Messenger and APIChat
WhatsApp integration
The Ultimate WhatsApp Guide π¬π§
Facebook Business Verification - Best Practices π¬π§
Parent Bot/Linked Bot (WhatsApp) π€
WhatsApp Testing Section π§ͺ
Opt-in, Templates and Campaigns
What is the Opt-in process? βοΈ
How to get Opt-ins (Subscribers) for your WhatsApp π
WhatsApp Opt In Template β
WhatsApp Campaigns π
HSM Templates for Whatsapp π¬
WhatsApp Bot Creation
Creating bots for WhatsApp π
How to preview WhatsApp and Messenger bots
Types of content you can use in WhatsApp πΌ
How to capture and use the first user's interaction (input) in Whatsapp/Messenger
How to direct a user through a different bot flow on their second visit (for WhatsApp/Messenger)
Unblock user of error message loop and redirect to restart bot
Facebook Messenger
The Facebook Messenger Ultimate Guide
Types of content you can use in Messenger bots πΌ
How to Preview a Messenger bot
API Chat (for Developers)
Metrics and Data Management
Metrics Section
How to export the data from your bots
...βΆ, π, π― ways to analyze your data π
Bot's Analyze 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 and a List in Landbot v3 web
Pop up modal to embed third party elements
Progress Bar Workaround
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
CSS Customization Examples: "Minimalist" Theme
Landbot APIs
Javascript and SDK
Workarounds and How To's
Building Tips & How to's
How to add a Click-to-Call/Email/WhatsApp button
Send variables from your page (the container site) to your embedded Landbot
How to build an event registration Landbot (to be used in one screen by many attendees)
How to redirect user to another url in your site with Livechat open to continue conversation
How to let user select a time of booking (with a minimum 45 minutes notice)
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 calculate the number of days between two selected dates
How to access keys and values, in object variables
How to redirect visitors to a URL (web only)
Workarounds & Codes
Proactive message on mobile
Different ways to format numbers with JS
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
How to set up questions with a countdown
More Topics
Introducing a new Landbot Community π
How to migrate your bot from Landbot v2 (legacy) to Landbot v3
Introducing Landbot 3! π¬
Migrate your web bot from the Old Builder to the New Builder (Landbot 2 and 3)
Landbot Affiliate Program
Security Update - HTTPS URLs only
Startup Discounts
NGOs and Educational Organizations Discounts
Table of Contents
Buttons block
Updated
by Rafaela Basso
For Landbot (Web)
If there's something that makes Landbot special it is how you can use Buttons to create efficient, engaging, and easy-to-follow experiences.
Buttons are elements your users can click to move on to the next block in the conversation.
Buttons Setup
To create a Buttons type block, drag and drop the green dot and select Buttons:

Then, you can add more messages to the question by clicking on the "+" symbol and create buttons by typing in anything within the pink rectangles.
Press Enter to add more Buttons and drag them to change their position.
If you click on the three dots of the top right of the block you'll open the full Buttons block configurator, which looks like this:

You'll see a bunch of things to configure here, but let's go step by step!
Advanced Buttons Editor: Here you can add content (cogwheel), re-arrange (dots columned), and delete (bin icon) buttons. Click on the cogwheel to configure each button:

Button Style
Choose what type of media you want to add to your buttons: plain text, an icon, an emoji, or an image.
Final view in Landbot 3:
(a) Plain text

(b) Icon

(c) Emoji

(d) Image

Final view in Landbot 2:
(a) plain text

(b) Icon

(c) Emoji

(d) Image

External link
If you want to redirect your users to an external URL whenever they click a button, enter it here! Check out this article to see more about how this feature works.
Final view in Landbot 3:

Final View in Landbot 2:

Buttons options (advanced):

Buttons alignment
When you have several buttons, you may want to change their alignment from horizontal to vertical. Try the style that looks better!
Final view in Landbot 3:
(a) Horizontal

(b) Vertical

Final view in Landbot 2:
(a) Horizontal

(b) Vertical

Randomize order
You can set a randomized order of the Buttons option
- Builder:

- Final view in Landbot 3:

Searchable options
When you provide +10 options, turn this feature on so users can start typing and filter among all the Buttons showed!
Final View in Landbot 3:

Final view in Landbot 2:

Multiple choices
Let your users select more than one option by clicking on the toggle.
When using this option, make sure to Connect the Default output to the next block to make sure that the bot flow will continue.
Check out this article to read more about the Default output and use it correctly.
Also, in the Multiple Choice, you can Set min/ max options:

Variables in the Multiple Choice option
You can save the variables in Array so you can reuse the information saved in Dynamic data and show it in Buttons or cards.
But keep in mind that if you click on "Save output as Array" you have to save the variable of the Button in Array as well

Custom system message of the Multiple Choice option (Set min/ max)
You can also customize the "Choose the min and max" in the next example "Choose at least 1 and up to 4" according to your settings:

To change it you have to do it through Custom System messages following these steps:
- Settings
- Custom system messages
- Help texts
- Multi-option range help

Example:
Final view in Landbot 3
- minimum of 3 options:

The Final view in Landbot 2 will remain the same as before.

Save answers in the field
As in any other block, the answer (click[s]) will be stored in a variable. Set it up here!
You can save the variable of the Buttons in these formats:
- String
- Array

For WhatsApp
Since WhatsApp doesn't allow buttons, those will be displayed as a numbered list of choices, so the valid answer to this type of question will be typing the number corresponding to your choice.

For Facebook Messenger
Limitations Buttons block in the Messenger bots:
- The Buttons will only be displayed horizontally.
- The Buttons block in Messenger bots is not compatible with Searchable options and Multiple Choices.
- The Buttons block in Messenger is only compatible in the Text Button format.
That means Icons, Emojis, Images, and Hyperlinks are not compatible with Messenger bots.
How it looks in the builder:

How it looks in Messenger:

- Despite the restriction mentioned in the item above, it possible to Manually insert emojis in the buttons, instead of using the option built-in the Buttons block.
To insert emojis, there are two options:
1. In case you are using aΒ MAC deviceΒ you can use the native emoji picker from Apple. To activate it you need to use the combination of the keyboard:Β Control + Cmd + Space πβ
2. In case you are using aΒ non- MAC deviceΒ on aΒ Chrome BrowserΒ you can install a virtual emoji keyboard in the Chrome Store.Β HereΒ is a good one. With the emoji keyboard, you can introduce any emoji you want into your text.Β
Please also keep in mind that depending on the device your user use the emoji you choose could appear differently π
This is how it looks in the builder:

How it looks in Messenger

- The Buttons block in Messenger bots has a limitation of up to 11 buttons (default button included).
If not all the buttons fit on the screen, you can click on the arrow pointing to the right to see more options.
The block will not be triggered, and the bot will stop at this point of the flow.
This is how it looks in the builder:

And this is how it looks, Messenger:

- The Buttons block has a limitation of 20 characters per button. If the text inside the button exceeds this limitation, it will be cut off.
How it looks in the builder:
(within 20 characters)

(More than 20 characters)

How it looks in Messenger:
(within 20 characters)

(More than 20 characters)

If the user does not choose a button, and types anything instead, the bot will stop.
Connecting the Default button will prevent this from happening, by allowing the bot to continue. You can even send the user back to that block if you prefer.

