Build a Basic Call Center in Just a Few Minutes with Twilio

January 04, 2017
Written by

Build a Call Center with TwiML Bins

TwiML Bins are a great tool to quickly build basic Twilio apps such as a personal conference line. But that is nowhere near the limit of their power. In the next 10 minutes we will build a basic call center that you can use with multiple agents.

Setup

Before we get started, make sure you have a Twilio account (you can get one here) and that you are logged into the Console.

Additionally you will need Node.js installed on your computer.

Please Hold the Line – Adding People to the Queue

TwiML Bins allow you to host instructions written in Twilio’s markup language TwiML directly within Twilio. They can be used for incoming and outgoing calls as well as for incoming SMS.

For our call center we need two different TwiML Bins. One that enqueues people and one that picks someone from the queue and connects them.

create-twiml-bin.gif

Create a TwiML Bin with the name “Join Queue” and enter the following TwiML:

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say voice="alice">Welcome to our call center! Please wait until someone is ready to assist you.</Say>
  <Enqueue waitUrl="http://twimlets.com/holdmusic?Bucket=com.twilio.music.guitars">callcenter</Enqueue>
</Response>

This TwiML will say a greeting and then add the caller to the callcenter queue using the <Enqueue> verb. Click “Create” to save your TwiML Bin.

This TwiML Bin should be triggered whenever a call comes into your Twilio number. Go to the configuration screen of your existing Twilio phone number or purchase a new one. Select “TwiML” from the dropdown next to “A call comes in” and then select your new TwiML Bin. Make sure to save the changes.

configure-twimlbin.png

Next create a second TwiML Bin called “Work Off Queue” and add the following lines:

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say voice="alice">Be ready to be connected to the next customer</Say>
  <Dial>
    <Queue>callcenter</Queue>
  </Dial>
</Response>

In order to work off the queue we use the <Queue> noun nested inside a <Dial> element. It will automatically grab a connection out of the specified queue and establish a connection with the other person. Save the TwiML Bin by clicking “Create” and copy the URL to your TwiML Bin Handler that you will find on the next page.

twimlbin-url.png

Now we will use the Twilio REST API to initiate a call to our own cell phone using our TwiML Bin. Rather than working with the REST API directly we are going to use the Node.js helper library. However, you can use any other language you might be more comfortable with.

Create a new folder on your computer and install the Twilio Node.js helper library by running:

npm init -y
npm install twilio --save

Create a new file called call-from-queue.js and add the following code:

var twilio = require('twilio');
var client = twilio(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);

var from = 'YOUR_TWILIO_NUMBER';
var to = process.argv[2]; // take the passed in command-line argument
var url = 'YOUR_TWIML_BIN_URL';

if (!to) {
  throw new TypeError('Please pass in a phone number to call to this script.')
}

client.calls.create({
  from: from,
  to: to,
  url: url
}).then(function () {
  console.log('Your phone should be ringing');
}).catch(function (err) {
  console.error(err.message);
});

For this code to run you’ll have to store your Twilio Account SID and Twilio Auth Token as the respective environment variables TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN. Alternatively you can pass the two arguments directly into the twilio() call. Make sure to replace YOUR_TWILIO_NUMBER with a valid Twilio number you own. This can be the same number as number you used above. Replace YOUR_TWIML_BIN_URL with the URL of the second TwiML Bin.

Ask a friend to call into your Twilio number to be put into the queue. Now all you need to do is execute the script with your own phone number to call your phone and work off the queue.

node call-from-queue.js +491111111111111

 

What’s Next?

Awesome! You just built your first call center but you don’t have to stop here though. How about creating a new TwiML Bin and using its URL to place it into a waitUrl attribute for the <Enqueue> to give a nice customized message to the user while they are waiting or even the position they are in the queue. Or check out one of these other resources for things that you can build with TwiML Bins:

The power of TwiML is huge and the applications vast. I would love to hear and see what you build with it! So feel free to drop me a line: