Getting vCard info into a QR code using the Google Chart API

How to get vCard info into a QR code using the Google Chart API? This question has been coming up occasionally and it can be a little quirky. I thought I might document my process of making this work with the Google Chart API.

1. Create the unencoded vCard info. Sample Below:

FN:Jason Clark
ORG:MSU Library
TITLE:Team Leader/Digital Initiatives Librarian [Associate Professor]
TEL;TYPE=WORK,VOICE:(406) 994-6801

2. Run the unencoded vCard info through a utility or programming function. In this example, we are using the online “URI Encoder / Decoder” tool Some common functions in programming languages that would do the same thing are: Server.URLEncode() in ASP, urlencode() in PHP, and encodeURI() in Javascript. After pushing the unencoded vCard string through the “URI Encoder / Decoder” tool, we get a resulting string like this:


A potential gotcha here is the URL value in the vCard. Make sure the URL value in the vCard is encoded and has changed from


to something that looks like:

3. Next, we place the encoded string in the Google Chart API to generate the QR code. Put your encoded vCard string in the URL below after the “&chl=”. For more info, see theĀ online wizard tool and documentation for the Google Chart API. CheckĀ the link below to see the generated QR code.|0&chl=BEGIN%3AVCARD%0D%0A%09%09VERSION%3A3.0%0D%0A%09%09N%3AClark%3BJason%0D%0A%09%

4. If everything works, the Google Chart API returns a link to a QR code image with the vCard info encoded. Place this URL in an HTML <img> tag and you’ll have a QR code on your site that will have vCard data. Note: You will need to add your specific contact vCard data in Step 1.

One Comment on “Getting vCard info into a QR code using the Google Chart API”

  1. Tom says:

    Good stuff – thanks.

    An interesting post about the Google Chart API here.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.