Slack [archive]
Build a Slackbot with Voiceflow's Dialog Manager and deploy to Heroku
Voiceflow Slackbot
Use Voiceflow Dialog Manager API to run a Slack Bot
Updates
[v1.0]
- Fix for Socket Mode on Heroku
- Handle weblinks in Text step
- Translate text styling to Slack Markdown format
[v1.0.1]
- Handle choice/buttons
- Updated logic to translate slate text
[v1.0.2]
- Add createSession function
- Updated interact to save transcript
- Migrate from Heroku to Replit
Prerequisite
Setup
Create your Slack App
Go to to https://api.slack.com/apps?new_app=1 to create your Slack app
Select From an app manifest

Select the workspace you want to publish the app to

Choose JSON on the next screen and replace evrything with the manifest bellow

{
"display_information": {
"name": "Voiceflow Slack Demo",
"description": "Slack Assistant using Voiceflow Dialog Manager API",
"background_color": "#37393d"
},
"features": {
"app_home": {
"home_tab_enabled": true,
"messages_tab_enabled": true,
"messages_tab_read_only_enabled": false
},
"bot_user": {
"display_name": "Voiceflow Demo",
"always_online": true
}
},
"oauth_config": {
"scopes": {
"user": [
"users:read"
],
"bot": [
"app_mentions:read",
"channels:history",
"chat:write",
"im:history",
"im:read",
"im:write",
"mpim:history",
"mpim:read",
"mpim:write",
"users.profile:read",
"users:read"
]
}
},
"settings": {
"event_subscriptions": {
"user_events": [
"message.app_home",
"user_change"
],
"bot_events": [
"app_home_opened",
"app_mention",
"message.channels",
"message.im",
"message.mpim",
"user_change"
]
},
"interactivity": {
"is_enabled": true
},
"org_deploy_enabled": false,
"socket_mode_enabled": true,
"token_rotation_enabled": false
}
}
Click Next at the bottom of the window
Review the app details and comfirm by clicking on Create

Install the newly created app on your workspace

Click on Allow to finish to install the app on your Workspace

Generate a signin key and tokens
On the main screen, you want to copy the secret key and keep it for later

Scroll down and click on Generate Token and Scopes

Give this Token a name and add the connections:write scope to it. Then click on Generate

Copy the app token and save it for later

Go to the OAuth & Permissions section, copy the Bot User OAuth Token from there and save it for later

You should now have:
a **secret key**
an **app token**
a **bot token**
Voiceflow
Get your project Dialog API key
Go to Voiceflow Creator and open the Chat Assistant project you want to use
On your project, click on Integration from the left sidebar (or press the 3 key)

Click Copy to copy your Voiceflow Dialog API Key and save it for later

To Deploy on Replit
Click this link to fork the project on Replit to your account.
Setup the Replit secrets
Set new Secrets with the following info
SLACK_APP_TOKEN
Slack app secret (starting with xapp-)
SLACK_BOT_TOKEN
Slack bot token (starting with xoxb-)
SLACK_SIGNING_SECRET
Slack app signing secret
VOICEFLOW_VERSION_ID
Voiceflow project version ID (Needed if you want to save transcripts, will default to 'production' otherwise)
VOICEFLOW_API_KEY
Voiceflow project API key (from the Integration section)
In the Secrets tab, you can click on Edit as JSON button and paste the following JSON (do not forget to update the keys values):
{
"VOICEFLOW_API_KEY":"VF.12345678",
"VOICEFLOW_VERSION_ID":"12345678",
"VOICEFLOW_RUNTIME_ENDPOINT":"general-runtime.voiceflow.com",
"SLACK_APP_TOKEN":"XXXX",
"SLACK_BOT_TOKEN":"XXXXX",
"SLACK_SIGNING_SECRET":"XXXXXXX"
}
Setup the Replit secrets
Set new Secrets with the following info
SLACK_APP_TOKEN
Slack app secret (starting with xapp-)
SLACK_BOT_TOKEN
Slack bot token (starting with xoxb-)
SLACK_SIGNING_SECRET
Slack app signing secret
VOICEFLOW_VERSION_ID
Voiceflow project version ID (Needed if you want to save transcripts, will default to 'production' otherwise)
VOICEFLOW_API_KEY
Voiceflow project API key (from the Integration section)
In the Secrets tab, you can click on Edit as JSON button and paste the following JSON (do not forget to update the keys values):
{
"VOICEFLOW_API_KEY":"VF.12345678",
"VOICEFLOW_VERSION_ID":"12345678",
"VOICEFLOW_RUNTIME_ENDPOINT":"general-runtime.voiceflow.com",
"SLACK_APP_TOKEN":"XXXX",
"SLACK_BOT_TOKEN":"XXXXX",
"SLACK_SIGNING_SECRET":"XXXXXXX"
}
Slack
Install your Slack App
On your Slack workspace, click on Apps > Add apps

Search for 'Voiceflow Slack Demo' or the app name you've created earlier on Slack API website and click on it in the Search results list to install it

The app is now available and you can click on Messages to start interacting with your bot.


Updated about 1 year ago