Uploaded by webstarts 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
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 1Sign in to your WordPress administration page and click "Plugins." Click on "Add New," and then search for "Google Voice."
Step 2Click on "Install Now" next to the Google Voice plug-in. Click on "Activate Plugin."
Step 3Click "Call Me" on the Settings sidebar.
Step 4Paste 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 5Click 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 6Choose the hours and days of the week you are available, and then click "Save."
Need help with web, social & apps? If its got a screen. We're on it.thedmgroup.com.au
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.
- March 22nd,
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" />
<input type="text" name="callerNumber" />
Caller Name :
<input type="text" name="name" />
Show Caller Number :
<input type="checkbox" value="1" name="showCallerNumber" checked="checked" />
<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