How to Setup Callio, a Slack-Twillo Integration

The idea was to build a simple app that will intercept incoming calls, post a Slack notification and allow us to answer these calls through a web browser using Twilio number. That’s how Callio was born. In this article, you will find a comprehensive guide on how it works and how to integrate it with your account.

The benefits

Callio is an extremely lightweight app. It uses Sinatra to communicate with Slack and Twilio APIs, a simple web client with some JavaScript to handle voice calls in a browser, and a few webhooks to make it all run smoothly.

• No need to have an actual phone in your office – you just need a web browser, no additional devices.

• No problems with clients who can't reach your number – owing to Twilio you can pick a number from dozens of countries.

• Anyone on the Slack channel can answer the call.

• Callio retains a full history of your phone calls along with a recording of each one. If you miss something, you will still have a note on Slack that somebody was trying to reach you

How Callio Works in Practice

1. Someone calls you.

2. Callio posts a notification on your Slack channel with a link to the web browser where you can answer the call.

3. You click on the link in the notification.

4. When you click on the ‘call’ button in your browser, another notification is posted on Slack to let the rest of the team know that somebody has already answered the call.

5. A call is performed and recorded.

6. When one of the parties hangs up, Slack issues a notification about that, and the line is ready to use again.

7. The call details and the recording are added to the call history

How to Set Up Callio

Twilio account

To start using Callio you have to sign up to Twilio and pick up a number you want to use. It's free and provides full functionality for testing purposes – you will only receive a short message advising that you're running a trial account.

Twilio incoming connection webhook

After registering on Twilio and choosing a number, you have to configure your first webhook. To do this, paste the address of your Callio app under Phone numbers, then: Configure -> Voice -> A CALL COMES IN

Twilio webhook for finished connection

In the same place that you paste the Callio incoming call webhook, you can type in the address of the endpoint for notifying users that the call has finished. It's under the ‘CALL STATUS CHANGES’ input field (see screenshot above).

Twilio Application

When you're done with the number, go to Programmable voice -> Tools -> TwiML apps and create an application. Your Twilio app will be ready within a few seconds (you’ll need its SID later). Next, you can configure a webhook to handle voice calls by simply typing the address of your Callio into Voice's requested URL.

Slack application

When we're done with Twilio, it's time to create a simple Slack application. Go to https://api.slack.com/apps and create an app. You'll need its token as well. Remember to setup proper permissions for this app to be able to post messages on your channel. The only permission we need is chat:write:bot.

Twilio-Slack-Notifier setup

You have to provide some secret data in the config.yml file. A sample config file should look similar to this:

slack:
client_token: 'xoxp-1234-your0slack-99secret4token-nomnomnom3'
channel: 'awesome-slack-channel-name'
twilio:
account_sid: 'ACand0some1random9chars'
auth_token: '1234rtg42fg234rfgsbh45uknow'
app_sid: 'APand8your9app3sid9from1twilio'
client_name: 'your-client-name'
caller: '+485555555'
web_client_link: 'https://my_web_client_endpoint.com/call'

What is that? Where do I get all these data?

• Slack client token: it's a token that authorises your Slack account when you use the application. First of all, you have to create a Slack application (just give it a name and permissions as above), and you'll get the token when you choose your app under https://api.slack.com/apps.

• Slack channel: it's just the channel name where you want notifications to be posted. It can be anything, as long as the channel actually exists.

• Twilio account SID: get it in your Twilio dashboard after login: https://www.twilio.com/console

• Twilio auth token: just like above: https://www.twilio.com/console

• Twilio app SID: you have to create a Twilio app first. Go to Console -> Programmable Voice -> Tools -> TwiML apps. After creating a new app, you'll get the Application SID there.

• Twilio client name: it's the name you have to type in your Twilio dashboard and Callio config. It authorises the browser to connect to your Twilio and perform phone calls.

• Caller: your Twilio phone number.

• Web client link: the endpoint address for your web client. This is the link that gets posted on the Slack channel.

You’re all set! Now you won’t miss any incoming call.