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
Reply Buttons block (WhatsApp)
Default Output Explained
How to open a new URL in another tab (window)
How to set up Multiple Choice questions
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)
Flow operations
Global Keywords 🌍
Keyword Jump
Keyword Options 🔑 Assign keywords to buttons (WhatsApp and Facebook)
Lead Scoring block
Persistent Menu
Jump To block
Formulas block
Get started with the Formulas block
Formulas Blocks Dashboard
Formulas - Regex
Formulas - Date
Formulas - String
Formulas - Logical
Formulas - Math
Formulas - Object
Formulas - Comparison
Formulas - Array
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
Starting Point block and First Message
Business Hours block
List Buttons Block (WhatsApp)
Collect Intent block
Bricks
Bot Settings
Bot General Settings
Second Visit Settings
Custom System Messages
Hidden Fields (Get params / UTMs from url and use it as variables)
Landbot native SEO & Tracking tools
Typing Emulation
Landbot in Wix
Chats - Livechat and Human Takeover
Design (bots for Web)
Share & Embed
Account Settings and Billing
Billing
Teammates - Add extra agents (seats) to your Account
Subscription Section
Payment FAQ 💳
Fair Use Policy
Account Settings
Account Settings
Account Homepage
Dashboard
Roles & Permissions for Teammates
Agent Status and Log out
Common reasons for not receiving account activation email
Privacy and Security
Landbot's Privacy & Security Policies
Compliance with the GDPR - General Data Protection Regulation
Landbot's Abuse Policy - How to Report an Abusive Use of Landbot
Notifications section
Integrations with Landbot
ActiveCampaign
Airtable
Airtable integration block
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
Insert Multiple Records to Airtable with a Loop
How to Get an Airtable Token
Advanced filters formulas Airtable block
Update Multiple Records in Airtable Using a Loop
Calendly
Carrd
DeepL
Dialogflow
Dialogflow & Landbot course
Dialogflow & Landbot intro: What is NLP, Dialogflow and what can you do with it?
Dialogflow & Landbot lesson 1: Create your first agent and intent in Dialogflow
Dialogflow & Landbot lesson 2: Get the JSON Key
Dialogflow & Landbot lesson 3: Setting up of Dialogflow in Landbot
Dialogflow & Landbot lesson 4: Training phrases and responses for a FAQ
Dialogflow & Landbot lesson 5: Entities and Landbot variables
Dialogflow & Landbot lesson 6: Redirect user depending on Dialogflow response parameters (intent, entities and more)
Learn more about Dialogflow - Courses and communities
Integrations > Dialogflow Block
How to extract parameters from Dialogflow response with Formulas
Dialogflow Integration Dashboard
Dialogflow in Unsupported Languages (& Multilingual)
Dialogflow - How to get JSON Key
External API REST
Dynamic Data (Arrays)
Webhook Block Dashboard
Webhook block (External API REST)
How to TEST your Http Request (Webhook block)
How to POST, GET (and more) with Landbot
Facebook Pixel
Google Analytics
Google Adwords
Google Cloud Functions
Google Maps
Google Maps API Key for Address block
Extract Data With Google Maps Geocoding API
Calculate Distances With Google Maps API
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
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
HubSpot
IFTTT
Integromat
Connecting MySQL with Make.com (formerly Integromat)
How to upload a file to Google Drive using Make.com (formerly Integromat)
Send WhatsApp Message Template from Make (ex Integromat)
Make.com (formerly Integromat) trigger
How to send an email through Sendinblue by Make.com (formerly Integromat)
Get Opt-ins (Subscribers) from Facebook Leads using Make (ex Integromat)
How to extract data from an external source with Make.com and use it in Landbot
Integrately
Intercom
Vonage
Mailchimp
OCR
OpenAI
Create a JSON format response from OpenAI in WhatsApp
FAQs block
How to build a FAQ chatbot with GPT-3
GPT-4 in Landbot
Fine-Tune GPT3 with Postman
OpenAI
Prompt Engineering for GPT-3
Build a Customer Service Bot with ChatGPT and Extract Information
Pabbly
Paragon
PDF Monkey
Pipedream
Salesforce
Segment
Sendgrid
Slack
Stripe
Squarespace
Sharetribe
Shopify
Store Locator Widgets
How to display the near location of your store in WhatsApp (with Store Locator Widgets)
How to display the near location of your store for Web bots (with Store Locator Widgets)
Webflow
Wordpress
Xano
Zendesk
Zapier
Zapier block
Zapier Integration Dashboard
How to insert a row to Google Spreadsheet by Zapier
How to generate a document with PDFMonkey by Zapier
Send WhatsApp Message Templates from Zapier
How to send an email with Gmail by Zapier
Get Opt-ins (Subscribers) from Facebook Leads using Zapier
How to extract data from an external source with Zapier and use it in Landbot
Zapier trigger
How to complete a digital signature flow by Zapier
Make a survey with Landbot and display the results in a Notion table using Zapier
Trigger Automation block
WhatsApp Channel
Getting started with the WhatsApp Integration
WhatsApp Testing
Facebook Business Verification - Best Practices 🇬🇧
Adding a WhatsApp number to your account
WhatsApp Channel Settings
Growth Tools for WhatsApp
Opt-in, Templates and Campaigns
Parent Bot/Linked Bot - Add a main bot to your WhatsApp number
How to get Opt-ins (Subscribers) for your WhatsApp 🚀
WhatsApp Campaigns 💌
WhatsApp's Message Templates
Send WhatsApp Messages with Landbot API
Audience block
Recognise the users input when sending a Message Template with buttons
Audiences
Create Opt-ins (Subscribers) using Landbot API
Opt-In block for WhatsApp 🚀
Opt-in Check Block
WhatsApp Bot Creation - Best Practices and compatibility guide
Build a WhatsApp Bot - Best Practices and User guide
Build a WhatsApp Bot - Best Practices for Developers
WhatsApp bots - Feature Compatibility Guide
Types of Content and Media you can use in WhatsApp 🖼
WhatsApp - How to direct a user through a different bot flow on their second visit
WhatsApp - Get user out of error message loop
Javascript in WhatsApp
How to calculate the number of days between two selected dates (WhatsApp)
Creating a Loop in WhatsApp
AI in WhatsApp
Send Automated Message Templates based on Dates
Enhancing WhatsApp Bots with Delayed Responses Using External APIs
Different ways to format numbers with JS (WhatsApp)
Notify Teammates of Chat via WhatsApp
Creating a Simple Cart in WhatsApp
1. WhatsApp Article Directory
2. WhatsApp Integration FAQ's
Customize and embed your WhatsApp Widget
Other Channels - Messenger and APIChat
Facebook Messenger
The Facebook Messenger Ultimate Guide
Types of content you can use in Messenger bots 🖼
How to Preview a Messenger bot
Facebook Ad connected to Messenger Bot
API Chat (for Developers)
How to create an API chat bot and set up the Hook Url
Building a Slack APP Bot with Landbot APIChat and Node JS
Build a Telegram Bot with Landbot APIChat and Node JS
Duplicating bots
Metrics and Data Management
Metrics Section
How to export the data from your bots
Export data: How to open a CSV file
Bot's Analyze Section
For Developers & Designers
CSS and Design Customizations
Dynamic Customizations
How to change Avatar dynamically (Landbot v3)
Dynamically Change a Bot's Background
Dynamically Change Any Style
Embed Customizations
How to "send" a user to a specific point in the flow with Javascript and with the API
Modifying Embed Size
Load script and display bot on click button
How to launch a Landbot by clicking a button
Open LiveChat bot as soon as page loads (3 ways)
Change Landbot custom CSS dynamically from parent page onload
CSS Customization Examples
CSS Customization Examples: "Back to School" Theme
CSS Customization Examples: Call To Action: WhatsApp
CSS Customization Example: "Lead Gen"
CSS Customization Examples: "Translucid"
CSS Customization Examples: "Minimalist" Theme
CSS Customization Examples: Carrd Embed Beginner
Make Persistent Menu Appear During the Flow
CSS Customization Examples: Video Bubble
CSS Customization Examples: CV Template
Design Customizations
How to use Google Fonts in Landbot
CSS for Typewriter Effect
Proactive Message Customizations with Javascript and CSS
Landbot v3 - Web CSS - RTL
Hide time stamp (under avatar)
How to remove Landbot branding
HTML Template for Emails
Widget/Bubble Customizations with Javascript and CSS
Detect if a visitor is on Mobile/Tablet or Desktop
Customized display in the bot
How to display an HTML Table and a List in Landbot v3 web
Progress Bar Workaround
Add a Chart (with Chart JS library) in your Landbot
How to embed a .gif file inside a message
Different ways to embed Videos in Landbot
Pop up modal to embed third party elements
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
Recommended Image Sizes
Dynamic Data CSS
Form Block CSS
Multi Questions CSS
Get started guide for CSS Design in Landbot
Landbot APIs
APIs
Create an SMS bot with ClickSend and API Chatbot
reply from Slack: How to create an integration to allow agents reply WhatsApp users from Slack (with Node JS)
MessageHooks - Landbot Webhooks
Javascript and SDK
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) (web only)
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)
Dynamic Data in WhatsApp (Get Index Array selection)
Get the array's index of the user selection and extract information from array
How to redirect visitors to a URL (web only)
How to add a Click-to-Call/Email/WhatsApp button
How to disable a bot
Airtable usecase: Create an event registration bot with limited availability
Get the time between certain messages
How to calculate the number of days between two selected dates
Reservation bot with Airtable
Workarounds & Codes
How to Detect Visitors Browser
Proactive message on mobile
Conditional Welcome (Non-embedded bots)
Conditional Welcome: Direct the Flow of Your Bot Based on External Parameters
Two-Step Email Verification
Different ways to format numbers with JS
Trigger Event if User Abandons Chat
Calculate Distances in WhatsApp
Customized Behavior in Mobile Browsers
Trigger Event if User Abandons Chat Using AWS
Launch Bot On Exit Intent
Display Bot During Business Hours Only (Livechat & Popup)
Delete Customer Data in Flow
Cookie consent banner (full page / full page embed)
Add Captcha Verification (Non-Embedded Bots)
Trigger a Global Keyword with JS (web v3)
Create a Scale out of Buttons - Workaround
How to pass WordPress logged in user data to Landbot
Create Dynamic Shopping Cart with JS and CSS
Set the flow depending on the url path (for embedded landbots)
Generate a URL that has variables from user answers
Resume flow based on external process with Landbot API (Request, Set, Go)
Popup on Exit Intent
Embed Google Maps
Detect if bot was opened
Launching a bot depending on browser language
How to set up questions with a countdown
Creating Masks for User Input (2 examples)
Set a timer to get the time spent during the flow
More Topics
Table of Contents
- What can I do with the Dynamic Data Block?
- What I need to use the Dynamic Data block?
- How to set up the Dynamic Data block?
- Examples of Dynamic Data in use:
- How to display products using Airtable as a database (Cards & Arrays of Objects)
- How to display a list of States using a mock database with myjson.com (Buttons & Arrays of Objects)
- How to create an Array with Javascript (Code block) and display it with the Dynamic Data block
- How to display a CSV list as Autocomplete (Autocomplete & Arrays of Objects)
- for WhatsApp
- for Messenger
- FAQs:
- All Categories
- Integrations with Landbot
- External API REST
- Dynamic Data (Arrays)
Dynamic Data (Arrays)
Updated
by Pau Sanchez
- What can I do with the Dynamic Data Block?
- What I need to use the Dynamic Data block?
- How to set up the Dynamic Data block?
- Examples of Dynamic Data in use:
- How to display products using Airtable as a database (Cards & Arrays of Objects)
- How to display a list of States using a mock database with myjson.com (Buttons & Arrays of Objects)
- How to create an Array with Javascript (Code block) and display it with the Dynamic Data block
- How to display a CSV list as Autocomplete (Autocomplete & Arrays of Objects)
- for WhatsApp
- for Messenger
- FAQs:

