Table of Contents

Building a Slack APP Bot with Landbot APIChat and Node JS

Pau Sanchez Updated by Pau Sanchez

Building a bot with our APIChat bot channel, allows you to build bots for other platforms like Slack, 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:

Using 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 Slack 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 by sending a message (like a user)

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"
    }
}'

We will use the import raw text option in Postman

Remember to change edit to add the token you just generated in the creation of the Channel.

And the token added, make the Post request and 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 Slack and your Node app

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:

Scroll down to fill the details to customise the look of your App:

Set the scopes

Select from the side panel OAuth & Permissions:

Scroll down to Scopes:

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

Add chat: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:

Now, go back to your Slack app. Search and select the APP we just created:

Send Message as the APP

To send a Message as our APP, first we will try with our integration:

First we need to find out our Channel id. To do that we will, press Right click on our app:

And press Right Click:

Paste the url in a browser, the last part is the Channel ID:

Test send message via PostMan with the channel id, and the OAuth we created early on:

curl --location --request POST 'https://slack.com/api/chat.postMessage' \--header 'Authorization: Bearer xoxb-7840810325-1570401658691-wmBIRKA7I8hPMTqK9d5Yd8wf' \--header 'Content-Type: application/json' \--data-raw '{ "channel": "D01H4QLTWC9", "text": "Hello, world"}'

And you will see the message:

Set up basic Node APP

In the next steps we need to set up our Slack hook route to subscribe to the events happening to our Slack App, however, Slack needs to validate the endpoint with a "challenge". For that reason we will create the basic set up to be able to pass this challenge.

Let's create a new folder for our node app from the terminal

npm init -y

We will install the required packages for this app:

npm i express body-parser axios

And create index.js

touch index.js

In this index.js file we will add the initial code to be able to capture and respond to Slack webhook challenge:

Then initiate your app

node index.js

Once your app is up and running and listening, thanks to ngrock, we will continue to set up Slack webhooks in the Event Subscriptions

Subscribe to Events and Interactions

Go to the Event Subscriptions section in the side panel of the Slack app dashboard

Turn on to Enable Events

And now we will use the ngrock url with our "slack_hook" route:

And make sure your endpoint is verified according to the challenge:

Once the Request URL has been verified, select "Subscribe to bot events":

Press "Add Bot User Event":

Search for "message.im" and select it:

And press "Save Changes"

Then Slack will prompt you to "reinstall your app":

Press the link to "reinstall your app":

And select Allow:

Now Slack is ready to send you events once the user types and send in the app created. Let's adapt our code in index.js file to receive the first event (that is not a challenge):

Now, once the changes had been done in the index.js file and your app is again listening, return to Slack, and send your first message to the app:

If you return to the terminal you will see printed the event that Slack has sent to us:

And also, you will be able to track the request in ngrok

Finally, we will add also to the app the option to send us events if the user presses a button in Slack. To do so, go to "Interactivity & Shortcuts":

And switch On:

Add the same Request URL we used before, this time won't send a challenge :

And press Save Changes

And that's it in the Slack APP settings. Bear in mind that you might need to change the url if ngrock expires.

Main file NODE APP

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.

Below is the code that you can copy and paste for your project

"delayLoop()" One of the main issues is to control the sequences of messages sent from Landbot. In this code we used a simple approach that triggers a setTimeout to delay the sending of messages giving "time" to gather and sorting the messages before are sent to Slack.
Please feel free to adapt this code to your production needs.
This file is an example of a simple integration, it supports sending Text messages to Landbot, and sending from Landbot some features like Photos, GIFS and Buttons.

Please feel free to customise the file to your needs

Auth and tokens

The index.js file already has the variables created, you just need to replace accordingly:

// LANDBOT APIChatbot details
const landbot_token = "xxxxxxxxxxxxxxx" // Landbot API Channel TOKEN
const landbot_url = "https://chat.landbot.io/v1/send" // Landbot API base url// 
OTHER PLATFORM API details, in this case Slack
const slack_token = "xxxx-12312312312" //Oauth
const slack_url= "https://slack.com/api/" // Slack API Send message base url
Builder Edit

Before we test the bot integration, will be better if we edit the bot to display simple two messages:

Also, before the test make sure the url endpoint settings are correct in both platforms (Slack and Landbot)

Test

Once is initiated, send a message from Slack. That will trigger the app, and send a message to Landbot, and Landbot will reply with a message that will be sent back to Slack

And now your Slack bot is ready to go! Please check the tips below they will help you to improve the bot

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 Slack 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 Slack, 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 Slack. 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.

Once the session is again working, remember to change the url in Landbot and Slack

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

How did we do?

How to create an API chat bot and set up the Hook Url

Build a Telegram Bot with Landbot APIChat and Node JS

Contact