Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

IVR: Phone Tree with Node.js and Express


ET Phone Home: IVR Node and Express Example.

This Node.js Express(link takes you to an external page) sample application is modeled after a typical call center experience, but with more Reese's Pieces(link takes you to an external page).

Stranded aliens can call a phone number and receive instructions on how to get out of earth safely, or call their home planet(link takes you to an external page) directly. In this tutorial, we'll show you the key bits of code to make this work.

To run this sample app yourself, download the code and follow the instructions on GitHub(link takes you to an external page).

Read how Livestream(link takes you to an external page) and other companies(link takes you to an external page) built phone trees on IVR with Twilio. Find guides for many web languages on our IVR example page.


Responding to a Phone Call

responding-to-a-phone-call page anchor

To initiate the phone tree, we need to configure one of our Twilio numbers to send our web application an HTTP request when we get an incoming call.

Click on one of your numbers(link takes you to an external page) and configure the Voice URL to point to our app. In our code the route will be /ivr/welcome.

IVR Webhook Configuration.

If you don't already have a server configured to use as your webhook, ngrok(link takes you to an external page) is a great tool for testing webhooks locally.

With our Twilio number configured, we are prepared to respond to the Twilio request.


Respond to the Twilio request with TwiML

respond-to-the-twilio-request-with-twiml page anchor

Our Twilio number is now configured to send HTTP requests to this route method on any incoming voice calls. Our app responds with TwiML to tell Twilio what to do in response to the message.

In this case we tell Twilio to Gather the input from the caller and we Say a welcome message.

Respond with TwiML to gather an option from the caller

respond-with-twiml-to-gather-an-option-from-the-caller page anchor

_112
const VoiceResponse = require('twilio').twiml.VoiceResponse;
_112
_112
exports.welcome = function welcome() {
_112
const voiceResponse = new VoiceResponse();
_112
_112
const gather = voiceResponse.gather({
_112
action: '/ivr/menu',
_112
numDigits: '1',
_112
method: 'POST',
_112
});
_112
_112
gather.say(
_112
'Thanks for calling the E T Phone Home Service. ' +
_112
'Please press 1 for directions. ' +
_112
'Press 2 for a list of planets to call.',
_112
{loop: 3}
_112
);
_112
_112
return voiceResponse.toString();
_112
};
_112
_112
exports.menu = function menu(digit) {
_112
const optionActions = {
_112
'1': giveExtractionPointInstructions,
_112
'2': listPlanets,
_112
};
_112
_112
return (optionActions[digit])
_112
? optionActions[digit]()
_112
: redirectWelcome();
_112
};
_112
_112
exports.planets = function planets(digit) {
_112
const optionActions = {
_112
'2': '+19295566487',
_112
'3': '+17262043675',
_112
'4': '+16513582243',
_112
};
_112
_112
if (optionActions[digit]) {
_112
const twiml = new VoiceResponse();
_112
twiml.dial(optionActions[digit]);
_112
return twiml.toString();
_112
}
_112
_112
return redirectWelcome();
_112
};
_112
_112
/**
_112
* Returns Twiml
_112
* @return {String}
_112
*/
_112
function giveExtractionPointInstructions() {
_112
const twiml = new VoiceResponse();
_112
_112
twiml.say(
_112
'To get to your extraction point, get on your bike and go down ' +
_112
'the street. Then Left down an alley. Avoid the police cars. Turn left ' +
_112
'into an unfinished housing development. Fly over the roadblock. Go ' +
_112
'passed the moon. Soon after you will see your mother ship.',
_112
{voice: 'Polly.Amy', language: 'en-GB'}
_112
);
_112
_112
twiml.say(
_112
'Thank you for calling the ET Phone Home Service - the ' +
_112
'adventurous alien\'s first choice in intergalactic travel'
_112
);
_112
_112
twiml.hangup();
_112
_112
return twiml.toString();
_112
}
_112
_112
/**
_112
* Returns a TwiML to interact with the client
_112
* @return {String}
_112
*/
_112
function listPlanets() {
_112
const twiml = new VoiceResponse();
_112
_112
const gather = twiml.gather({
_112
action: '/ivr/planets',
_112
numDigits: '1',
_112
method: 'POST',
_112
});
_112
_112
gather.say(
_112
'To call the planet Broh doe As O G, press 2. To call the planet DuhGo ' +
_112
'bah, press 3. To call an oober asteroid to your location, press 4. To ' +
_112
'go back to the main menu, press the star key ',
_112
{voice: 'Polly.Amy', language: 'en-GB', loop: 3}
_112
);
_112
_112
return twiml.toString();
_112
}
_112
_112
/**
_112
* Returns an xml with the redirect
_112
* @return {String}
_112
*/
_112
function redirectWelcome() {
_112
const twiml = new VoiceResponse();
_112
_112
twiml.say('Returning to the main menu', {
_112
voice: 'Polly.Amy',
_112
language: 'en-GB',
_112
});
_112
_112
twiml.redirect('/ivr/welcome');
_112
_112
return twiml.toString();
_112
}

