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) (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 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
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 (v3)
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
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
Automate.io
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
GTM - How Track Google Analytics Events in Landbot with Google Tag Manager
Landbot in your web with 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 HSM 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
How to build a FAQ chatbot with GPT-3
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 HSM Template 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
Π‘onnecting WhatsApp Business API with 360Dialog
WhatsApp Number Migration / Porting to Landbot
Facebook Business Verification - Best Practices π¬π§
Adding a WhatsApp number to your account
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
Recognise the users input when sending a Message Template with buttons
Audiences
Create Opt-ins (Subscribers) using Landbot API
New 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 capture and use the first user's interaction (input)
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
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
Create a Checkbox in the Welcome Block
Dynamically Change Any Style
Embed Customizations
Open LiveChat bot as soon as page loads (3 ways)
How to launch a Landbot by clicking a button
Modifying Embed Size
Load script and display bot on click 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
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
Hide time stamp (under avatar)
Detect if a visitor is on Mobile/Tablet or Desktop
Proactive Message Customizations with Javascript and CSS
Landbot v3 - Web CSS - RTL
How to remove Landbot branding
HTML Template for Emails
Widget/Bubble Customizations with Javascript and CSS
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
Dynamic Data CSS
Get started guide for CSS Design in Landbot
Landbot APIs
APIs
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 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)
Dynamic Data in WhatsApp (Get Index Array selection)
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)
How to disable a bot
Airtable usecase: Create an event registration bot with limited availability
Get the time between certain messages
Reservation bot with Airtable
Workarounds & Codes
Refillable bottles
How to Detect Visitors Browser
Proactive message on mobile
Different ways to format numbers with JS
Conditional Welcome: Direct the Flow of Your Bot Based on External Parameters
Two-Step Email Verification
Trigger Event if User Abandons Chat (For Non Developers)
Calculate Distances in WhatsApp
Customized Behavior in Mobile Browsers
How to not display Proactive Message to repeating Visitors
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)
Set the flow depending on the url path (for embedded landbots)
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
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
Set a timer to get the time spent during the flow
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
- For Developers & Designers
- Landbot APIs
- reply from Slack: How to create an integration to allow agents reply WhatsApp users from Slack (with Node JS)
reply from Slack: How to create an integration to allow agents reply WhatsApp users from Slack (with Node JS)
Updated
by Pau Sanchez
Bots are great at automating conversations, but sometimes, users need human intervention. Landbot offers a Chat section, where agents can reply from, even though, in some cases a company prefer to deal directly from messaging platforms like Slack. In this article we explain how to set up an integration for WhatsApp bot users, to be replied from Slack thanks to Landbot API and MessageHooks.

replyfromslack description
We are going to describe in this article the steps needed to set up the integration in Landbot and in Slack, and the code from the repository you will need
We will work based on:
Landbot API to send messages to the end user: Link
Landbot MessageHooks to get requests on every event going on in the specific channel where the bot runs: Link
Slack API to send messages to the Slack agent: Link
Slack App Event Subscription to get request on every event going on in Slack
Functionalities and logic of replyfromslack
- The automated part of the conversation from the user with the bot won't be sent to the other platform (Slack)
- Once the user requires Human Intervention, by going through a specific flow, will trigger the creation of a conversation in the other platform (Channel in Slack)
- Part of the bot has a flow designed to stop user of more inputs, trigger the start of the bot, with the Slack variable loop
- Once the first message is sent from the agent in Slack, the Agent API will takeover, and no more automated messages will be displayed.
- Once both conditions are met (Slack Channel created, first agent interaction and message being sent to the user, therefore Agent API takeover) the app as a middleservice will take care of:
1. Reading messages/events from Slack, parse them, filter those that are meant to be sent to Landbot and send them
2. Reading messages/events from Landbot, parse them, filter those that are meant to be sent to Slack and send them
- Messages can be in different formats from both platforms, and can be sent in different ways depending on the platform
- Once the conversation has ended, the Agent, with a specific keyword ("CLOSECHAT"), will be able to :
1. Delete from their account in Landbot a session variable
2. Send the user to a specific step in the flow of the bot, so once the user restarts interacting it will be with the bot
3. Delete the Slack channel to avoid clutter.
Set up in Slack
Now is time to create and app in Slack, that will be installed in the workspace, make sure you have admin rights to do so.
Create APP
Go toΒ https://api.slack.com/apps


Press Create New App and this screen will appear:

Fill the details and select a Slack Workspace, and press Create App
Once your App has been create select Basic Information:

Set the scopes
Select from the side panel OAuth & Permissions:

Scroll down to Scopes:

Under "Bot Token Scopes" press "Add an OAuth Scope":

For the Slack App to reply from, we will need the following scopes to be added:
- channels:manage
- channels:read
- chat:write
- chat:write.customize
- files:read
- files:write
- groups:read
- groups:write
- im:history
- im:read
- im:write
- mpim:read
- mpim:write

Scroll up again and select "Install to Workspace":

Grant permission to access your workspace:

Once installed and allowed, you will have an Auth Token, that we later will use in the config.json file of the app:

Set up in Landbot
Builder bot logic
First we need to prepare the bot logic and flow to be able to handle the user interaction with the agent. Here is a sample of a basic flow:

