Hacking Google Voice Call Widget

Share This:

So I recently had a client that I was building a website for, and he wanted to have it so people could call him easily from the website. I imediately thought of Google Voice. However the Google Voice Widget that Google provides was not an option mainly because it uses Flash. This would cause this responsive website to have some issues when it comes to mobile devices that don’t support Flash.

The solution was to hack the Google Voice Widget and make it work without Flash. There where several languages I could have chosen but in the end I chose JavaScript.

When Google Voice Generates the Google Voice Widget HTML code it looks similair to the below.





<object type="application/x-shockwave-flash" data="https://clients4.google.com/voice/embed/webCallButton" width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton" /><param name="wmode" value="transparent" /><param name="FlashVars" value="id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" /></object>

After examining the above code we can see that making a Javascript snippet that uses Google Voice is fairly simple.
The type="application/x-shockwave-flash" indicates that it is Flash, which we already knew. The data="https://clients4.google.com/voice/embed/webCallButton" is data that gets sent to the Google Voice servers. This was important to know, because without that the call could not be made. Then we have value="id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" this is our unique Google Voice ID.

After some minor trial and error I was finally able to throw together the following code.

function click2call(button_id, cid_number, cid_name) {
var iframe = document.createElement('iframe');
iframe.style.width = 0;
iframe.style.height = 0;
iframe.style.border = 0;
document.body.appendChild(iframe);


var doc = null;
if(iframe.contentDocument)
doc = iframe.contentDocument;
else if(iframe.contentWindow)
doc = iframe.contentWindow.document;
else if(iframe.document)
doc = iframe.document;
if(doc == null)
throw "Document not initialized";
doc.open(); doc.write('');doc.close();
var form = doc.createElement("form");
form.method="post";
form.action="https://clients4.google.com/voice/embed/webButtonConnect";
input = doc.createElement("input");
input.type="text";
input.name="buttonId";
input.value= ""+button_id;
form.appendChild(input);
input = doc.createElement("input");
input.type="text";
input.name="callerNumber";
input.value= ""+cid_number;
form.appendChild(input);
input = doc.createElement("input");
input.type="text";
input.name="name";
input.value="Testing";
form.appendChild(input);
input = doc.createElement("input");
input.type="text";
input.name="showCallerNumber";
input.value= "1";
form.appendChild(input);
doc.body.appendChild(form);
form.submit();
}

I then just needed to create an HTML form for the Javascript code. The end result of the HTML form looked like the following.





<input type="hidden" id="button_id" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
Name&nbsp;&nbsp;
<input type="text" id="cid_name" />
<br />
Number
<input type="text" id="cid_number" />
<br />
<button onclick="send_call()">Request a Call</button>




As of this point in time this works. But keep in mind that Google is always changing and this may not work for ever. But I do hope that one day Google will actually make a different type of Google Voice Widget.