Slack Bot Tutorials

In this ChatFlow tutorial, we start by creating a simple Slack bot that echos your message. In addition, we create a voting bot with advanced slack abilities, such as:

  • Interactive messages
  • Custom slash commands

Here is an example of the bot in action:




By the end of this tutorial, you will be able to:
  • Connect a ChatFlow app to Slack.
  • Understand the input and output of the Slack In and Out nodes
  • Configure interactive messages and custom slash commands.

A Simple Echo Bot

Note

To connect ChatFlow to Slack, you need to create a new bot and its input credentials into the slack nodes.

Slack Echo Bot Tutorial Video




1. Create a New Bot in Slack

  1. Visit creating a new bot user page to create your bot.
  2. In the username field, enter your new bot (ex. @echo). Then click on the “Add bot integration” button.
_images/newBot.png
  1. Copy the Bot API Token to your clipboard.
_images/botToken.png

2. Create a New ChatFlow Application with Slack Nodes

  1. Create a new application on applications page.
_images/slack-new-app.png
  1. Under “Start with a clean project”, enter your project’s name and then click on create.
_images/create_echobot2.png
  1. Click on the app’s name in your app list to enter the Chatflow editor.
_images/echobot_applist2.png
  1. To make your app nice and tidy, you can enable grid in the Settings/view menu.
_images/twilio-snap-grid.png
  1. Find the Slack In and Slack Out nodes in the Node Library and drag them onto the canvas. Connect them as you see on image below:
_images/slackEchoSetup.png

3. Configure The Bot

  1. Double click the Slack In Node, select “Add new selectbot-controller…”, and click the “Edit” button.
_images/slack-config-popup.png
  1. Enter your “Slack Bot Token” name under the “Name” field (ex. Echo Bot).

Note

Naming your “Slack Bot Token” allows you to save. This will allowing that configuration to be used by other nodes.

  1. Paste the Bot API Token from your bot’s Slack Bot page into the Token field and Click the “Add” button.
_images/botTokenPaste.png
  1. Double click the Slack Out node and select your “Slack Bot Token” from the drop down menu:
_images/selectEchoBot.png

5. Deploy the Application

  1. Click on deploy button in the upper right hand corner to deploy your application.
_images/slack-deploy.png

After the application is deployed, your bot should be online. It will echo the message you sent to it.

Note

Slack limits the number of free applications/bots. If you reached your quota, you should: * Save the current application

  • Go to applications
  • Click on “Manage” in the right hand corner
  • Under “Manage”, click on “custom integrations”
  • Under “Custom Integrations”, click on “Bots”
  • Disable other bots you are not using by clicking on the “Edit” button and the clicking on “Disable”
  • Enable your Slack bot application by clicking on the “Edit” button and the clicking on “Enable”

Slack In and Slack Out Nodes

This section of the tutorial explains the output of the Slack In node and the required formats for the Slack Out node input.

Slack In

The Slack In node receives input from Slack and outputs the following msg:

1
2
3
4
5
6
msg = {slack: raw_message
       payload: payload
       kitt: {_session_id: slack.user + '.' + slack.team + '.' + slack.channel,
              _user_id: slack.user
              }
       }
Variable Type Description
payload String Text of the incoming message object
slack Object The raw message from slack
kitt Object Used by the Router node for session management and timeout

Slack Out

The Slack Out node sends the message back to Slack. It expects message with the following properties:

1
2
3
msg = {slack: raw_message_properties
       payload: payload
       }
Variable Type Description
payload String Text of the incoming message object
slack Object The raw message from slack

Hint

See the Slack messages API for more details.

Note

If payload it is not set, slack.text is used.

Advanced: Slash Commands and Interactive Messages

In this part we will show you how to use more advanced bot features. You will learn how to create application that uses: * Custom slash commands * Interactive messages

We will create a small voting game. The idea is simple: bot will show all members of your slack channel two pictures of two different cats. They can cast their vote by responding to the bot.

1. Create a Slack Application

  1. Go to the Slack Applications page and click on “Create New App”.
  2. Set the application name as “ChatFlow Cat Choose”.

Note

The fields “App Name”, “Short Description” and “Long description” are required

  1. Click on “Create App”. (“Redirect URI(s)” will be set later.)
_images/createSlackApp.png
  1. Click on the “Bot users” link on the left hand side.
  2. Click on “Add bot to this app”.
  3. Enter “chatflow_cat_choose” into the default username field and then click on “Add bot user”.
_images/addBotUser.png

We will later use this bot for slash command and interactive messages.

