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
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)
Lead Scoring block
Persistent Menu
Jump To block
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 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
Embed 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
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 trigger
How to extract data from an external source with Integromat and use it in Landbot
Integrately
Nexmo
Mailchimp
Pabbly
Paragon
PDF Monkey
Pipedream
Salesforce
Segment
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
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 section
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
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
...βΆ, π, π― 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
Recommended Image Sizes
Get started guide for CSS Design in Landbot
CSS Customization Examples: "Back to School" Theme
CSS Customization Example: "Lead Gen"
CSS Customization Examples: "Translucid"
CSS Customization Examples: "Minimalist" Theme
Landbot APIs
APIs
reply from Slack: How to create an integration to allow agents reply Whatsapp users from Slack (with Node JS)
Send Transcript of Chat (MessageHooks & API) via email
MessageHooks - Landbot Webhooks
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) (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)
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 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 (Web)
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 Discount
Table of Contents
- All Categories
- Integrations with Landbot
- Google Maps
- Calculate Distances With Google Maps API
Calculate Distances With Google Maps API
Updated
by Abby
By first extracting the data from our user's address and then creating a function we'll be able to calculate the distances in kilometers from one point to another.
Here's what the flow will look like:

Cloud Console
Go to the Google Cloud Console, enable your APIs, and activate billing.
You'll need to activate 'Places API', 'Maps JavaScript API', and 'Geocoding API'.


Please check out theirΒ official documentationΒ for more information.
Address Block
Set up the 'Address Question' block,Β here's how.
Encode Address
Next, you'll need to encode the address in order to send the request to Google Maps, you'll add a 'Code block' with the following snippet:
window.uriaddress = encodeURIComponent("@{address}");
this.setCustomData({ newvar: uriaddress});
console.log(uriaddress);

User Input
In order to make use of the variable we created in the previous step we need a user input. This can be any question type, but here's what we used:

API Key
Add your API key again.

Webhook Request
Now we'll do a webhook request with our encoded address, you'll need to connect the previous block to a 'Webhook block' and add the following in the input section on top, selecting 'Get':
https://maps.googleapis.com/maps/api/geocode/json?address=@{newvar}&key=@{googlemapsapikey}

You can thenΒ test your requestΒ and save 'Results' as @response.

You can connect the red flow to an error message, or back to the address questions block, and then connect the green flow to the following:
Set Our Latitude and Longitude
We need to set our own latitude and longitude, we'll save them at @lat1 and @lon1, we'll connect these set variables to the code block:

Code Block
Next, you'll need another 'Code block', in this block we will set the variables as well as calculate the distances

In this block you'll add the following snippet:
var True = false;
var False = true;
var None = null;
var response = @{response};
var details;
console.log(response);
if (response[0].hasOwnProperty('property1partial_match') && response[0].partial_match === True){
details = "partial match";
console.log("partial match")
} else if (response[0].types[0] == "postal_code" || response[0].partial_match === False || response[0].partial_match === undefined ){
details = response[0].address_components
console.log(details)
} else {
details = "no results";
console.log("no results")
}
console.log("details:",response)
var details_Address_Obj = {}
if (details !== "no results" && details !== "partial match"){
for (var i = 0; i < details.length; i++){
details[i][details[i].types[0]] = details[i]["long_name"]
details_Address_Obj[details[i].types[0]] = details[i][details[i].types[0]]
}
details_Address_Obj["formatted_address"] = response[0]["formatted_address"]
details_Address_Obj["latitude"] = response[0].geometry.location.lat
details_Address_Obj["longitude"] = response[0].geometry.location.lng
console.log(details_Address_Obj)
this.setCustomData( {
address_results: "Ok",
address_administrative_area: details_Address_Obj.administrative_area_level_1 || " ",
address_country: details_Address_Obj.country || " ",
address_formatted_address: details_Address_Obj.formatted_address || " ",
address_latitude: details_Address_Obj.latitude || " ",
address_locality: details_Address_Obj.locality || details_Address_Obj.postal_town || details_Address_Obj.administrative_area_level_2,
address_longitude: details_Address_Obj.longitude || " ",
address_sublocality: details_Address_Obj.political || " ",
address_postal_code: details_Address_Obj.postal_code,
address_route: details_Address_Obj.route || " ",
address_street_number: details_Address_Obj.street_number || " "
})
} else if (details === "no results"){
this.setCustomData ({
address_results: "Fail"
})
} else if (details === "partial match") {
this.setCustomData( {
address_results: "Partial"
})
}
//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
let lat1 = @{lat1};
let lon1 = @{lon1};
let lat2 = details_Address_Obj.latitude;
let lon2 = details_Address_Obj.longitude;
let distance;
function calcCrow(lat1, lon1, lat2, lon2)
{
console.log(lat1, lon1, lat2, lon2)
var R = 6371; // km
var dLat = toRad(lat2-lat1);
var dLon = toRad(lon2-lon1);
var lat1 = toRad(lat1);
var lat2 = toRad(lat2);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distance = d.toFixed(1);
}
// Converts numeric degrees to radians
function toRad(Value)
{
return Value * Math.PI / 180;
}
calcCrow("@{lat1}", "@{lon1}", "@{lat2}", "@{lon2}")
this.setCustomData({distance:distance});
User Input
After every code block we need a user input before the variables can be used within the bot, here's what we used:

Add Condition
We then set a 'Condition' using one of the variables from the Javascript block, we'll connect the green arrow to the next point in your flow and the red to an error message or the address block, up to you!
If this condition is true then your flow will continue. Remember the conditions are case-sensitive so it's important to input exactly as it is below:

Code Block
After we've set our variables we'll connect them to a code block where we'll calculate the distance and create a new Landbot variable

Here's what we need to put inside of the code block:
//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
let distance;
function calcCrow(lat1, lon1, lat2, lon2)
{
console.log(lat1, lon1, lat2, lon2)
var R = 6371; // km
var dLat = toRad(lat2-lat1);
var dLon = toRad(lon2-lon1);
var lat1 = toRad(lat1);
var lat2 = toRad(lat2);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distance = d.toFixed(1);
}
// Converts numeric degrees to radians
function toRad(Value)
{
return Value * Math.PI / 180;
}
calcCrow("@{lat1}", "@{lon1}", "@{lat2}", "@{lon2}")
this.setCustomData({distance:distance});
User Input
Remember to create a Landbot variable with Javascript we need a user input after the code block, which is why we add the button with only one option.
That's it! Now your distance will variable will be available in Landbot with the name @distance.
Here's what the results look like:
