No public Twitter messages.
  • facebook
  • twitter
  • linkedIn

Custom Google Voice Widget 2

  • September 3rd,
  • by Razvan Gavril

In a previous article I covered creating a custom google voice widget using html alone. A had a lot of questions asking me how to submit that html form without refreshing the page. Well the answer is here…

How to do it

First, some technical details to those interested. There a lot of ways to submit a form in background but it’s something that we need to consider for this particular problem. We’re forced to do a cross domain post from our website to google, that means that classical ajax stuff is not going to work here.

First options that come to my mind are: server side ajax proxy or a flash ajax proxy … but that would require something more that html and I’ve wanted a simple widget. Since I don’t care that much on what google server is sending as a reply to our post, we can use iframes and code everything in javascript.

Ok so the problem is solved like this. Create a hidden iframe, create a form in the iframe and submitted that form to google… or download the javascript function that I wrote.

Let me have it

It’s a simple javascript function and a demo html that shows you how to use it. You’re encouraged to download the google-click2call.zip and use it as a base for you widget. You can also try a basic demo on this very page:

Button ID

Number



18 Comments Post a comment ↓

  1. Kirk said:

    I would love to get this working. When I use the HTML file I get the following error when I debug

    send_call is not defined

    Not being a coder myself I could not figure it out.

    Thanks

    October 21, 2010

  2. robert said:

    i’ve downloaded the file. And i wonder where should i put my google value?

    November 3, 2010

  3. Jimbo Elliot said:

    Nice work there Razman. Being a novice im not quite there yet. I have follow you this far. Looking at this code (click2call) prescribed here. Like my friend above I need to know “Where to Stick it” LOL. All the Best. Email me I have a php java agax assignment for review.

    November 6, 2010

  4. John A. said:

    Sweet. With just a couple mods I was able to add the “hide from Caller ID” checkbox and get it working.

    November 20, 2010

  5. ann said:

    awesome job, thanks so much for making this available!

    April 5, 2011

  6. modum said:

    Nice….very nice.

    May 3, 2011

  7. Jason Burnett said:

    Am I completely missing something or does this demo fail completely? I never receive a call though I have entered my widget id number and a number to call…I even get the validation response, but no call. Any suggestions?

    September 24, 2011

  8. eric said:

    this would be great if you gave a step by step tutorial on how to implement this on a website. I downloaded the file, opened it up, I see the code, but not sure what to do from there. Please give detailed instruction.

    Thank you for all of your hard work!

    December 13, 2011

  9. Chellie said:

    It’s fantastic that you’ve done this. I agree with a number of folks who I assume aren’t as technically inclined and talented as you… we need step by step instructions. I am going back to putting the original in my sidebar but it’s so darn big.

    January 3, 2012

  10. Jake said:

    It works. but can’t figure how to show “Connecting Your call” message to user. any suggestions?

    February 10, 2012

  11. Steve said:

    I got it to work great. One small problem I could not resolve: When I click call, It opens up a new tab / page that is blank except for the words “ok=true”. How do I stop this page from opening. If you’ve explained it, I missed how to do it.

    Thanks,
    Steve

    February 26, 2012

  12. Grant said:

    First of all, let me say to Mr. Gavril that the second version (javascript) of your widget modification is great. It is so superior to the standard GV Widget. I don’t understand the folks that don’t know what to do once they have downloaded the zip file. Open the file, open the “click2call.html” page in your browser and it works. It’s just *THAT* simple. Now, if you wish to incorporate this into another webpage, simply cut and paste the portion of the html file that is between the tags in between your html file’s tags. Put the rest of it into whatever place between the tags your little heart desires. Make sure you have the .js file in the same directory as your html file.

    April 25, 2012

  13. Lance said:

    Thanks! This was VERY helpful!

    August 8, 2012

  14. DL said:

    GOOD SHOW Razvan!!!!!!

    I wasn’t able to make the show caller id work however I do want to provide my final html that will only require you to add your Google voice button id. I am going to indicate where to paste this with . So the only thing you will have to do is create your google voice widget so that google provides you with your google voice button id associated with your google voice number.

    Call html file starts below:
    ————————————————————————
    /* Click 2 Call to Google Voice */
    /* */
    /* Developed by : Razvan Gavril */
    /* License : GPL */
    /* */
    /* More info here: http://razvangavril.com/web-development/custom-google-voice-widget/ */

    function send_call() {
    var button_id = document.getElementById(‘button_id’).value;
    var cid_number = document.getElementById(‘cid_number’).value;
    var cid_name = document.getElementById(‘cid_name’).value;
    click2call(button_id, cid_number, cid_name);
    }

    <input type="hidden" id="button_id" value="”/>
    Contact Name  

    Contact Number  

    Request a Call

    ——————————————————————-

    1. Copy and paste in between the dashes and then input your google button id where it says
    2. Save html
    3. Upload saved html and javascript file to your server
    4. Open in browser the html file you saved.
    5. Enter your name and phone number into the form and call yourself!
    6. Integrate html into existing website or create a widget for placement on your site or ???????

    Thanks again Razvan

    August 28, 2012

  15. Rick said:

    Thank you!!!

    June 26, 2013

  16. Eventi Developer said:

    I simply downloaded demo files, run it , but its giving this error: Refused to display ‘https://clients4.google.com/voice/embed/webButtonConnect’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.

    Help please.

    March 19, 2014

  17. Robert Elder said:

    Well, I can get the callBack working without issue, however the snag many folks are dealing with now is the “press 1 to dial” dialog presented over the phone. Is there a flag or something to turn off that message?

    April 2, 2014

  18. Robi Luko said:

    Thanks … This worked well for me, but I would like to change the color of the “Call Robi” button to match the site’s colors.

    Is there a way to do that without much programming knowledge?

    Robi

    May 12, 2014

Leave your comment: