Skip to content

Instantly share code, notes, and snippets.

@kellyjandrews kellyjandrews/1_post.md
Last active May 24, 2018

Embed
What would you like to do?
SMS to Slack Integration

Getting Your Customers Feedback from SMS to Slack

Overview

Modern application development teams have adopted Slack as a place to collaborate as a team, and consolidate tools into one location to make operations run more efficiently.

In the case of a mobile app, getting instant feedback from customers via Slack messages can shorten the time to feature development, bug fixes, and other mission-critical use cases.

As an example, your mobile app can send an SMS directly to your customer success team's slack channel when an error occurs, or if a user needs help.

In this tutorial, I want to show you how you can connect your Slack channels to your customers using the Nexmo SMS API. The Nexmo SMS API can be configured to use a webhook for incoming SMS messages. We will use Webtask.io in this example to handle the incoming message and forward it to a Slack webhook.

SMS to Slack Workflow

Before you get started

If you don't already have the following accounts created, go ahead and do that now.

  • Nexmo https://dashboard.nexmo.com/sign-up
    • This is where the interaction from your customers will happen. The SMS messages will be sent to a virtual number in Nexmo.
  • Webtask https://webtask.io/
    • A serverless endpoint service to allow for quick creation of server tasks. Nexmo will send the SMS message here to be processed.
  • Slack https://slack.com/get-started#create
    • This is where the SMS message will eventually be received by your customer success managers. You will need a Slack workspace where you can create integrations.

Configuration

Once you have your accounts, we can proceed with configuring Nexmo, Slack, and Webtask. This can all be done prior to writing any code - this way you can just add the code at the end without going back to set something up.

Create Incoming Webhook in Slack

The first piece you will configure is the incoming webhook in Slack. The configuration steps are made to be very easy. Slack has also created excellent documentation in case you get stuck.

You can create a webhook to post to a specific channel following these steps:

  1. Sign into your Slack account where you are an admin.
  2. Go to https://api.slack.com/incoming-webhooks
  3. Select the channel you want to post in or create a new one.
  4. Click Add Incoming WebHooks Integration Adding Incoming Webhook Integration
  5. Copy/Paste the Webhook URL and save it for later. Copy/Paste Webhook URL

Once you have these steps completed, you can move on and setup Webtask.

Setup Webtask.io

When an SMS message is received by Nexmo, one of the options is sending data to a webhook for processing. You could use your own servers, but in this instance, you can skip the additional setup and use a service like Webtask.io allows us to create an endpoint.

Once you are logged into Webtask, you can create a new webhook endpoint with the following steps:

  1. Navigate to the Webtask.io editor - https://webtask.io/make
  2. Click Create New in the editor, then Create Empty
  3. Name the new function, and click Save
  4. Click the wrench icon in the editor, and select NPM Modules
  5. Click Add Module, and search for node-fetch Adding node-fetch module to Webtask
  6. Select the module, and then close the side menu.
  7. At the bottom of the editor, copy the function's endpoint.

Configure Nexmo Inbound SMS Webhook

At this point, you should have a Slack webhook, and a Webtask endpoint up and running. All that is left in the process is connecting the Webtask.io endpoint to your Nexmo number.

  1. Go to Your Numbers section of the Nexmo dashboard - https://dashboard.nexmo.com/your-numbers
  2. Click the edit icon for the number you want to use
  3. Set the callback URL to the endpoint from Webtask.io Adding node-fetch module to Webtask
  4. Click Update.

Write the Code

At this point, the configuration is completed, and you can return to Webtask to add the code required to connect the pieces.

The code will be doing only the following two things:

  1. Receive Inbound SMS
  2. Post a Slack message

First, let's take a look at the inbound SMS

Handle the Inbound SMS Message

The main thing to learn with Webtask.io is incoming data to the function is captured in the first argument. Here I've used ctx.

'use latest';

module.exports = function(ctx, cb) {
   // Webtask handles the incoming data using the ctx object.
   const message = ctx.body;
};

