Spry :: Vonage - Click 2 Call - Leaner and Meaner

December 22, 2006 · No Comments

Based on some of Ray's suggestions, I've re-tooled the Click-2-Call-U sample. We're no longer returning datasets, but just the raw data returned from Vonage. And like Peter over at ColdFusion Weekly asked, no I'm not logging userame/password pairs. To that point, the Coldfusion code is here too, in the interest of full disclosure: Client-side HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Spry Example 6 - Vonage/CF/Spry Integration</title>
      <!-- Begin Spry Includes -->
      <script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
      <!-- End Spry Includes -->
      
      <script type="text/javascript">
         function makeVonageCall(phoneForm)
         {
            var numberToCall = phoneForm.phoneNumber.value;
            var userName = phoneForm.userName.value;
            var password = phoneForm.password.value;
            var srcNum = phoneForm.userNumber.value;
            var srcURL = "makeCall.cfm?numberToCall=" + escape(numberToCall) + "\&myVonageUserName=" + escape(userName) + "\&myVonagePassword=" + escape(password) + "\&myPhoneNumber=" + escape(srcNum);
            Spry.Utils.loadURL("GET",srcURL, true, callHandler);   
         }
         
         function callHandler(request)
         {
            var statusCode = "Vonage Status: " + request.xhRequest.responseText;
            hideLoader();
            alert(statusCode);
         }
         
         function showLoader()
         {
            Spry.Utils.setInnerHTML('callStatus', '<img src="/assets/images/ajax-loader.gif"/>');
         }
         
         function hideLoader()
         {
            Spry.Utils.setInnerHTML('callStatus', '<br/>');
         }
      </script>
      <style>
         body
         {
         font-family:"Microsoft Sans Serif", Arial, Helvetica, sans-serif;
         font-size: 11px;
         }
         .heading
         {
         font-weight: bold;
         }
         .description
         {
         width: 600px;
         }
         .capMe
         {
         text-decoration: capitalize;
         }
         .SpryHiddenRegion
         {
         visibility: hidden;
         }
      </style>
   </head>
   <body>
      
      <p>Use this form to request a callback.  The mechanism uses <a href="http://www.vonage.com" target="_blank">Vonage's</a> click-to-call 
      mechanism to initiate a call between the number supplied and a pre-defined Vonage user.</p>
      
      <form id="phoneForm" name="phoneForm">
         Number To Call (US Phone Numbers Only):  <input type="text" id="phoneNumber" name="phoneNumber" /><br/>
         Vonage User Name: <input type="text" id="userName" name="userName" /><br/>
         Vonage Password: <input type="password" id="password" name="password" /><br/>
         Your Vonage Phone Number (format: 14045551212): <input type="text" id="userNumber" name="userNumber" /><br/>
         <input type="button" id="phoneButton" value="Start Callback" name="phoneButton" onclick="showLoader();makeVonageCall(phoneForm);"/>
      </form>
      
      <div id="callStatus">
      </div>
   </body>
</html>

Server-side CFML:

<cfif isDefined("URL.numberToCall") and URL.numberToCall NEQ "">
    <!--- Setup all our variables to use in making the request --->
   <cfset myVonageUserName = URL.myVonageUserName/>
    <cfset myVonagePassword = URL.myVonagePassword/>
    <cfset myPhoneNumber = URL.myPhoneNumber/>
   <cfset numberToCall = URL.numberToCall />
   <!--- Make sure we have a valid US phone number --->
   <cfif isValid("telephone",numberToCall)>
       <cfset vonageURL = "https://secure.click2callu.com/tpcc/makecall?username=#myVonageUserName#&password=#myVonagePassword#&fromnumber=#myPhoneNumber#&tonumber=#numberToCall#"/>
       <!--- Initiate the click-to-call request via CFHTTP --->
       <cfhttp url="#vonageURL#" result="callResult">
       <cfif mid(callResult.fileContent,1,4) NEQ "000:">
          <cfoutput>#callResult.fileContent#</cfoutput>
          <cfelse>
             <cfoutput>#mid(callResult.fileContent,5,len(callResult.fileContent))#</cfoutput>
      </cfif>
   </cfif>
</cfif>