TaCode Tuesdays: How to Build an Interactive Voice Response System (IVR) Using Zang [Part 1]

Posted by Alex Misevski on October 25, 2016


Welcome back to TaCode Tuesdays! This is the only place you can find snippets of code for use in your very own text/voice apps, along with a weekly dose of taco puns. I’m a developer here at Zang and not only am I a big fan of tacos (if that wasn’t already apparent), I’m also a fan of open source. My goal is to share a new app idea each week that you're free to use “as is” or modify and use as the basis for your next app.

In the last set of post, I've detailed how you can create a chat application using Swift and Zang on iOS—you can check out PART 1 herePART 2 here, and PART 3 here. If you’d like to learn how to get started on Zang, take a look at our very first post.

This week I’m going to start a two-part tutorial detailing how you can build your own IVR (Interactive Voice Response). But before I get into it, let me revive our Taco Tip of the week!

Seasoning for your ground beef is usually pretty simple—a pinch of chili powder, onion powder, oregano, paprika, salt, and maybe sugar. The 'secret' ingredient...tomato sauce. Try it out and see for yourself! 

Anyway, let's get into the background of the app we'll be building over the next two weeks.

The Interactive Voice Response system (IVR) is critical to call centers handling high call volumes. IVR technology serves as a gate keeper, filtering and categorizing customer needs based on their menu selections. After which, the solution directs them to the correct unit and individual who are specialized to better handle their concerns. Because IVRs are meant to handle huge call volumes, it can process concurrent calls, contributing to overall customer service process optimization. Unfortunately, IVRs are rather expensive in nature. For reference, a typical Cisco IP IVR with 25 ports costs more than $9,000. If your business is fairly new, investing in this amount would not be strategically sound.

Bringing down capital investments is a challenge not only to small businesses but to multi-national corporations as well. A few years ago, cloud computing pushed the call center industry to consider more cost efficient alternatives to the traditional IVR. Platform as a Service technology, such as Zang, gives developers an opportunity to create a custom IVR through their application programming interface (API).

This article demonstrates how to create a basic system to handle incoming calls, play an IVR menu, allow selections through dual-tone multi-frequency signaling (DTMF also known as button presses), and eventually transfer the call to the appropriate unit.
Basic requirements in building a Zang IVR:
  1. Zang account and phone number. If you don’t have one yet, you can get one for free here.
  2. Any programming language can be used to consume Zang APIs. For the purpose of this tutorial, PHP was used.
  3. And because of that, you must have an intermediate understanding of PHP.

Before starting, create a call handling process flow detailing how the call will branch out as the customer selects and narrows down their selection. Below is an example:


Figure 1: Basic IVR Process Flow

The diagram above shows a simple IVR process flow wherein upon receiving an inbound call, the IVR gives three choices – Customer Service, Technical Support, and Sales & Marketing. Upon selection, another two to three options are played until the customer is transferred to a live agent to discuss and resolve their current issues.

Once you’ve already defined your process flow, you can follow this simple hierarchical input process output model (HIPO) to serve as guide in creating your program.


Figure 2: Input-Output Process Hierarchy

Creating a custom IVR using Zang API involves three easy steps.
First, create the web service, which will render the menu system (see Figure 1). Second, create your output so that it follows the Zang InboundXML format. Third, initiate your code through Zang’s Representational state transfer (RESTful) API which will render it to the contacted party.

Now, Let’s Start Coding!

Step 1: Create a capability to answer an inbound call and play the greeting message together with the first level of the IVR menu. To do this, we will be using Zang’s Inbound XML <Say>.
When using the <Say> element, the text-to-speech engine of Zang will be used. Using <Say> is a good way to play dynamic data such as your IVR tree selection (i.e. 1, 2, 3). However, if you have more static information or prompts, you can use the <Play> element. This however would require you to have a voice recording that will be invoked together with your code. Use <Play> for your IVR greetings, run down of products and services, special promotions, and the like. This is important primarily so your customers don’t feel odd talking to a robotic voice.
In this first step, we will be using the <Say> element to have an immediate rendering of the API. You can later replace this with <Play> once you have your prompt recordings available. You can also customize this to reflect a male or a female voice. Just include <Say voice='woman'> or <Say voice='man'> into the “<say voice={voice type}>” </say> tag.
<Response>Welcome to Stark Industries</Say>
      <Gather method="GET" numDigits="{intDigitSize}" finishOnKey="#" action="http://example.com/example-callback-url/say?example=menu.xml">
          <Say>Welcome to Stark Industries. For customer service press 1. For techincal support press 2. For sales and marketing press 3. To repeat the selection press 4.</Say>
Step 2: Once a selection is made, route the call to the chosen service category. All <gather> inputs will be created via http $_GET method - default value is http $_POST and this will be processed accordingly in the basic class called "IVR".
To do this, build an XML string for your menu and sub menu; then use the <gather> tag to retrieve user response. After this, call your web service via the action property. To let the user end a particular call you can customize it by selecting from acceptable values 0 to 9, * or the default #. This will be supplied to the finishOnKey property.
     // pseudocode of basic web service for rendering xml menus and routing the request
     // create your XML main menu
     header(“Content type:text/xml”);
    $xml_menu = <<<XML
    <Response>Welcome to Stark Industries</Say>
         <Gather method="GET" numDigits="{intDigitSize}" finishOnKey="#" action="http://example.com/example-callback-url/say?example=menu.xml">
              <Say>Welcome to Stark Industries. For customer service press 1. For techincal support press 2. For sales and marketing press 3.</Say>
//create your xml sub menu items
     $xml_submenu = <<<XML
     <Response>Welcome to Stark Industries</Say>
          <Gather method="GET" numDigits="{intDigitSize}" finishOnKey="#" action="http://example.com/example-callback-url/say?example=menu.xml">
              <Say voice="{voiceType}">Customer Service the choices are: Account Inquiry press 1. Lost or Stolen Card press 2. Talk to Customer Service press 3.</Say>
Well, that’s it for now! If you have any thoughts about the app or just want to share your own taco-related thoughts, you can comment below. If you want a reminder, sign up to get notifications of new blog posts. I'll be back in next week were I'll finish detailing the remaining few steps with another installment of TaCode Tuesday.

Topics: Communication Apps, Ideas, TaCode Tuesday, cPaaS