Google Voice, embed widget - various articles

Uploaded by on Apr 3, 2009
How to use Google Voice with WebStarts. Create a free website and add a Google Voice Call Widget. Find out more at http://WebStarts.com

How to Get the Google Voice Widget on WordPress to Work

by Leonardo R. Grabkowski, Demand Media

The Google Voice embed code will not inherently work with WordPress. To get the widget to work, you'll need to first install the Google Voice plug-in. Once you add the plug-in, you can easily add the embed code to enable the Google Voice "Call Me" widget. The plug-in even lets you display your available hours. Google Voice is not compatible with WordPress blogs hosted on WordPress.com. Only self-hosted WordPress sites can use the feature.

Step 1

Sign in to your WordPress administration page and click "Plugins." Click on "Add New," and then search for "Google Voice."

Step 2

Click on "Install Now" next to the Google Voice plug-in. Click on "Activate Plugin."

Step 3

Click "Call Me" on the Settings sidebar.

Step 4

Paste your Google Voice embed code into the box. If you don't have the embed code yet, sign in to your Google Voice account, click on "More" then click on "Embed." Highlight and copy the embed code. Click on "Save" to save the code.

Step 5

Click on "Widgets." Click on the "Call Me" widget and drag it into the widget area you want it to appear in. This opens the Options box.

Step 6

Choose the hours and days of the week you are available, and then click "Save."
South Melbourne based studio. Let's go for a coffee and chat.
Need help with web, social & apps? If its got a screen. We're on it.
Custom Designed Websites, Effective, Smart & Direct
Company, Business and Family Court Valuations Australia Wide.

About the Author

Leonardo R. Grabkowski has been writing professionally for more than four years. Grabkowski attended college in Oregon. He builds websites on the side and has a slight obsession with Drupal, Joomla and Wordpress.

Custom Google Voice Widget - Razvan Gavril

  • 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" />

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>

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

21 Comments Post a comment ↓