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
- All Categories
- Landbot Channels - Whatsapp, Messenger and APIChat
- API Chat (for Developers)
- Build a Telegram Bot with Landbot APIChat and Node JS
Build a Telegram Bot with Landbot APIChat and Node JS
Updated
by Pau Sanchez
Building a bot with our APIChat bot channel, allows you to build bots for other platforms like Telegram, using our simple visual builder interface. You just need to connect both platforms webhooks and translate the messages flowing from one side to the other, and we will show you how to do it here:

In Landbot
Creating an APIChat bot in Landbot builder
Once in the main dashboard, press BUILD A CHATBOT

And select APIChatbot

And the visual builder will create your first bot:

The best flow to get started and testing, would be one without media, and 2 messages:

Set up Ngrock To connect Landbot Hooks
We will use Ngrock to funnel the request from Landbot hooks, to do so from your terminal use this command:
ngrok http 80
We will have a url generated by ngrock were we can funnel temporarily our requests:

This is the url we will use:
https://fe45921740fe.ngrok.io
As we will funnel webhooks from Landbot and Telegram we will add customise the route:
https://fe45921740fe.ngrok.io/landbot_hook
Creating a Channel to receive Landbot Hooks
Now let's go back to Landbot, to the Channels section, where we will link the new created bot:

Select API

Select CREATE A NEW CHANNEL

In this screen we will add first the recently created url by ngrok, we can change it later if needed:

And press CONFIRM

Once is confirmed, we will have our Channel created, as you can see an Auth Token will be generated:

Now is time to link this channel to the bot we created early on, to do that press LINKED BOT:

Now, press the dropdown to search for the bot:

Select the bot and press Link Bot and press CONFIRM, and your bot will be linked to this channel. You can edit after again the details if needed.
Using Postman to trigger APIChat bot
Bots needs a message from the user to be initiated, to send a message we will use the following code:
curl --location --request POST 'https://chat.landbot.io/v1/send/' \
--header 'Authorization: Token <AUTH TOKEN GENERATED WITH THE CHANNEL>' \
--header 'Content-Type: application/json' \
--data-raw '{
"message": {
"type": "text",
"message": "Hello"
}
}'
So we will have our response, bear in mind that if no "id" is given to the user, Landbot will create a new one for you:

Inspect Hooks
We will use now the ngrok inspector to check from: http://localhost:4040/inspect/http
And as you can see below we will receive the first webhook from Landbot:

Great now we have Landbot APIChat receiving messages via API, and sending with to the hook the message that is designed in the logic
In Telegram
Create bot from BotFather
Now we can create a Telegram bot, to do that we will reach from the Telegram APP the bot father at botfather

Once there, we will use /newbot to start createing a new bot, just follow the instructions given by the botfather, by giving a name to the bot and to the username. Once we done that, botfather will give us an id. That id will be used after to set up the hooks and the auth for the node js api requests
Add Webhook with Postman
Now we will use Postman to set up the webhook url for the bot we just created, using the id that the botfather just gave us and the url from ngrock, but with a specific path. Below you can see an example
curl --location --request POST 'https://api.telegram.org/bot<id given by the bot father>/setwebhook' \
--header 'Content-Type: application/json' \
--data-raw '{"url":"https://fe45921740fe.ngrok.io/telegram_hook"}'

In case you want to check the status of that webhook here is the request:
curl --location --request GET 'https://api.telegram.org/bot<id given by the bot father>/getWebhookInfo'
Test and Inspect Hooks
Now if you go to the bot you created in Telegram, and send a message, you will be able to see in the logs from ngrock (http://localhost:4040/inspect/http) the message details

As you can see, you will get some 502 status requests. Don't worry, once the our NODE JS APP is set up accordingly we will fix that.
Connect Landbot and Telegram with Node JS API
Create Node project
To do that, we will use the terminal of Visual Studio Code, and set up a node project in a folder called Landbot_Telegram :
npm init -y
Main file
For this example all the code needed to communicate between both platforms, will be in a file called index.js, that we will add to our recently created folder.
touch index.js
and install the required NPM packages
npm i express body-parser axios
Below is the code that you can copy and paste for your project
Please feel free to customise the code to your needs
NPM Packages
For this project we will use express, body-parser and axios.
npm i express body-parser axios
Auth and tokens
The index.js file already has the variables created, you just need to replace accordingly:
// LANDBOT APIChatbot details
const landbot_token = "XXXXXXXXXXXXX" // Landbot API Channel TOKEN
const landbot_url = "https://chat.landbot.io/v1/send" // Landbot API base url
// OTHER PLATFORM API details, in this case Telegram
const telegram_bot_id = "01234566789:XXXXX_XXXXXX_XXXXXXXX" // Bot id given by the botfather
const telegram_url= "https://api.telegram.org/bot" // Telegram API base url
node index.js to Run locally
Now initiate the express app from your terminal
node index.js
Test
Once is initiated, send a message from Telegram. That will trigger the app, and send a message to Landbot, and Landbot will reply with a message that will be sent back to Telegram
In the first attempt, Telegram might trigger twice Landbot bot (due to the /start test). In the following message it will be corrected

And you can see how those message had been sent by both platforms in the ngrock logs to the specific hook endpoints:

Important Tips!
Order of the messages (received and sent)
Even if messages by default are sent to the hook in order, as you have seen in the code, there might be times where it comes in a different order. The best approach will be to check the timestamp of the message as a reference.
At the same time, be aware that Telegram API doesn't offer the possibility to set up a prior order has how the messages have to be displayed.
For that reason, short sequences offer much better results
First block ${body}

The best approach when building bots for channels like Telegram, where the user has free input to start interacting with the bot, is to capture the first input. Thanks to do that we will be able to set up conditions.
To capture the firs input, please check this article
Individual messages and sequences length

When building the bot, you can create blocks that contains more than one message or media, please avoid it. It will be much simpler to control the message delivery, order and process
Sequence of messages, are going to start after a user input/selection block is required and stop in the next user input/selection block. For better control of the order of the messages, avoid sequences of more than 4 blocks. The ideal built is like in the picture above.
Global Keywords block

The global keywords block allow you to set up paths, based on a keyword input from the user (not bot or agent). It is very handy to redirect the user to specific flows. For more information, please check this article
When used, global keywords takes priority over other inputs used. Be careful to do not use the same keywords that might be used in other blocks like Buttons
Keyword Options

Very similar to the buttons block, this block has been designed for open text channels like Telegram. It offers the chance to select a number or a text. For more information, please check this article
Chat Section

When testing the bot, it is very handy to see what is going on, like the messages and variables that had been used. Also, if you want to close the chat session to start from the beginning it will be simple to do it from this section. Please check more about the chat section here
Ngrock
If you choose to work with Ngrock in the free mode you must be aware of a couple of things that will help you to spot some issues:
1. The url will change after few hours. It is normal that after few ours of testing to forget about it.
2. Ngrock has a limitation of requests per second. That is important as messages coming from the bot (landbot) will send many messages at once, and Ngrock might stop working as expected. When testing be aware of it