What can I do with the Dynamic Data Block?
Sometimes we need to display a list of items not static that can change with time and be updated; it means that we cannot set up a fix number of buttons or create flows for all the eventualities. The Dynamic Data Block allows you to pull information from an external source in the shape of an Array and display it to your users.
The example below is one of the ways that we can display such data
Final view in Landbot 3:

What I need to use the Dynamic Data block?

What you need is an Array. This is a special variable format that can be found in the Webhook block:

How to set up the Dynamic Data block?
Select Array to iterate
First of all you will need to select from the available variables which one you want to store as Array:


It's an Array of

- Strings
- Objects
Show data as
You can show the data in two ways: buttons (when is an Array of Strings and an Array of Objects) or Cards (only Array of Objects) or Autocomplete (Array of objects and Array of Strings):

- Buttons
Final view in Landbot 3:

- Cards
Final view in Landbot 3:

- Autocomplete
Final view in Landbot 3:

Type the key of the (only for "Arrays of Objects"):

In this fields you will need to type the path to the Key of the value you want to reach
- Text for the button: This will be the text that the user will see, (required)
- Value you want to Save on selection: This will be the value, once the user has selected an option, the variable will save for later use (required)
- Emoji (only Buttons): If there is a key with the value of an emoji
- Image (url): If there is a url to an image
- Link to external url: If there is a link that once the user clicks will open another tab
Save the user selection in the variable:

