Spry :: Vonage - Click 2 Call - Leaner and Meaner
December 22 2006 by 
Andrew Powell
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>
I like to try to provide working samples of my work, so here is the sample of this functionality:
Spry-Vonage Sample
Posted in ColdFusion | Spry | AJAX | Vonage | 
0 comments