Building Slack app to send and receive Bandwidth SMS

Note* this is an Open Source project, and the codebase is available here

If you checked out our previous blog on Bandwidth, you might know that we have integrated Bandwidth cloud communication provide in out conversation platform. APIs are available in order to enable users to buy phone numbers and send/receive SMS messages through our platform.

To help us with extensive testing and to do so with ease, we have also developed Bandwidth (and Twilio) plugin for Slack app. Whats the benefit?  – think of this as “User Agent/Browser” testing for UI features. When we buy multiple phone numbers from provider we need a simple way to run your use cases.

The open source code base is located here.

The add-on makes it extremely easy to test our application from Slack app, and we maintain a separate channel in Slack where text messages can be sent using the slash command. The format of the message is as below.

And, any SMS received to a number configured to use Slack, is displayed asbelow in the channel.

Let's dive deep and breakdown the implementation!

In order to bridge the gap between Slack API and Bandwidth/Twilio API, built an application and exposed endpoints that can be used by Slack and Bandwidth/Twilio. One endpoint will be used by Slack slash commands and another by Bandwidth/Twilio.

Prerequisites

1. Bandwidth/Twilio account
2. Slack account, a workspace channel (‘#messaging’ in our case) and a Slack app

The project is based on slackSMS by ammaristotle. This project allows users to send and receive Twilio SMS message. Since we also have Bandwidth, we decided to modify it in order to incorporate multiple platform as well as keep room for more integrations.

Getting Started

First, define the routes which will be used by Slack and Twilio/Bandwidth respectively. You can clone the repository mentioned above or create new Express app to start from scratch.

Reference below

The first route “/sms” will be used by Twilio and Bandwidth while “/slack” will be used by Slack.

Sending message from Slack slash  commands

Slash Commands let users trigger an interaction with your app directly from the message box in Slack.

Once we have created Slack application from here, we need to setup Slash Commands for it. It can be found under “Features” -> “Slash Commands” -> “Create New” in your app dashboard.

In “Request URL”, we need to specify the url which we created in order for our application to listen to Slack.

Once we save this, the “/sms” command can be used in our Slack workspace. The text specified after “/sms” will be received in our NodeJS application. We need to handle the payload and break it down into provider, from number, to number and message.

Below is function that handles the payload.

The payload is split based on blank spaces and tokenized each word as a parameter. You can apply your own logic and methods to tokenize the words.

Next, a function to send the message to the SMS provider. The message from Slack has already parsed the payload to identify the provider that user is trying to send the message to in the above “parseMessage” function.

We are using node-bandwidth and twilio-node here.

Let’s put everything together and we have a route that can receive payload from Slack slash commands, breakdown each word for parameters and send the SMS message to the respective provider.

We want to let users know if the message has been sent or if any error has occurred. We are using slack-node to send message to slack from our NodeJS application. You can get all the instructions to set it up from their Github page.

Note: In order for it to work, you need to send message using the number purchased from Bandwidth or Twilio dashboard and specify the provider correctly in the slash command.

Receiving message and sending it to Slack

Just like we had a URL to handle request from Slack, we also have URL specified to handle Twilio/Bandwidth requests. Twilio and Bandwidth provide options to add webhook URL that gets triggered whenever an SMS is received in the number. We will be making use of that to redirect the message received to our numbers into Slack. Our webhook URL will be the “/sms” route we defined in routes/index.js

Steps to set up webhook URL in Twilio as taken from https://www.twilio.com/docs/sms/tutorials/how-to-receive-and-reply-python

1. Log into twilio.com and go to the Console’s Numbers page
2. Click on the phone number you’d like to modify
3. Find the Messaging section and the “A MESSAGE COMES IN” option
4. Select “Webhook” and paste in the URL you want to use:

Steps to setup webhook URL in Bandwidth:

1. Log into app.bandwidth.com and go to Applications page
2. Create new application or select an existing application
3. Select callback method as POST and enter the webhook URL in the Messaging callback URL field.
4. In the “Associated numbers” section, add the number you want to setup to receive message via Slack.

So, in both the cases above, the callback or webhook URL will be “/sms” route that we defined. It receives the payload from Bandwidth or Twilio. More details on the format of payload for Twilio can be found here and for Bandwidth, it can be found here. I won’t be discussing them as we only require three parameters here: from number, to number, message.

Once we have from number, to number and text, all we need to do is post the message to slack in a nice format.

Here, the message received will be displayed in “#messaging” channel so we need to have that channel in our Slack workspace.

This is what the webhook URL looks like after everything is put together.

There you have it! This enables us to receive and send SMS using Slack. Get a peek at the code base here. Hope this article gave you an idea of the integration process.

For more articles on Live Chat, Automated Bots, SMS Messaging and Conversational Voice solutions, explore our blog.

Want to learn more about Botsplash platform? Write to us here.