Save the user selection index in the variable:

You can store in a variable (number type) the index of the array based on the user selection. In case you want to see an example please check this article: Get the array's index of the user selection and extract information from array
How to set up the path to the key I want to display
In the section Type the Key of the you need to fill it with the path of the object to reach the key. It works like in the webhooks section when you save a value, please check the examples below:
{
"id": "rec0zJUsagrWDPbIt",
"fields": {
"Name": "Verner Panton Light",
"Picture": [
{
"id": "attd96874f6c7d4a3",
"url": "https://dl.airtable.com/cDFiqPfIS2WBqpG8UOlS_pantonlight3.png",
"filename": "pantonlight3.png",
"size": 123195,
"type": "image/png",
"thumbnails": {
"small": {
"url": "https://dl.airtable.com/RQ2LGSlSPiEJzhhiPKas_small_pantonlight3.png",
"width": 49,
"height": 36
},
"large": {
"url": "https://dl.airtable.com/hp8DcILsRIKQ1NFLFYVs_large_pantonlight3.png",
"width": 256,
"height": 190
}
}
}
]
},
"createdTime": "2014-09-26T01:46:24.000Z"
}
Here are different scenarios for the JSON above:
To get to the value "Verner Panton Light" the path will be fields.Name
To get to the value 123195 the path will be fields.Picture.0.size
To get to the "2014-09-26T01:46:24.000Z" the path will be createdTime
How to store multiple-choice user selection as an array

