Spry :: Leverage Vonage Click-To-Call with ColdFusion

December 8, 2006 · 1 Comment

Ok, I was poking around for a way to use Vonage's Click-To-Call service with Address Book in OS X. I found a way to do that via AppleScript and was quite pleased with the way it worked. Then I took a look at the code and thought to myself: "I can do that with ColdFusion." I took it a bit further and thought: "I can do that with ColdFusion and Spry!" I would like to say that this was incredibly difficult to do, but it's not. That's the great thing about ColdFusion and Spry. Developers can leverage these tools to do some pretty cool things. The CFM page is pretty basic. I do some validation to make sure we're only going to use US numbers because I'm not really into running up a phone bill. This is only going to run on CFMX7 because of the use of the isValid() function. You can modify it to use your own regex validation if you like to make it backwards compatible with older CF versions.

<cfif isDefined("URL.numberToCall") and URL.numberToCall NEQ "">
    <!--- Setup all our variables to use in making the request --->
   <cfset myVonageUserName = "yourUserName"/>
    <cfset myVonagePassword = "yourPassword"/>
    <cfset myPhoneNumber = "14045551212"/>
   <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">
       <!--- Check for errors from Vonage and make sure our request was good --->
      <cfif mid(callResult.fileContent,1,3) NEQ "000:">
         <!--- Build Success XML --->
         <cfsavecontent variable="retXML">
            <vonageCall>
               <results>
                  <resultText>Call Initiated To <cfoutput>#numberToCall#</cfoutput></resultText>
                  <resultCode><cfoutput>#callResult.statusCode#</cfoutput></resultCode>
               </results>
            </vonageCall>
         </cfsavecontent>
         <cfelse>
            <!--- Build Vonage Failure XML --->
            <cfsavecontent variable="retXML">
               <vonageCall>
                  <results>
                     <resultText>Call Failed To <cfoutput>#numberToCall#</cfoutput> - Vonage Error</resultText>
                  </results>
               </vonageCall>
            </cfsavecontent>
      </cfif>
      <cfelse>
      <!--- Build Validation Failure XML --->
      <cfsavecontent variable="retXML">
         <vonageCall>
            <results>
               <resultText>Call Failed To <cfoutput>#numberToCall#</cfoutput> - Invalid Phone Number</resultText>
            </results>
         </vonageCall>
      </cfsavecontent>
   </cfif>
   
   <cfelse>
        <!--- Build Initial XML --->
      <cfsavecontent variable="retXML">
         <vonageCall>
            <results>
               <resultText>Call Not Yet Placed</resultText>
            </results>
         </vonageCall>
      </cfsavecontent>
</cfif>
<!--- Return XML --->
<cfcontent type="text/xml">
   <cfoutput>#retXML#</cfoutput>
</cfcontent>

The HTML is even more rudimentary. There is some javascript in there to re-load the dataset when the button is clicked, but other than that, it's very straghtforward.

<!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/xpath.js"></script>
      <script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
      <script type="text/javascript" src="/assets/js/spry/SpryXML.js"></script>
      <!-- End Spry Includes -->
      
      <script type="text/javascript">
         var dsCall = new Spry.Data.XMLDataSet("makeCall.cfm", "/vonageCall/results", { useCache:  false});         
         function makeVonageCall(phoneForm)
         {
            var numberToCall = phoneForm.phoneNumber.value;
            dsCall.setURL("makeCall.cfm?numberToCall=" + numberToCall);
            dsCall.loadData();   
         }
      </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">
         Callback Phone Number (US Phone Numbers Only):  <input type="text" id="phoneNumber" name="phoneNumber" /><br/>
         <input type="button" id="phoneButton" value="Start Callback" name="phoneButton" onclick="makeVonageCall(phoneForm)"/>
      </form>
      
      <div spry:region="dsCall" class="SpryHiddenRegion">
         <div spry:state="loading"><img src="/assets/images/ajax-loader.gif"/></div>
         <div spry:state="error">An error occured loading your dataset.</div>
         <div spry:state="ready">   
            <p>
               <span style="font-weight:bold" spry:content="Status: "></span><span spry:content="{dsCall::resultText}"></span>      
            </p>
         </div>
      </div>
   </body>
</html>

I almost posted a working sample of this, but then I got wise because I was using my own Vonage account to test it. A live, working sample, would have people using my account to have my phone dial any number at any given time. Not good. I'm not going to post a working copy of this sample that uses my account info. However... If you have an account with Vonage, you can take a look at this sample and use your own Vonage account to test the sample.

Spry :: Leverage Vonage Click-To-Call with ColdFusion

Tags: AJAX · ColdFusion · Spry · Vonage

1 response so far ↓

1 Mark // Aug 28, 2009 at 12:38 PM

I am a novice. I had read https://secure.click2callu.com/ & was searching the web for the an easy way to get this working. I would like a click to call button on my site, where it would ring the customers number, call my office number, & then connect us using my vonage account, while keeping my acoount information private. I know the code is complicated, but the setup should be easy, just enter my user name & password into the script, & my vonage ph number, then upload the script to my server. Can you give me some step by step instructions on how to do this? You should make a form generator, that does this. Thanks for your help.

Andrew Powell

Into The Mind of A Solutions Architect