- The start of the bot will be a Conditional block. This will check if the user has already started a conversation with an agent in Slack. If so, it will stop the bot restarting if the agent didn't takeover yet with the first message
The condition IS SET, will check if the variable (in this case @slack_channel_id) has any value. It will only have a value once it goes through the Webhook block, that is right before the first input for the agent
- As a way to capture the input from the user, between the channel creation in Slack and the first input from the user, we will add 2 Set Variable blocks that will store user inputs that come in ${body} for texts and ${url} for any other media hosted in servers
- Now, is the time for the automated part of the conversation, in this example we ask the name (required if we want to display the name in the Slack channel) and other data, that we also will send to the Slack channel.
- Also, as a sample, we added a Keyword Option, to let the user decide if they want to be redirected to an agent
- Now, that we have the confirmation from the user to be redirected to an agent, we need to set up a Webhook block, that will trigger our app to create a channel in Slack and passing some data about the user
As you can see in the example, we are using ngrock to tunel the request to our local server. Notice that we use the path /landbot_trigger
Also, in the body of the webhook we will send some information:

Among the data in the JSON there are:
@id *required to keep the session between the user and the agent
@name *recommended to be able to display the name in the Slack Channel
@otherdata *recommended, in case you want to display some information to the agent in Slack
And finally, we need to Save the Response:

This variable comes from our app, and is the variable that will keep the control if the user is starting a conversation with the Agent.
- Finally, we will add a Question block to allow the user to make the first input that will be sent to Slack and a Send Message block, to display the user, that must wait
Messagehooks
Messagehooks are in Landbot, what "webhooks" are in other platforms. A simple way to subscribe to all the events going on in a specific Channel where the bot runs. This is the main way we will get the inputs from the user. If you want to know more about MessageHooks, please check this article
In case of WhatsApp (Messenger and APIChatbot too) we need to link the bot to a Channel. We will do it from the Channels section:

If this step is already done, we will create a MessageHook:
- First we need to go to Integrations:

- Select Developer Tools
- Select MessageHooks

- And again MessageHooks
- Press "Add new message hook"
Here is where we will do 2 things:
- Link the MessageHook to the Channel where the bot is linked
- Add the Hook URL, where all the request will be done
Check that according to our app, we expect to get the requests in the path /landbot_hook
Code Repository
Clone the Github Repository containing the project filesΒ "here" and install the npm packages
https://github.com/pausanchez/replyfromslack
App configurations (config.json)
Inside the folder, there is a config.json file, where we will set up the main configurations and data for the app. Here is a description and information of each one:
- landbot_token
example: "123212" *string
This is your Landbot API Token, you will find it in your Landbot Account section (https://app.landbot.io/gui/settings/account)

- landbot_bot_id_redirection
example: "849366" *string
That is the bot id, where you will redirect the user back once the agent finishes. The id will be the number in the URL of the bot builder

- landbot_node_id_redirection
example: "bot_start" *string
This is the block(node id) where you want to redirect the user once it finished the conversation with the agent. To get the id, press right click on the block in the builder, and press "copy reference":

- landbot_control_variable
example: "slack_channel_id" *string
This is the variable we will use for 2 reasons: 1 make sure that we keep the session of the user in Landbot with the right Slack Channel.

At the same time, we will use that variable to make sure the user only triggers the bot once we delete the variable

- slack_app_token
example: "xoxb-78403..." *string
That is the slack app Bot User OAuth Token

- slack_agent_ids
example: "UD9V5TXXX" *string
That is the id of the Slack users that you want to invite to the channel, so they are notified once a channel has been created.
To get the id of a user in Slack go to the profile of the user and press MORE and select "Copy member ID"

- slack_close_chat_keyword
example: "CLOSECHAT" *string
That is the keyword, that once the agent from Slack sends, it will:
1. Delete the control variable
2. Redirect the user to the desired block we set up
3. Delete the conversation in Slack to avoid clutter

- slack_agent_to_mention
example: "<@UD9V5TXXX>" *string
That is the agent you want to mention in the first sentence
- slack_app_channel_name
example: "replyfromslacktestv" *string
That us the name at the beginning of the Slack channels
- slack_base_channel_name
example: "replyfromslack" *string
That is the name of the Slack app
- slack_icon_pic_src
example: "https://files.com/landbot-icon.png" *string
That is the url of the source of the image you want to use as icon for the user in Slack
- baseURL
example: "https://66699b169dbb.ngrok.io" *string
The url generated by ngrock, used to display the temporary files
Initialize the App
- Trigger ngrock and copy the https url

- add the Base url in the config.json file for the temp files:
- Initialise the app

- Go to the https://api.slack.com/apps and select Event Subscriptions
- Add the ngrock url and the path slack_hook:
Once is verified, press SAVE CHANGES
- Go to Landbot MessageHooks and add the endpoint needed with the path /landbot_hook:
- Go to the bot builder, and change the URL with the /landbot_trigger path:
- If is the first time, we will need to finish the set up of the webhook, to save the response. To so we will make a test, with some dummy values, according to the set up in the Body:
And press the Test the request, if everything is set up correctly you will see a 200 status and the response:

Now, scroll down to save the value of "slack_channel_id" in a Landbot variable:

So it will be like this:

Make sure to save the webhook changes, and the bot changes!
- Also, in Slack it will be generated the first channel:

If you want to delete this channel generated during the test of the webhook, you might need to use POSTMAN to make such request:
curl --location --request POST 'https://slack.com/api/conversations.archive?token=<SLACK APP API TOKEN>&channel=<SLACK CHANNEL ID>' \
The Slack Channel Id, can be captured easily from the channel link, just press right click on the channel, and you will be able to capture the url. The numbers at the end are the id of the channel
- That's it, now you are ready to go!
Notes
Media files and documents in the code of the repository are hosted in the local server, open for the developer to set up it's own custom solution and logic.