You can save the options (in a web bot) as an array. But bear in mind that it will store the key that is used as a a text:
So with this set up:

You will have this result:

Examples of Dynamic Data in use:
DEMO LINK FOR THE FOLLOWING CASES
How to display products using Airtable as a database (Cards & Arrays of Objects)
Airtable is really handy when it comes to have a solution similar to Google Spreadsheet and at the same time we want an easy to use API. For this example we are going to use an Airtable Template called "Product Catalog & Orders" to display our products. And what we want is to show the Name and a Picture.

From the Help section we will go to the API Documentation

Once there we will get the API Key we need to use, clicking on the left panel in Authentication and switching on Show API Key

Now, we can set up our Webhook. In this case, as we are going to be interested only in the fields Name and Picture, the Endpoint (url) we will use is:
https://api.airtable.com/v0/app2SCya7mL97tUPK/Furniture/?fields[]=Name&fields[]=Picture

To save the Response, we will save the Array of Objects in the variable "arrayforniture":

Now the Dynamic Data block:

For the key values we want to display:

Please note how we wrote the path of the Name and the Picture url:
We need to check the JSON object so we set up the path:
For name fields.Name:

For Picture url fields.Picture.0.url:

And the result will be as follows:
Final view in Landbot 3:

How to display a list of States using a mock database with myjson.com (Buttons & Arrays of Objects)
One easy way to create a list and save it instead of a database could be with a JSON in a service like myjson.com. In this example we will use a JSON with all the US States.