2. Import the “Cat Choose” Application into Chatflow

  1. Import the application to ChatFlow by either:
  • Download JSON our application and import the project on the applications page, or,
  • Use the “Slack - Cat Choose” sample application under “Use a Sample Project” when clicking “CREATE NEW APP” on the applications page.

3. Set Up NLU

  1. Download NLU JSON and import it as an NLU application.
  2. Go to NLU and import the NLU JSON.
_images/import-JSON.png
  1. Click “Deployment Information” and copy the Deployment URL.
_images/deloyment-url.png
  1. Back in Chaflow, open the KITT.AI node and paste the Deployment URL.
_images/kitt-ai-node.png
  1. Add {{{payload}}} to the end of the url so the final string will look like::
    http://api-nlu.kitt.ai/v1/api/900584f4-7360-479c?token=xxx?q={{{payload}}}
_images/nluNode1.png

4. Slack App Setup

Now, you need to configure slash command, interactive messages, and the redirect URL for your Slack app. Each one of these features needs a callback endpoint.

We can use the http node to serve as the callback endpoint:

_images/httpNode.png

Each http node has a unique URL.

In the “Slack - Cat Choose” app, there are three callback nodes:

_images/callbackNodes.png

Each of them is an individual HTTPs server that accepts a POST/GET request. Correspondingly, they provide the callback endpoints for slash command, interactive messages, and redirect URL.

Slash Command

The Cat Choose app supports slash commands. Let’s create one.

  1. Click Slash Commands on the left hand side of the Slack Applications page and then click on Create new command. Enter the command’s name “/randomcat” in the command field.
  2. Return to the ChatFlow application, click on the slash command node and copy the “Final URL”.
_images/copyCommandURL.png
  1. Return to the “Create new command” page and paste the “Final URL” into the “Request URL” field.
_images/pasteCommandURL.png
  1. Write a short description about the command (ex. “Shows a random cat”).
  2. Click “Save” to finish.

Interactive messages

  1. On the Slack Applications page, click on Interactive Messages on the left side of the page.
  2. Click “Enable Interactive Messages”.

Note

Interactive Messages require a callback URL once actions happen.

  1. Return to your Chatflow App and double click on “buttons callback” node.
  2. Copy the “Final URL” to your URL to clipboard.

Note

The buttons callback http node will serve as a webhook. It will catch HTTP callbacks from slack whenever a user clicks on a button in a Slack interactive messages.

_images/copyButtonsURL.png
  1. Click on “Enable Interactive Messages” and paste the Final URL on the “Interactive Messages” page.
  2. Click on the “Enable Interactive Messages” button to finish the process.
_images/pasteButtonsURL.png

Redirect URL

We created a simple node chain inside “Cat Choose” application to help you authenticate with your app.

  1. Go to Slack Applications page. Click “App Credentials” on the left hand side. Copy “Client ID”.
  2. Back in ChatFlow, double click the “App credential” node. Paste “Client ID” in the “client_id” field.
  3. Repeat the process for “Client Secret”.
_images/appCredentials.png
  1. In ChatFlow, double click on the “redirect” node, and copy “Final URL” to your clipboard.
_images/copyRedirectURL.png
  1. Paste this URL in two places:
    • In Chatflow, the “App Credentials” node from previous step under the “redicrect_uri” field
    • On the Slack Applications page, The “App Credentials” slack page under the “Redirect URI(s)” field.
  2. Click “Save changes” to complete the process.
_images/pasteRedirectURL.png

5. Connect Your Slack Application with Your Team

When application is ready, you can connect it to your team to see how it works.

Note

You have to be administrator of the team in order to connect the application to the team

  1. Deploy your application.
_images/slack-deploy.png
  1. Go to the Slack Button page and click on “Add to Slack”. Select “ChatFlow Cat Choose” from drop-down menu and check all checkboxes. Then click the “Add to Slack” button.
_images/addToSlack.png
  1. Select your team and channel (ex. #random) and press “Authorize”.
  2. Copy your Bot API Token for your Slack App onto your clipboard.
  3. Double click the Slack In node, select “Add new selectbot-controller…” and click “Edit” button.
  4. Name the “Slack Token” “Cat bot”. Paste the Bot API Token you copied before. Click “Add” button.
_images/pasteCatChooseToken.png
  1. Double click the Slack Out node and select “Cat bot”.
  2. Redeploy your application.
_images/slack-deploy.png

6. Testing the “Cat Choose” application

Once you successfully connected ChatFlow application to your Slack Application, you can test it.

You can write the following text to your bot:

  • “Hello” - the bot will answer with the greeting
  • Mention “cats” - the bot will start the voting game, showing you two cat images, asking you to choose one of them.

You may also try slash command. Write in any chat /randomcat to see a random cat there.