Voice Menus

Announcements

A couple of items in the news from last week:

• Using AI to help reduce AIDS
• Praekelt Foundation & Vumi
• Smartphone Dongle Diagnoses HIV & Syphilis

Design Notebooks

Let’s take a few minutes to discuss your Design Notebooks.

Voice Menus

SMS is great, but…

• Only supports 160 characters
• Assumes the device supports a language you understand well enough
• Assumes you can read and write

What languages do the most common devices support?

Android

iPhone

What countries support local phone numbers for Twilio?

Twilio International – Global Reach, Local Experience

Twilio Voice

In addition to SMS, Twilio supports voice. You can use voice using Twilio’s text-to-speech engine, or use recorded messages. Today we’ll be using the text-to-speech engine.

1. Download the source code for this week’s examples from the class Github Organization.
2. Unzip the  repository on your local machine and upload the contents to a new folder in the ‘www’ folder on your TCNJ web account.
3. Let’s try out the examples one by one.

Basic Voice

1. After you’ve uploaded the basic-voice.xml file to your TCNJ web account, log into Twilio, click into your number detail page, and edit the Voice request url for your number to point to ‘basic-voice.xml’.
2. Call your Twilio number.
3. What happened?

<!-- basic-voice.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Say>Hello Twilio!</Say>
</Response>

TwiML Say Documentation

Voice Attribute

Let’ experiment. Take a look at the documentation for the <Say> command paying particular attention to the ‘voice’ attribute.

1. Try changing the voice for your app.
2. Re-upload the your file to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
3. Call your Twilio number.
4. What happened?

Langauge Attribute

1. Once you’ve successfully changed the voice, try changing the language.
2. Re-upload the your file to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
3. Call your Twilio number.
4. What happened?

Twilio Voice Request Variables

Similar to our experience last week sending SMS messages, TwiML for Voice also supports a number of request variables we can access. Like last week, we can use this to create a simple phone book so we can recognize callers.

1. Change (or add) the phone record in the phone book array in your source code.
2. Re-upload the your file to your TCNJ web account and edit the Voice request url for your number to point to voice-request-vars.php.
3. Call your Twilio number.
4. What happened?

<!-- voice-request-vars.php -->

<?php
$from = $_REQUEST["From"];

// make an associative array of senders we know, indexed by phone number
$phonebook = array(
    "+12152642459"=>"Professor Thompson",
);

$name = "étranger";

// if the caller is in our phonebook, then greet them by name
// otherwise, refer to them as étranger
if(isset($phonebook[$_REQUEST['From']])) {
    $name = $phonebook[$_REQUEST['From']];
}
header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
?>
<Response>
    <Say voice="alice" language="fr-FR">Allô <?php echo $name ?>.</Say>
<Response>

TwiML Voice Request Variables

Gathering Input

Now let’s see if we can gather information interactively from the user.

1. Upload numbergame.xml and checknumber.php to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
2. Call your Twilio number.
3. What happened?

 <!-- numbergame.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="./check_number.php" method="get" finishOnKey="*">
        <Say>I'm thinking of a number between 1 and 10, enter the number then press star.</Say>
    </Gather>
</Response>

 /* checknumber.php */

<?php
$number = 5;
$guess = $_REQUEST['Digits'];

header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

if($guess == $number){
    echo "<Response>";
    echo "<Say>Correct. The number was ".$number.". You win!</Say>";
    echo "</Response>";
} else {
    echo "<Response>";
    echo "<Say>Incorrect. Guess again.</Say>";
    echo "<Redirect method="POST">http://yourserver/numbergame.xml</Redirect>";
    echo "</Response>";
}

TwiML Gather Documentation

Navigating a Tree

Now let’s navigate a simple voice menu.

1. Upload class-menu.xml and class-menu-processor.php to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
2. Call your Twilio number.
3. What happened?
4. How could you improve the user’s experience?

 <!-- class-menu.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="./class-menu-processor.php" numDigits="1">
        <Say>Welcome to Interactive Design for the Developing World, Spring 2015.</Say>
        <Say>For the course description, press 1.</Say>
        <Say>For the course location and meeting time, press 2.</Say>
        <Say>To leave a message for the instructor, press 3.</Say>         
    </Gather>
    <!-- Timeout defaults to 5 seconds, if customer doesn't input anything, redirect to prompt and try again. -->
    <Say>Sorry, I didn't get your response.</Say>
    <Redirect>./class-menu.xml</Redirect>
</Response>

/* class-menu-processor.php */

<?php 

$selection = (int) $_REQUEST['Digits'];
header('Content-type: text/xml');

echo '<?xml version="1.0" encoding="UTF-8"?>'; 
echo '<Response>';
 
switch($selection){
    case 1:
        echo "<Say>For many in the United States...</Say>";
    break;
 
    case 2:
        echo "<Say>I M M 470 0 3, meets every Monday morning, 9 30 a m to 12 20 p m, in A I M M 2 22.</Say>";
     break;
 
    case 3:
        echo "<Dial>215-264-2459</Dial>";
    break;
 
    default:
        echo "<Say>I didn't understand your selection.</Say><Redirect>./class-menu.xml</Redirect>";
    break;
}
 
echo '</Response>';
?>

TwiML Redirect Documentation

Initiating A Call

Let’s look at how you can call out to initiate an interactive phone menu. This won’t work from your TCNJ account. You’ll need other outside hosting or to run something like MAMP on your local machine.

Twilio REST API: Making Calls

Other TwiML Verbs

TwiML – the Twilio Markup Language

Challenge

• Break up into teams along the lines of the partner organization you chose as part of last week’s assignment.
• Create a voice menu for your selected partner organization, including options for the most important informational elements of your chosen organization (program, hours of operation, location, etc.).
• What language would you use if you complete control over language?
• How might you use SMS in support of your voice menu?

Assignment

SMS & IVR

Create a new page in your Design Notebook and name it “SMS & IVR” along with today’s date.

• Read the Real World Examples chapter in the Freedom Fone User & Advocacy Guide.
• Identify one (or more) of the examples and explain how a similar approach might work with your favorite Partner Organization from last week’s assignment.

Other Examples in the “Wild”

Create another page in your Design Notebook, naming it “SMS & IVR Examples” and today’s date.

• Demonstrating your Google-foo, search the web for other SMS and/or IVR projects that have been implemented by organizations like your favorite Partner Organization from last week.
• Has the project been successful? How specifically did they engage with their audience(s) and with what technologies (SMS, IVR, 3rd party messaging apps, etc)? Could you replicate their project for your organization? What would you do differently?

*Assignments are due before class begins on Mondays. Be prepared to present your work in class for discussion.