If you add console.log(message) and send your Nexmo virtual number a text message, you would see something like the following:

{
  msisdn: '###########',
  to: '###########',
  messageId: '0B000000DDC3ABDB',
  text: 'Test',
  type: 'text',
  keyword: 'TEST',
  'message-timestamp': '2018-05-24 14:49:48'
}

For this use case, we are concerned with the following parameters from the inbound SMS message:

  • text - The SMS message itself, and will become the Slack message.
  • msisdn - The phone number of the user, and will serve as our username.
'use latest';
import fetch from 'node-fetch';

module.exports = function(ctx, cb) {

   // Webtask handles the incoming data using the ctx object.
   const message = ctx.body;

   // Parse the message and add to payload.
   // Here the username will be the sender's phone number.
   const payload = {
      'text': message.text,
      'username': message.msisdn
   };

   cb(null, 'Success');

};

The code so far only handles the incoming message. Next, we will write the call to Slack to post the message.

Post Message to Slack Webhook

All that's left is to send the message to Slack. Now we can create a function to call the Slack webhook and pass the payload we created in the last step.

'use latest';
import fetch from 'node-fetch';
//
// other code
//
// sendSlackMessage - posts message to Slack webhook.
function sendSlackMessage(data) {
  // Replace webhook with your Slack webhook
  const webhook = 'https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX'
  const options = {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify(data),
  };

  return fetch(webhook, options)
    .then(res => res);
}

Now we need to call sendSlackMessage and pass in our payload in the original anonymous function:

sendSlackMessage(payload).then((res) => {
  cb(null, "Success");
});

The full code now should like this:

'use latest';
import fetch from 'node-fetch';

module.exports = function(ctx, cb) {

   // Webtask handles the incoming data using the ctx object.
   const message = ctx.body;

   // Parse the message and add to payload.
   // Here the username will be the sender's phone number.
   const payload = {
      'text': message.text,
      'username': message.msisdn
   };

   sendSlackMessage(payload).then((res) => {
     cb(null, 'Success');
   });
};

// sendSlackMessage - posts message to Slack webhook.
function sendSlackMessage(data) {
  // Replace webhook with your Slack webhook
  const webhook = 'https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX'
  const options = {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify(data),
  };

  return fetch(webhook, options)
    .then(res => res);
}

With the code in place and the configuration completed, you can test it out by sending an SMS message to your virtual number. The result will be the message in your Slack channel

Slack channel message from SMS API

Conclusion

By completing everything above you should have a working integration with Slack and Nexmo SMS.

This example shows just how easy it can be to improve your user experiences. Being able to send an SMS with feedback is a fast way for your customers to truly feel connected to your business.

Going Further

This example is just the beginning, as well. It represents a simple inbound SMS integration. Here are some ideas to deepen the integration:

  • Outbound messaging from Slack - Slack offers a real-time API to send and receive messages in real-time. This would allow users to get messages back from Slack directly. Your customer-service rep would never have to leave the Slack interface.

  • Add a response - This integration doesn't send any type of response, but with Nexmo, you could easily send a "Thank You" message to your user by default.

  • Look up phone number in CMS, send a link - Now that you have information about your customer, connect that data to your CMS system, and use a real name, or link to the customer record.

  • Connect to CSM and add ticket creation - Slack buttons add a bit of interactivity to your messages - add a button to create a new ticket ( directly from Slack) based on their feedback.

'use latest';
import fetch from 'node-fetch';
module.exports = function(ctx, cb) {
// Webtask handles the incoming data using the ctx object.
const message = ctx.body;
// Parse the message and add to payload.
// Here the username will be the senders phone number.
const payload = {
'text': message.text,
'username': message.msisdn
};
sendSlackMessage(payload).then((res) => {
cb(null, 'Success');
});
};
// sendSlackMessage - posts message to Slack webhook.
function sendSlackMessage(data) {
// Replace webhook with your Slack webhook
const webhook = 'https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX'
const options = {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify(data),
};
return fetch(webhook, options)
.then(res => res);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.