After saying the text to the caller and retrieving their input, Twilio will send this input to our application.


Where to send the caller's input

where-to-send-the-callers-input page anchor

The gather's action parameter takes an absolute or relative URL as a value - in our case, the /ivr/menu route.

When the caller has finished entering digits, Twilio will make a GET or POST request to this URL including a Digits parameter with the number our caller chose.

After making this request, Twilio will continue the current call using the TwiML received in your response. Any TwiML verbs occurring after a <Gather> are unreachable, unless the caller enters no digits.

Send caller input to the intended route

send-caller-input-to-the-intended-route page anchor

_112
const VoiceResponse = require('twilio').twiml.VoiceResponse;
_112
_112
exports.welcome = function welcome() {
_112
const voiceResponse = new VoiceResponse();
_112
_112
const gather = voiceResponse.gather({
_112
action: '/ivr/menu',
_112
numDigits: '1',
_112
method: 'POST',
_112
});
_112
_112
gather.say(
_112
'Thanks for calling the E T Phone Home Service. ' +
_112
'Please press 1 for directions. ' +
_112
'Press 2 for a list of planets to call.',
_112
{loop: 3}
_112
);
_112
_112
return voiceResponse.toString();
_112
};
_112
_112
exports.menu = function menu(digit) {
_112
const optionActions = {
_112
'1': giveExtractionPointInstructions,
_112
'2': listPlanets,
_112
};
_112
_112
return (optionActions[digit])
_112
? optionActions[digit]()
_112
: redirectWelcome();
_112
};
_112
_112
exports.planets = function planets(digit) {
_112
const optionActions = {
_112
'2': '+19295566487',
_112
'3': '+17262043675',
_112
'4': '+16513582243',
_112
};
_112
_112
if (optionActions[digit]) {
_112
const twiml = new VoiceResponse();
_112
twiml.dial(optionActions[digit]);
_112
return twiml.toString();
_112
}
_112
_112
return redirectWelcome();
_112
};
_112
_112
/**
_112
* Returns Twiml
_112
* @return {String}
_112
*/
_112
function giveExtractionPointInstructions() {
_112
const twiml = new VoiceResponse();
_112
_112
twiml.say(
_112
'To get to your extraction point, get on your bike and go down ' +
_112
'the street. Then Left down an alley. Avoid the police cars. Turn left ' +
_112
'into an unfinished housing development. Fly over the roadblock. Go ' +
_112
'passed the moon. Soon after you will see your mother ship.',
_112
{voice: 'Polly.Amy', language: 'en-GB'}
_112
);
_112
_112
twiml.say(
_112
'Thank you for calling the ET Phone Home Service - the ' +
_112
'adventurous alien\'s first choice in intergalactic travel'
_112
);
_112
_112
twiml.hangup();
_112
_112
return twiml.toString();
_112
}
_112
_112
/**
_112
* Returns a TwiML to interact with the client
_112
* @return {String}
_112
*/
_112
function listPlanets() {
_112
const twiml = new VoiceResponse();
_112
_112
const gather = twiml.gather({
_112
action: '/ivr/planets',
_112
numDigits: '1',
_112
method: 'POST',
_112
});
_112
_112
gather.say(
_112
'To call the planet Broh doe As O G, press 2. To call the planet DuhGo ' +
_112
'bah, press 3. To call an oober asteroid to your location, press 4. To ' +
_112
'go back to the main menu, press the star key ',
_112
{voice: 'Polly.Amy', language: 'en-GB', loop: 3}
_112
);
_112
_112
return twiml.toString();
_112
}
_112
_112
/**
_112
* Returns an xml with the redirect
_112
* @return {String}
_112
*/
_112
function redirectWelcome() {
_112
const twiml = new VoiceResponse();
_112
_112
twiml.say('Returning to the main menu', {
_112
voice: 'Polly.Amy',
_112
language: 'en-GB',
_112
});
_112
_112
twiml.redirect('/ivr/welcome');
_112
_112
return twiml.toString();
_112
}

Now that we have told Twilio where to send the caller's input, we can look at how to process that input.


The Main Menu: Process the caller's selection

the-main-menu-process-the-callers-selection page anchor

This route handles processing the caller's input.

If our caller chooses '1' for directions, we use the helper method giveExtractionPointInstructions to respond with TwiML that will Say directions to our caller's extraction point.

