EasyCFM.COM - View Tutorial

Making Calls with Coldfusion (For Use With Vonage)

By: James Harvey

New fads are hitting the internet each and every day, and the next big thing is Internet Calling.

Well this seems to be a viable new technology that looks to be staying and not leaving anytime soon. In this tutorial, I'm oging to show you how to implement a 'Click-to-Call' feature using Spry and ColdFusion.

There is a small catch with this tutorial, it is for use with Vonage's 'Click-to-Call' service.

<cfif isDefined("URL.numberToCall") and URL.numberToCall NEQ "">

   <cfset myVonageUserName = URL.myVonageUserName/>
<cfset myVonagePassword = URL.myVonagePassword/>
<cfset myPhoneNumber = URL.myPhoneNumber/>
   <cfset numberToCall = URL.numberToCall />
   
   <cfif isValid("telephone",numberToCall)>
    <cfset vonageURL = "https://secure.click2callu.com/tpcc/makecall?username=#myVonageUserName#&password=#myVonagePassword#&fromnumber=#myPhoneNumber#&tonumber=#numberToCall#"/>
    
    <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>


<!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>
      
      <script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
      

      <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>

This is a solid method for making phone calls via the internet (Using Vonage's Click-to-Call Feature).

About This Tutorial

Author: James Harvey

Skill Level: Intermediate

Platforms Tested: CFMX,CF8
Total Views: 10,594
Submission Date: August 27, 2009
Last Update Date: August 27, 2009
All Tutorials By This Autor: 12

Discuss This Tutorial