Successfully reported this slideshow.
Your SlideShare is downloading. ×

Real time voice call integration - Confoo 2012

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 80 Ad

More Related Content

Slideshows for you (20)

Similar to Real time voice call integration - Confoo 2012 (20)

Advertisement

More from Michael Peacock (20)

Recently uploaded (20)

Advertisement

Real time voice call integration - Confoo 2012

  1. 1. WHAT’S IN STORE • • • • • • • •
  2. 2. Live Coding
  3. 3. Live & Semi-live Demos
  4. 4. MICHAEL PEACOCK
  5. 5. SMITH ELECTRIC VEHICLES
  6. 6. NO. NOT MILK FLOATS ALL ELECTRIC, COMMERCIAL VEHICLES. (ANYMORE) Photo courtesy of kenjonbro: http://www.flickr.com/photos/kenjonbro/4037649210/in/set-72157623026469013
  7. 7. ALL-ELECTRIC COMMERCIAL VEHICLES
  8. 8. TELEPHONY INTEGRATION • • • • • • • • •
  9. 9. TELEPHONY INTEGRATION • • • • • •
  10. 10. MY FIRST EXPOSURE AS A DEVELOPER • • • • • • • •
  11. 11. PROVIDERS
  12. 12. TWILIO VS TROPO Twilio Tropo 30$ Free Credit Free for development Incoming and outgoing calls Send and receive SMS messages IVR: Interactive Voice Response DTMF: Record key presses Number provisioning Open VBX (Twilio project, with a Tropo fork) Twimlets File hosting Connect: for apps SIP: Additional Integration iOS Integration W3C: Speech Recognition Grammar Browser Integration IM Service integration
  13. 13. WHY? • •
  14. 14. WHY: CUSTOMER SERVICE • • • • • • • • • • •
  15. 15. WHY: LEAD TRACKING • • • • • •
  16. 16. WHY: VERIFICATION & SECURITY • • • • • • • •
  17. 17. WHY: MARKETING • •
  18. 18. HOW? INBOUND CALLS • • • •
  19. 19. XML
  20. 20. HOW: OUTBOUND CALLS • • •
  21. 21. Rest POST/GET XML
  22. 22. XML: HEADER AND WRAPPER • • • <Response> •
  23. 23. XML: PLAY • <Play> http://url-to-an-audio-file </Play> • loop
  24. 24. PLAY / HOLD • •
  25. 25. XML: ASK • <Gather> • action • method • timeout • numDigits • finishOnKey
  26. 26. XML: RECORD • <Record> • action method timeout finishOnKey • maxLength • transcribe • transcribeCallback • playBeep
  27. 27. TRANSCRIPTIONS • • • • • • •
  28. 28. XML: SEND A TEXT • <SMS> • to • from • statusCallback • action method
  29. 29. XML: TRANSFER THE CALL • <Dial> • action method timeout • hangupOnStar • timeLimit • callerId • • <Number>, <Client> <Conference>
  30. 30. MORE XML • <Hangup> • <Redirect> • <Reject> • <Pause>
  31. 31. XML IS GOOD...BUT... • • • • • 
  32. 32. HOW: REST • • • • • • • • •
  33. 33. SECURITY • • • • •
  34. 34. SANDBOX • • • • • •
  35. 35. HOW MUCH? Twilio Tropo Phone Numbers $1/month $3/month Inbound minutes 1c 3c / minute Outbound minutes 2c 3c / minute (international+) Toll free numbers $2/month* $5/month* SMS In 1c 1c SMS Out 1c 1c
  36. 36. MY APPLICATIONS • • • • • • • • •
  37. 37. WHY YOU MIGHT WANT TO USE IT
  38. 38. WHAT WE ARE GOING TO BUILD • • • • •
  39. 39. PHONE NUMBER VERIFICATION
  40. 40. PNV: GET THE DETAILS
  41. 41. PNV: CREATE THE UN-VERIFIED USER // unverified user; default verified status of false $user = new UnverifiedUser(); $user->setFullName( $_POST['full_name'] ); $user->setFullPhoneNumber( $_POST['number'] ); $user->generateRandomVerificationCode(); $user->save(); $userID = $user->getID();
  42. 42. PNV: MAKE THE CALL $twilioClient = new Services_Twilio( $sid, $token ); $call = $twilioClient->account->calls->create( $ourPhoneNumber, $countryCode . $telephoneNumber, 'http://my-url/verify/&user=' . $userID );
  43. 43. PNV: ASK FOR MORE // create a response / twiml object $response = new Services_Twilio_Twiml(); $gather = $response->gather( array( 'numDigits' => 4, 'action' => $url . '/verify/' . $userID ) ); $gather->say('This is the ' . $siteName . ' telephone verification service. To verify your telephone number, please enter the four digit code shown on your screen now.'); print $response;
  44. 44. PNV: VERIFY $code = (int) $_REQUEST['Digits']; if( $user->getVerificationCode() == $code ) { $user->verify(); } else { $this->askAgain(); }
  45. 45. PNV: ASK AGAIN $gather = $response->gather( array( 'numDigits' => 4, 'action' => $url . /verify- again/' . $userID ) ); $gather->say('Sorry, the code you entered was incorrect, please try again.'); print $response;
  46. 46. PNV: VERIFIED $response->say('Thank you, your phone number has been verified'); print $response;
  47. 47. HEARTBEAT • •
  48. 48. LEAD TRACKING
  49. 49. LEAD TRACKING: NUMBER PROVISIONING $twilioClient = new Services_Twilio( $sid, $token ); // search for a local canadian number $numbers = $twilioClient->account->available_phone_numbers->getList('CA', 'Local'); if( count( $numbers->available_phone_numbers ) > 0 ) { // buy the first we find $purchased = $twilioClient->account->incoming_phone_numbers- >create(array('PhoneNumber' => $numbers->available_phone_numbers[0]->phone_number )); $advert->setPhoneNumber( $numbers->available_phone_numbers[0]->phone_number ); $advert->setPhoneNumberSid( $purchased->sid ); } else { throw new Exception('No numbers available'); }
  50. 50. LEAD TRACKING: POINT THE NUMBER $purchased->update( array( 'FriendlyName' => 'Lead tracking for Michaels advert', 'VoiceUrl' => 'http://my-application- url', 'VoiceMethod' => 'POST‘ ) );
  51. 51. NEWLY PROVISIONED NUMBER
  52. 52. LEAD TRACKING: INBOUND CALLS • $dialledNumber = $_POST['To'];
  53. 53. CALLER ID?
  54. 54. LEAD TRACKING: MAKE A CONNECTION • • • • •
  55. 55. LOOKUP THE NUMBER
  56. 56. LOG THE LEAD
  57. 57. TRANSFER THE CALL $response = new Services_Twilio_Twiml(); $response->dial( $advertisersNumber, array('callerId' => $ourVerifiedNumber ) ); print $response;
  58. 58. APP: CONFERENCE SESSION FEEDBACK • •
  59. 59. LIVE DEMO: YOUR TURN
  60. 60. APPS: CONNECT • • • • • •
  61. 61. BROWSER: CLIENT • • • • •
  62. 62. MOBILE • • • • •
  63. 63. TWIMLETS • • •
  64. 64. OPEN VBX
  65. 65. A LOOK BACK AT TROPO • • • • •
  66. 66. TROPO: W3C: SPEECH RECOGNITION GRAMMAR • • • • • • •
  67. 67. W3C SPEECH RECOGNITION GRAMMER • • •
  68. 68. BASIC SPEECH RECOGNITION •
  69. 69. TROPO: SIP INTEGRATION • • •
  70. 70. WHICH TO USE • • • • • • • • •
  71. 71. FINAL THOUGHTS
  72. 72. DEMO APPLICATIONS • • •
  73. 73. THANKS & QA

Editor's Notes

  • Good morning, I’m here to talk about how you can integrate real time voice calls and mobile services into your web application.
  • Today I’m going to talk about:Telephony integration the providers availableWhat they offer and how they tend to workSome sample applications:-verify a users phone numberTracking phone leadsAnd providing feedback on eventsI’m also going to talk about how we use it at Smith Electric
  • I’m too much of a wimp to bring any live coding into the presentation however...
  • There are some live and semi-live videos. There were originally three live demos, however my phone doesn’t work here – so two of them are pre-prepared, and one is for you to join in with later.
  • For those of you who don’t know me; I’m Michael Peacock – I’m the web systems developer for Smith Electric Vehicles on their telemetry project. I’m an experienced lead developer, I spent 5 years running a small web design and development firm, writing bespoke CMS, E-Commerce and CRM solutions. I’ve written a few PHP related books, and volunteer with the PHP North-East user group in the UK.You can find me on twitter, or contact me if you have any questions later.
  • Smith are the worlds largest manufacturer of all electric, commercial vehicles. Founded over 90 years ago to build electric delivery vehicles – both battery based and cable based. In 2009 the company opened its doors in the US, and at the start of last year the US operation bought out the European company which brings us to where we are today.
  • Normally when I tell people I work with Electric Vehicles, they think of hybrids like the Prius, or they think about passenger electric vehicles such as the Nissan Leaf. When I tell them its COMMERCIAL electric vehicles, they think about milkfloats or airport passenger buggies.What we actually make are large scale, fully electric delivery and transport vehicles.
  • These vehicles range from depo based delivery vehicles to home delivery vehicles to utility applications, military applications right through to the american school bus.
  • Telephony integration gives us access to a range of features directly in our web applications. When it comes to calls we can:Make callsReceive callsRecord what a user is saying and even transcribe those callsAnd log the key pressesWith SMS and mobile integration we can send and receive text messages (a fairly common service / API now)
  • We can also provision numbers, and work with text to speech, speech to text and different languages, accents and voices.
  • I was first given exposure to integrating calls and texts into websites and web applications six years ago. The first was a gambling website which needed to verify their customers landline phone numbers. They used a complicated and expensive service to get the job done – and all it did was verify the number.Sending and receiving text messages was some what easier, back then it was still a clunky process – now there are many services which offer this. I’m going to be focusing more on call integration.
  • There are two main players in the field:Twilio and tropo; both are good and both are big players – we will review them before diving into building phone powered applications.
  • With both providers its free to get started – either with free credit or with free development environments. They both support the core features such as sending and receiving calls, text messages, IVR menus, recording key presses number provisioning. However they have some pretty key differences; Twilio has browser and mobile integration, as well as the ability to connect to other twilio accounts – allowing you to sell your app, while letting your customer pay for usage; whereas Tropo provide integration with SIP, Instant messengers and can actually process requests based on what the caller says, not just what they press.
  • Why would you want to do this?Most people I talk to say one of two things:Phone integration – wow thats really cool there are loads of things I can do with that- Why would I want to do that?Lets look through some potential use cases.
  • Customer service:Order dispatched- thanks for the order- rate your purchaseWould you like a call back?
  • Tacking leadsLeads which are still based on callsCalling to arrange to look at a used car, you would want to call the owner but the site advertising the car would want to keep track on how useful it was being, while also protecting the seller by not giving out their real phone numberMany big companies use number provisioning for tracking leads. Now we can too.We could even integrate it into a CMS for A/B testing
  • Verify phone numberTwo factor authConfirming critical actions/transaction
  • Say something with the Say tagWe can repeat what we sayEven change the gender of the voiceThe accent of the voiceAnd even the language
  • We can play audio files with the Play tag, supplying the Url to a file,And we can loop the file to with the loop attribute
  • Twilio gives us a whole bunch of creative commons hold music if we want it!
  • We can use the Gather tag to ask the caller a question, then use the appropriate attributes to set:Where to submit the response toHow to send the responseHow long we should wait for a responseHow many digits we are expecting, is this a 4 digit pin or a phone number?And/or should we wait for a specific key press to class the input as over
  • We can also record what the caller says,Action method timeout and finish atributes as before a maximum length of the recording we can opt to have the recoding transcribed and the transcription sent to a callbackUrlWe can even control if the call should play a beep sound before the caller leaves their message.
  • The transcription service brings some caveats:Its a paid for service the maximum duration is 2 minutesThe call back contains the text of the call, if the transcripotion succeeded or failed and the resource properties of the transcription so we can access it using the API later
  • We can send a text message with the SMS tag, specifying:Who to send it to who to send it from (must be verified or owner)A call back for success/failure
  • Within an active call we can dial additional numbersThis can be calling another number, a user using the twilio client, or creating a conference bridge.
  • We also have some tags to hangup, redirect the call, reject the call and pause
  • Being XML based makes it really easy to write apps, but XML is really tedious to write,We dont want it lying around solution: client library; it generates it for us
  • How and why does the rest side of the service work: we use it for phone numbers to:SearchBuyUpdate and delete numbersWe use it to make a callAnd we use it to send a text (independantly, as opposed to within the flow of a call)
  • How can we be sure its twilio communicating with us, someone could just be calling our application and pretending to be someone with a specific number?Twilio signs requests- it contains a hash of the various paramaters- read the manual, I didn;t at first and spent ages adding hacks and tokens into my apps when they wre not needed
  • How do you debug phone apps?Powerful debugging toolLogs each time an error occursGives full output of what twilio sent and what it received.
  • Sandbox..
  • Field serviceFly around the world to install a GPRS unit- dont have internet access themselves to check the data comes throughSo they phone up and askDriver alertsRoute deviationRange issues as a result
  • I’m not going to answer this one; hopefuly by now, you already have a few ideas..
  • Let’s build some stuff:Phone number verificationLead trackingConference talk feedback
  • Requirement: You need to verify the validity of a users phone number.Ask the user for their number and tell them an access codeCall the numberAsk for the access codeCheck the access codeVerify the number
  • Create an unverified user object, this has a verified status property of falseUse data posted in a form to populateGenerate a random codeSave the userGet the ID
  • Initialise the twilio client, with our secret API detailsCreate a callSet out outoing number,The incoming number,And the URL which will generate the XML for the call
  • We need to ask for a response:Create the twilm objectRequest 4 digits and post them back to our appAsk the caller to provide the code and output the XML
  • When processing the callback, get the digits they pressedVerify they are correctVerify or reject the verification
  • Got the code wrong? Just ask again
  • All OK? Lets tell them
  • Use a JS heartbeat to look at the databasr to see if the users number is verified, when it is bounce them to a page welcoming them as opposed to the page showing the verification code.
  • Lets walk through itUser signs upCode generatedThey receive the callEnter detailsAccount verified
  • Advertiser signs upA number is automatically assigned to themCalls to that number route to our main tracking applicationCall is loggedCaller is transferred
  • Find a local canadian number, grab the first one and buy it
  • Update it to point to our App
  • We have a new number
  • Twilio posts the number used, so we can have multiple numbers pointing to one app
  • We can even get caller ID data if we want
  • We have the numberLook it up in the databaseFind the actual advertisers / lead owners numberLog the lead conversion (call)Connect the call

×