If the caller chooses '2' to call their home planet, then we need to gather more input from them. We'll cover this in the next step.

If the caller enters anything else, we respond with a TwiML Redirect to the main menu.


The Planet Directory: Connect the caller to another number

the-planet-directory-connect-the-caller-to-another-number page anchor

If our callers choose to call their home planet we will read them the planet directory. This is akin to a typical "company directory" feature of most IVRs.

In this route, we grab the caller's selection from the request and store it in a variable called selectedOption. We then use a Dial verb with the appropriate phone number to connect our caller to their home planet.

The current numbers are hardcoded, but they could also be read from a database or from a file.

Read planet directory and connect to another number based on caller input

read-planet-directory-and-connect-to-another-number-based-on-caller-input page anchor

_112
const VoiceResponse = require('twilio').twiml.VoiceResponse;
_112
_112
exports.welcome = function welcome() {
_112
const voiceResponse = new VoiceResponse();
_112
_112
const gather = voiceResponse.gather({
_112
action: '/ivr/menu',
_112
numDigits: '1',
_112
method: 'POST',
_112
});
_112
_112
gather.say(
_112
'Thanks for calling the E T Phone Home Service. ' +
_112
'Please press 1 for directions. ' +
_112
'Press 2 for a list of planets to call.',
_112
{loop: 3}
_112
);
_112
_112
return voiceResponse.toString();
_112
};
_112
_112
exports.menu = function menu(digit) {
_112
const optionActions = {
_112
'1': giveExtractionPointInstructions,
_112
'2': listPlanets,
_112
};
_112
_112
return (optionActions[digit])
_112
? optionActions[digit]()
_112
: redirectWelcome();
_112
};
_112
_112
exports.planets = function planets(digit) {
_112
const optionActions = {
_112
'2': '+19295566487',
_112
'3': '+17262043675',
_112
'4': '+16513582243',
_112
};
_112
_112
if (optionActions[digit]) {
_112
const twiml = new VoiceResponse();
_112
twiml.dial(optionActions[digit]);
_112
return twiml.toString();
_112
}
_112
_112
return redirectWelcome();
_112
};
_112
_112
/**
_112
* Returns Twiml
_112
* @return {String}
_112
*/
_112
function giveExtractionPointInstructions() {
_112
const twiml = new VoiceResponse();
_112
_112
twiml.say(
_112
'To get to your extraction point, get on your bike and go down ' +
_112
'the street. Then Left down an alley. Avoid the police cars. Turn left ' +
_112
'into an unfinished housing development. Fly over the roadblock. Go ' +
_112
'passed the moon. Soon after you will see your mother ship.',
_112
{voice: 'Polly.Amy', language: 'en-GB'}
_112
);
_112
_112
twiml.say(
_112
'Thank you for calling the ET Phone Home Service - the ' +
_112
'adventurous alien\'s first choice in intergalactic travel'
_112
);
_112
_112
twiml.hangup();
_112
_112
return twiml.toString();
_112
}
_112
_112
/**
_112
* Returns a TwiML to interact with the client
_112
* @return {String}
_112
*/
_112
function listPlanets() {
_112
const twiml = new VoiceResponse();
_112
_112
const gather = twiml.gather({
_112
action: '/ivr/planets',
_112
numDigits: '1',
_112
method: 'POST',
_112
});
_112
_112
gather.say(
_112
'To call the planet Broh doe As O G, press 2. To call the planet DuhGo ' +
_112
'bah, press 3. To call an oober asteroid to your location, press 4. To ' +
_112
'go back to the main menu, press the star key ',
_112
{voice: 'Polly.Amy', language: 'en-GB', loop: 3}
_112
);
_112
_112
return twiml.toString();
_112
}
_112
_112
/**
_112
* Returns an xml with the redirect
_112
* @return {String}
_112
*/
_112
function redirectWelcome() {
_112
const twiml = new VoiceResponse();
_112
_112
twiml.say('Returning to the main menu', {
_112
voice: 'Polly.Amy',
_112
language: 'en-GB',
_112
});
_112
_112
twiml.redirect('/ivr/welcome');
_112
_112
return twiml.toString();
_112
}

That's it! We've just implemented an IVR phone tree that will delight and serve your customers.


If you're a Node.js developer working with Twilio, you might want to check out these other tutorials:

Account Verification

Use Twilio and Twilio-powered Authy to implement account verification at the point of registration.

Two-Factor Authentication with Authy

Use Twilio and Twilio-powered Authy OneTouch to implement two-factor authentication (2FA) in your web app

Did this help?

did-this-help page anchor

Thanks for checking out this tutorial! If you have any feedback to share with us, we'd love to hear it. Connect with us on Twitter(link takes you to an external page) and let us know what you build!


Rate this page: