Table of Contents

reply from Slack: How to create an integration to allow agents reply WhatsApp users from Slack (with Node JS)

Pau Sanchez 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:

Later, when we first initialise the app, we will set up the Event Subscription section

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:

  1. 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

  1. 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
  2. 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.
  3. Also, as a sample, we added a Keyword Option, to let the user decide if they want to be redirected to an agent

  1. 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.

To be able to set up the Save Response variable, you need to make a Test Request. As the APP is still not live, we will need to comeback later, once the app has started to be able to Test and set up the response accordingly.
  1. 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:

  1. First we need to go to Integrations:

  1. Select Developer Tools

  1. Select MessageHooks

  1. And again MessageHooks

  1. 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

  1. Trigger ngrock and copy the https url
  1. add the Base url in the config.json file for the temp files:
  2. Initialise the app

  1. Go to the https://api.slack.com/apps and select Event Subscriptions
  2. Add the ngrock url and the path slack_hook:

Once is verified, press SAVE CHANGES

  1. Go to Landbot MessageHooks and add the endpoint needed with the path /landbot_hook:

  1. Go to the bot builder, and change the URL with the /landbot_trigger path:

  1. 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!

  1. 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

  1. 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.

How did we do?

Trigger Event if User Abandons Chat Using AWS

Set Up a Delay Timer in Bot

Contact