Custom Google Voice Widget 2
- September 3rd,
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
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, 2010robert said:
i’ve downloaded the file. And i wonder where should i put my google value?
November 3, 2010Jimbo 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, 2010John 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, 2010ann said:
awesome job, thanks so much for making this available!
April 5, 2011modum said:
Nice….very nice.
May 3, 2011Jason 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, 2011eric 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, 2011Chellie 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, 2012Jake said:
It works. but can’t figure how to show “Connecting Your call” message to user. any suggestions?
February 10, 2012Steve 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,
February 26, 2012Steve
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, 2012Lance said:
Thanks! This was VERY helpful!
August 8, 2012DL 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