No public Twitter messages.
  • facebook
  • twitter
  • linkedIn

Custom Google Voice Widget

  • March 22nd,
  • by Razvan Gavril

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

28 Comments Post a comment ↓

  1. victor said:

    hello sir,like your programmer!

    March 25, 2010

  2. chad said:

    I am getting what looks like an error while using your demo:

    ok=false

    Did you disable your demo? I love this idea, but am having a problem seeing it in action.

    July 14, 2010

  3. skysober said:

    Yup, it no longer works :(

    I get the “ok=false” when using in my webpage as well.

    August 7, 2010

  4. Razvan Gavril said:

    I think that wordpress removed my input type hidden when I last modified the post, that’s why you where seeing the ok=false. I’ve corrected it now.

    August 12, 2010

  5. jerold said:

    do have any custom google internation call widget?

    August 18, 2010

  6. Razvan Gavril said:

    Unfortunately I don’t think is possible to call a international number with google voice widget.

    If you have an available linux server you can use an asterisk or freeswitch with a voip provider to do that.

    August 18, 2010

  7. herman said:

    Works great! Only, like you said, the user’s redirected to the Google “ok=true” page afterward, which is a bummer. I know nothing about Ajax, and my site is run on the Blogger platform. Do you know of any way to use Blogger’s APIs to prevent the new page from loading?

    Thanks.

    August 22, 2010

  8. Bijan said:

    I get that “ok=true” page as well. Is there any way to get rid of that?

    August 27, 2010

  9. Razvan Gavril said:

    There is a way to get rid of that ‘ok=true’ but that will require posting the form in background, using ajax.

    In order to do a cross-domain http request, a ajax proxy is needed. Can even use flash if you want everything running on the browser (check FlashXMLHttpRequest).

    Since it’s such a high demand, I will try to write a short article this days and give a complete example on that.

    August 28, 2010

  10. Razvan Gavril said:

    As promised you can find the new article related to google voice widget here : Custom Google Voice Widget 2

    September 3, 2010

  11. Rick Falls said:

    Is there a way to have the widget call a pre-programmed number without having the person clicking on it type in a number to call ? Thanks.

    April 22, 2011

  12. Andrew Kirksey said:

    You are a life saver. I haven’t seen a finer explanation of a work around this in the last two years, hats off to you Razvan.

    May 8, 2011

  13. SAY THE TRUTH said:

    If you want help people to do some you know ,please tell them the truth or in a way they can use it. You code doesnt workkkkkkkkkkkkkkkkkkkkkkkkkkkk. kind of waist of our time.

    May 15, 2011

  14. say the truth said:

    Hey, I got it if you dont say some good about this website, you will be removed!!!!!!!!!!!!

    May 16, 2011

  15. Rachel said:

    This is brilliant. I just added a widget to my site. Thanks so very much!

    July 12, 2011

  16. Travis Neal said:

    This worked flawlessly! Another great tool for removing Flash from our sites. Not to mention the awesome ability to fully customize/design the input to work with my client’s brand.

    December 14, 2011

  17. Richard said:

    This worked great. Thank you for putting the time into this.

    Integrated onto my site and styled it with no problems at all.

    http://www.quickfixlv.com – Computer Repair & Technical Support

    December 31, 2011

  18. Vinitha Cijo said:

    i get ok=false while using

    March 1, 2012

  19. cyber_Gabe said:

    I copied the script above and I am getting the error:
    “ok=false”.
    I see that many of you have figured out how to fix it.
    Can someone please tell me how to fix it?
    Thank you

    March 14, 2012

  20. sachin said:

    i have used this code for my client website it was working but since last 2 days google call picture is not showing on pages but code is available online . is there any problem with google or any other problem can u give me solution for this ?
    Regards
    Sachin

    May 19, 2012

  21. Teby Stern said:

    This is my code can u please help me to make it work. Thanks.

    July 5, 2012

  22. Barbara said:

    I have a question about google voice installation problem. My cell is TRACKPHONE. I completed the installation process just fine until I was waiting for the phone to ring to input my code. My phone never rang. I tried many times. Am I doing something wrong or is TRACKPHONE not able to be set up on google voice? I know this is a bit atypical from your usual questions, but it is important to me to ask. Thanks.

    September 20, 2012

  23. mike said:

    Well i think they changed the widget. The very first instruction you give is to grab the id within the flashvars param. Well there is no longer an ID in that param.

    Now what?

    November 16, 2012

  24. mike said:

    Please ignore my previous post, and reply to this instead:
    Can you explain how to post the form with ajax?

    November 16, 2012

  25. TC said:

    If this script were coded with Ajax instead of Java Script could I hide the Google Call Widget ID the way that PHP hides the destination e-mail address in a form mailer?

    March 22, 2013

  26. Spencer Haley said:

    I am using this on my personal blog, SpencerHaley.com and it seems to have stopped working. I no longer get the “Call Sent” dialog box. Any ideas? I’m just starting to diagnose. Thanks, it’s a good tool you’ve given us.

    May 6, 2013

  27. vikash yadav said:

    I had tried your code but it return “ok=false”

    June 7, 2013

  28. Robert Selvage said:

    Your widget looks great. It styles using my WP Theme styles. It fits the widget box perfectly.

    When I try to use it, I get directly to this page:

    https://clients4.google.com/voice/embed/webButtonConnect

    with the message

    of=false.

    Any suggestions?

    June 25, 2013

Leave your comment: