How to "Hack" VonageMe™

Integrating Call Me Link into Your Website

VonageMe™ is a new service from the VoIP service Vonage. If you have service from Vonage, you should have a VonageMe account.

How to set up click to talk using Vonage

Vonage uses a simple form to enable the calling feature. Instead of using their form, you can style your own…or you can create an anchor link using the following pattern:https://me.vonage.com/username?fromnumber=12223334444For me, that code translates to https://me.vonage.com/303zachary?fromnumber=13035551212

Three steps to VoIP fun!

  1. Go to me.vonage.com and sign in using your Vonage account login (this is to confirm you have the service).
  2. Fill in their information if you want, but it’s not necessary—you will see why next.
  3. Create a HTML form on your website with a text input with id/name “fromnumber” and the form action as https://me.vonage.com/username, with username being your Vonage username.

The final code:

<form action="https://me.vonage.com/username" method="post">
<fieldset><legend>Call me now</legend>
	<div>
		<label for="fromnumber">Your phone number</label>
		<input type="text" id="fromnumber" name="fromnumber" size="12" />
		<small>( 1 + area code + number ). No dashes or spaces, please.</small>
	</div>
	<div>
		<input type="submit" value="submit" />
	</div>
</fieldset>
</form>

Next steps for even better results

Using simple form validation Javascript, you will be able to weed out people who use dashes and spaces in their phone numbers, or even better, create a script to automatically reformat them. View Update below.

You can try the code out on my website as it’s currently formated. It uses the exact code from above, but replaces username with my Vonage username, 303zachary.

Update:

I’ve used the Adobe Spry Validation Widget to make sure that the phone number is properly entered. Below is the code to ensure proper number formatting:

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "phone_number", {format:"phone_custom", pattern:"10000000000", hint:"Sample: 13033620451", useCharacterMasking:true});

Author: Zack Katz

Zack Katz is the President of Katz Web Services and the developer of WordPress plugins with over 700,000 downloads. He lives in Southwest Colorado with his wife and two cats.

7 thoughts on “How to "Hack" VonageMe™”

  1. I’m no expert on email HTML, but I do know that any FORM code that you use embedded in email signatures will yield inconsistent results depending on how your recipient checks their mail.

    If you know the phone number of the person you’re emailing, you can fill in the URL manually for each person you email…

    A good article to check out is http://mailchimp.blogs.com/blog/2005/08/placing_forms_i.html – it gives some good basic guidelines for creating embedded forms.

  2. My local home town offers a advertising site sort of like craigs list i thought maybe i could post the code their.
    thanks

    roger.

  3. Hi Roger,
    All you need to write your own code is your username. Then, replace username in the code above with your username, and you’ll be all set!

    What do you mean advertising sites?

  4. As long as they are Vonage users, there should be no problem. I’d like to see it when it’s up — post a link when it’s ready!

Leave a Reply

Your email address will not be published. Required fields are marked *