Building an IVR with Twilio (1/3)

How to leverage Twilio Studio, Twilio Functions (with NPM packages) & slack to build an IVR

Welcome in our new tech posts : I’ll split this post in 3 parts, today we’ll see how to receive calls and log them in slack, next time we’ll showcase how to start calls and then, we’ll improve our IVR by adding other channels.

When you launch a customer product, you’ll more than probably need a customer support. And despite the fact that we’ve recently entered 2018, most of them would like to reach you by phone. So … what will you do? Put your personal cell on your website, worst idea ever. Some SaaS allows you to do that, but they’re quite expensive, and assuming you’re launching your product, you have no €/$/£ so spend in it (or just a few, to pay for your communications).

The good news is : you can Do It Yourself with a couple of clicks and fewer than 100 lines of code (OK, maybe more, but, with all the comments 😜).

Code? 😱😫

Yes, code, we’ll make a bit of javascript no worries, each line will be heavily commented so that you (Yes! You who made this prestigious business school, you who are more comfortable with a business plan than with an IDE – for muggles it means : Integrated Development Environment).

After all everyone can code!

We’ll use 2 things to build this IVR :

• Twilio : An amazing company which provide APIs for communications.
• Slack : A communication tool for teams (we almost all use on a daily basis).

🎭 Let’s set the scene

In this series of posts, I’ll assume you already have a slack team (if not, you can create one for free easily).

So the first thing you’ll need is to create a Twilio account (here), easy pick, you can do it in less than 5 minutes.

Then, you’ll need to ask for access to Twilio Studio (currently in private beta).

Once it’s done, let’s create a new flow (design of interactions) in Studio

Creating the flow

Creating a flow is really simple too, just click on the red + button, and give your flow a name, I’ve named my IVR (inspiration, where are you 😅).

Once it’s done, you’ll be redirected to a canvas, where you can drag and drop widgets.

Do you remember this time, when, aged of 6/7, you played Lego connecting bricks together? It’s nearly the same here.

At this time your canvas contains your very first widget, the trigger one, logically, it’s the block which be called when you’ll invoke your flow, by an inbound call, incoming SMS or a REST API Call. The only thing we have to do here is to add 2 widgets, one to say ‘Hello, welcome to our customer relation centre’ and a second one to redirect the call to your own phone number.

Let’s do that!

Drag a ‘Say/Play’ widget, then a ‘Connect Call to’ Widget

The only thing we need to do here is to type the message we want to say when someone calls our system (in the Say/Play widget), and then put the number where we want to redirect the call (in the Connect Call To widgets).

• Let’s click on the Say/Play widget and edit its name, then rename it ‘say-welcome-message’ and update the message to ‘Hello, welcome to our amazing customer relation centre, you’ll be soon connected to one of our agents.”
• After that let’s click on the Connect Call To widget and rename it to ‘connect-call’ and put your number on the appropriate field. No need to record the call at this time.

We’re almost all set! Kinda magic, isn’t it? We just need to link widgets together, and we’ll soon be able to run it! Like so :

Linking the flow to a phone number

The last thing we need is a phone number to handle incoming calls.

Stop! Don’t run to your phone carrier office across the street, you can do this right from your desk.

Click on the pound sign in the sidebar (phone numbers), and then on the + button to buy a number (you’ll need to add a valid payment method to your account, as it’s not a free feature ~$1.5/mo./number).

Once you’ve bought a number, just click on it, and under the Voice section, select :

1. Studio Flow
2. Your studio flow

Hit save. That’s all, you have an IVR up and running (with no code… at the moment 😈).

Feel free to test it out by calling this phone number.

Improving our flow.

At this time we have a working IVR, which says a message and redirect the call. It’s cool, but we can do better, at this time we do not record the call, and we don’t know (in advance) when a customer calls us. Also, it’s working 24/7, personally I’d like to rest between 8 PM and 9 AM, same thing on the weekend, and I’d like to give the possibility for my customer to record a message when I’m not available.

In order to do that, we’ll use Twilio Functions, a feature released during Signal San Francisco last June. The coolest thing is that since Signal London, we can use NPM Packages with those functions. It means we can do almost everything (even piloting a drone, seriously!)

Twilio functions are compatible with npm packages

Let’s do a quick list of features we’ll need :

