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.
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.
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.
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:
- Sign into your Slack account where you are an admin.
- Go to https://api.slack.com/incoming-webhooks
- Select the channel you want to post in or create a new one.
- Click
Add Incoming WebHooks Integration
- Copy/Paste the
Webhook URLand save it for later.
Once you have these steps completed, you can move on and setup Webtask.
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:
- Navigate to the Webtask.io editor - https://webtask.io/make
- Click
Create Newin the editor, thenCreate Empty - Name the new function, and click
Save - Click the wrench icon in the editor, and select
NPM Modules - Click
Add Module, and search fornode-fetch
- Select the module, and then close the side menu.
- At the bottom of the editor, copy the function's endpoint.
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.
- Go to
Your Numberssection of the Nexmo dashboard - https://dashboard.nexmo.com/your-numbers - Click the
editicon for the number you want to use - Set the callback URL to the endpoint from Webtask.io
- Click Update.
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:
- Receive Inbound SMS
- Post a Slack message
First, let's take a look at the inbound SMS
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.
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
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.
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.
