Custom Google Voice Widget

Google Voice has very usefull click to call widget that you can add on your website but .. it’s flash it’s big and I don’t like it. I wanted something that I can customise and that can run without flash (ex. on iPhone) so I looked under the hood to see if I can create a html only widget, and it’s actually quite easy.

First you need to login in your google voice account and create a call widget from the Settings page. This is required as it creates a uniquid that we will use later. After creating the widget, copy the Embed string into a text editor. We’re going to extract only what we need from there. For example my embed string looks like this:

<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=4563a8e24f4009bcaf7122437e2f9bc0b15c192e&style=0" />
</object>

What we will use from all this is only the id flash parameter and the client server from google.

And now let’s create a html equivalent of the flash code. It’s actually quite simple as the flash doesn’t do anything else than sending a post to google server with some parameters.

<form method="post" action="https://clients4.google.com/voice/embed/webButtonConnect">
<input type="hidden" name="buttonId" value="4563a8e24f4009bcaf7122437e2f9bc0b15c192e" />
Caller Number:
<input type="text" name="callerNumber" />
<br />
Caller Name :
<input type="text" name="name" />
<br />
Show Caller Number :
<input type="checkbox" value="1" name="showCallerNumber" checked="checked" />
<br />
<button type="submit">Call Me</button>
<form>


Of course you should create your custom form, style it with css and it’ll look great. I recommend posting the form with ajax else the user is redirected to google’s page after clicking your button, is up to how you decide to use it.

Update : Continue reading the Custom Google Voice Widget 2