1. A package to communicate with Slack, we’ll use the official @slack/client.
2. A package to deal with time and/or time zones. For this, I’m in love with the popular moment-timezone

Getting a Slack Token

In order to communicate with Slack, we’ll need a token, it’s Slack’s way to communicate programmatically with your team. To get it, just visit https://api.slack.com/apps, and click on legacy custom integration > Legacy tokens.

Here is your token. ⚠️ Keep it secret ⚠️

Please write down your token, it should look like xoxo-longSuite-OfHexadecimal-StringSplittedWithDashes.

Creating the first (incoming call) function

Let’s navigate to Runtime/Functions/Configure

We’ll create an Environmental Variable named slack_token where we’ll copy the value of our token.

Adding Slack

Then, let’s add the 2 dependencies to the project (please, use the latest versions of the packages, those are the ones available the time I wrote this article).

We’ll then create our first Twilio function, which will log a message in slack telling you that someone is calling, and it will check opening hours, then (if open) it redirects the call. Otherwise, it’ll say the customer service is closed.

As said in this Twilio Function, we’ll write 2 functions (or 2 blocks of code with different goals) :

⚠️ Twilio function ≠ Javascript function, a twilio function is a script, you’ll be able to execute by hitting its URL. It’s composed by javascript functions which are independent blocks of code which can run simultaneously (or not).

• One to determine if the support centre is open or closed,
• Another one which will send a message to our Slack workspace.

I won’t dive deep in the code, everything is well commented, you just have to copy and paste this in your function.

With that function saved, we can now go back to our studio flow, to add a Run Function widget, another Say/Play widget, a Record Voicemail widget and lastly another Run Function widget.

1. At the very top level we’ll place the function we’ve just created (the one which logs the call in Slack and checks for opening hours). Whatever could be the time, the call is logged on Slack (so if someone tries to call you at 12:42 am, you’ll be notified).
2. Depending on the isoWeekday and the hour, we’ll receive a 200 (Success) or a 500 (Failure) status code. This status code will impact the 2nd widget triggered.

• In case of Success (Monday to Friday, from 9am to 5pm – included), we’re redirected to the say-welcome-message (a Say/Play widget) which trigger at the end the Connect Call To widget.
• In case of Failure (Customer Support Closed) we are redirected to say-support-closed (a Say/Play widget), and then — new widget here — a record, at the end of the voicemail. It’ll give us a URL pointing to the .mp3 of the recording and we’ll log this in Slack using a second function we’ll create in a moment.

Finally, we’ll add another function, which will log that the call has ended and print the URL to listen the message (if needed).

Final function

Creating the function

Once more let’s navigate to Runtime/Functions/Configure and click on the + button to create another function

Here is the commented code, and you know what ? It’s simpler than the previous one !

Link Twilio Function and Studio Flow

The last thing we need to do is to configure the Studio Flow to use this function correctly and its parameters. So back in our flow click on the last function (I’ve called it log-call-slack) and then we’ll change some little things on the ride sidebar.

Here we’ll add parameters which will be sent to the Twilio function in the event parameter of the handler.

• voicemail_url : The URL of the recording we get from the call if the customer support is closed. We get it using {{widgets.name-of-recording-widget.RecordingUrl}}
• connect_url : The URL of the recording we get from the call if an agent answered the call. We get it using {{widgets.name-of-connect-call-to-widget.RecordingUrl}}
• phone_number : The number who calls our IVR. We get it using {{trigger.call.From}}

And here we are, we have a fully functional IVR connected to our Slack workspace, open 24/7 with an automated responder if the service is closed.

To be continued…

Teaser : Next week, we’ll add some more features to our call centre, like outbound call using slack commands and SMS. We’ll also create a simple multi-agent call centre depending on a call choice (technical support/sales/…)

About the author

My name is Clem, I’m a 27yo engineer from Northern France.
About 3 years ago I’ve cofounded Les Tontons Livreurs, an amazing start-up which provides anyone a Man with a Van in 5 clicks.
Since the beginning of this adventure, I’m leveraging Twilio APIs to improve (and bring the best) communication layers between customers, drivers (our Tontons) and support, to make our service better every day.

Using Twilio in our everyday workflow

You can follow our adventure on Facebook, Twitter or LinkedIn, and my personal twitter is here. If you liked this post, feel free to clap it 👏🏻 and share it.