How to Make Slack and Twilio Talk to Each Other
Why, you ask? Because it's cool. Continue reading for an in-depth tutorial provided by Swizec Teller, and happy slacktwillying!
Join the DZone community and get the full member experience.Join For Free
Why? Because it’s cool.
- Takes a phone call.
- Records what the caller says.
- Puts the caller on hold.
- Posts a message with buttons on Slack.
- Tells caller which button was pressed.
- Hangs up.
Let’s assume you’ve already set up an Express project. It’s easy to do from scratch. If you already have an existing one that you’re adding Slack and Twilio to, then you don’t need this step.
The first thing that we have to take care of is Slack’s OAuth dance. We’re going to use the
grant-express plugin to add OAuth to our server, then do the dance to get a Slack token.
$ npm install --save grant-express express-session
This installs an OAuth plugin and a session middleware for Express. The first is for OAuth dancing and the second is for storing information between API calls temporarily.
To enable the dance, add this to your
grant-express comes half-configured for Slack out of the box. You just have to tell it which scopes you’re going to use, what your access keys and secrets are (you find them in your config on Slack), and your server’s domain. For local development, I like to use ngrok (hence
Once you have that configured, you tell Express to use
session with two
To complete the dance, you need a
/handle_slack_callback route, which goes in your
routes/index.js file, if you’re as careless as I am. In a bigger app, you’d want to be more organized.
Now, you can go to
https://swizec.ngrok.io/connect/slack and do the dance.
access_token. It lets you post to Slack as an app.
Now that you’ve seen mine, you can make a thing that keeps posting to my test Slack channel. That would be mean of you but also kinda cool in that “Whoa, the internet is humans!” kind of way.
Twilio → Slack → Twilio
Now comes the tricky part: making Slack and Twilio talk to each other. Here’s a diagram that explains the flow of events.
The key trick to reading this diagrams: the vertical line is time. Starts on top and flows down.
Step-by-step in code, that GIF looks like this:
Phone Call From Twilio
TwiML is Twilio’s XML format that you can use to tell their servers what to do with a phone call. In this case, we’re saying a greeting and asking Twilio to record what a person says.
Get Recording and Send to Slack
Most of this code is setting up the Slack message. We send it to Slack, and in the callback, when we know it’s sent, we use TwiML to ask Twilio to pause the call for 240 seconds.
If the time is up, we say something. In most cases, the pause will be interrupted by a Slack callback.
The message we sent looks like this:
Slack Button Pressed
We find out which button was pressed in
payload.actions. They’re the same strings as we set up earlier –
open_door is a
Yes, anything else is a
callSid tells us which phone call we’re responding to. That’s why we put it in
client.calls(callSid), we ask Twilio to let us continue the paused phone call. For some reason, we can’t directly tell the API what to say, but instead we have to set up more routes in our server.
In the callback, when we know Twilio knows what we want, we send a response to Slack, which updates the message that a user clicked on.
Finish the Call
You can guess what this does, can’t you? If the
Yes button was pressed, we tell the caller to come in and send a dial tone. If the
No button was pressed, we ask the caller to try contacting a human.
In theory, that dial tone asks the building buzzer to open the door, but I haven’t tried this in the wild yet.
Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.