Custom Google Voice Widget Creation

Garth Henson
|
JavaScript
|
4 Nov 2012

If you use Google Voice, you may be familiar with the option of creating widgets that you can place on your website which allow people to enter their phone number and request to be connected to your Google Voice number. There are several benefits to this type of behavior, but the best of these is that you can offer people the opportunity to call you without ever publicly displaying your phone number. What’s more, each new widget creates a unique buttonId associated with it that allows you to record a custom voicemail response for users of that widget.

Of course, the downside to use of the widget system is that it is not customizable at all, and it is only available in the form of a rather large Flash button to place on your site. After some digging and research, I finally figured out how to post requests to your unique buttonId via standard HTML forms. Taking this to the next level (and much more usable, I might add) lets us create a manual Ajax handler that will make our request to connect the user without ever leaving our page.

The Request Handler

The first step is to dive into the URL to which we need to post our data. If you have looked into the source for a widget, you’ll see a URL that references a buttonId along with a callerName. These are the two form fields you’ll need to require from your users. Next, we simply need to post the values of our form to the Google servers (I’m using PHP’s Curl API to do so for this example):

NOTE: You must have your headers right for Google to accept the request. I played with several different options, and this is the best combination of headers I could find to guarantee Google won’t respond with a 403 to your request.

The Client Code

So, as one might expect, with something as straight forward as a Curl call, we want to create a small client code widget to allow us to communicate to the user what is happening. While every use case is different, here is the basic jQuery POST I’m using for my own widget:

Once we tie both these together, we can create manual requests to Google and have individual inbound mailbox recordings as needed.

So, a step-by-step might go something like this:

  1. Create a new widget via your Google Voice admin panel
  2. Create a server script that can POST a Curl request to the Google servers
  3. Create an HTML form to collect a phone number and caller name from the visitor
  4. Create a JavaScript interface to collect and post your user data to your server handler

As always, communicate with your users when you have unexpected failures, and possibly even give the option to reset the form and try again. I apologize for the rushed nature of this post, but I have several people who are waiting for the basic overview. When I have time, I’ll try to post my example code for people to try out and see exactly how things might be formed.

Enjoy!

Garth Henson
Garth is as a lead engineer at The Walt Disney Company, specializing in JavaScript applications.

Recent Blog Posts

Let's Work Together
Contact Me