- Here is the flow:

- To set up the Webhook that will GET the JSON with the list of US States from myjson.com we will need to do as follows:
1. Copy the url from myjson.com once the JSON is saved:

2. Paste it in the Webhook url and select GET:

3. Press TEST to check if everything is correct and to be able to select the variable where you are going to store the Array:

4. Select in which variable are you going to Save the response with the list of states, remember that to be able to use it in the Dynamic Data block you will need to use the Array format:

5. Last you will need to select such variable in the Dynamic Data block

Here is the final result:
Final view in Landbot 3:

How to create an Array with Javascript (Code block) and display it with the Dynamic Data block
This could be the fastest (and laziest) way to set up a list of buttons or cards. You just need a middle step to do this hack. The rest is easy:
- This will be the flow

- With the Code block, we will set up the variable with the value of an array of objects
Here is the code used:
var theArray = [{"text":"Purple Cow","img":"http://t2.gstatic.com/images?q=tbn:ANd9GcQfO1oSrMgqxOQ-iotn3VqS0iZrhHKMYCmtO_bnKFeuI4oSeMda"},{"text":"Linchpin","img":"http://t3.gstatic.com/images?q=tbn:ANd9GcQDnmRPvn3nUGixmfymqSZo9lG7ikFDSAz26os3z7OU1tRGPl76"},{"text":"The dip","img":"http://t0.gstatic.com/images?q=tbn:ANd9GcTFgeD2uujLgTjHlv_hSvhybir42KzLwddT02XlGmlMaTYuPwrn"}]
Landbot.exec('landbot-custom-data',{ 'myarray':theArray})
- Now between giving a value to a Landbot variable (myarray) and using it, we need a step in between: a user input. For this example we use a YES/NO Question
- For the Set up of the Dynamic Data we do as follows:

In the step above, in the "Select Array to iterate" if you haven't created the variable before you will need to do it now. Remember it needs to be format Array!
And to display and save:

- And here is the final result:
Final view in Landbot 3:

How to display a CSV list as Autocomplete (Autocomplete & Arrays of Objects)
For this example we are going to use a CSV that we will transform into a JSON, upload it to an external service that we will use to create our Autocomplete. The CSV will be a list of Country Capitals, here it is the original CSV.
- We will select the whole CSV content
- We are going to use the CSV to JSON converter, we just need to paste the CSV and select "CSV to JSON"
- Now we just generated a JSON that we will upload to another service where it will be the base for our Autocomplete. Copy the whole JSON generated
- Go to the Set Variable block an create a Variable called Capitals that have the Array format and paste the JSON generated
- In the Dynamic Data block we do the following set up:
And to select the Keys:

And the final result will be:
Final view in Landbot 3:

for WhatsApp
CAN be displayed as a list of choices (the same as the “buttons” block) but CAN NOT be displayed as autocomplete/picture choice.
We offer a Brick Workaround that would help you to retrieve the index and values, depending on the user input. Please check this link
for Messenger
CAN be displayed as a list of choices (the same as the “buttons” block) but CAN NOT be displayed as autocomplete/picture choice.

And this set up:

It will be displayed like this in Messenger:

FAQs:
Can I use Google Spreadsheet as my database?
Yes, you can, but Google Spreadsheet doesn't offer a REST API and you will need to use third party tools. That is why we recommend for this case of situation Airtable like in the example above
Can I create Arrays with the Set Variable block and use them with the Dynamic Data block?
No, currently this option is not available. But you can do it via Javascript if needed, please check the example above
Can I avoid displaying duplicated items?
No, the Arrays are displayed as they are, so in case you want to display unique values, you must work on the data before is displayed or use more filtered steps