Embed your contact details in a QR Code

Filed under: How-To — Tags: — Sebbs @ 6:39 pm January 9, 2012

So, the other week I was creating a personal business card for myself. While looking around for templates, I stumbled across the idea of having a QR code that could be scanned with the camera on a smartphone, and have the phone automatically create a contact.

A quick bit of research shows this is actually quite simple to do. Basically, you first create a file using one of the many contact markup languages, paste the content of the file as text into a QR code generator, and that’s it.

I chose to use vcard for the original contact file, for a couple of reasons. First, it’s very well documented, having an RFC that’s quite easy to understand (and the Wikipedia article is helpful too), and some nice extensions for including your username on various social networks (though not many programs/devices support reading these extensions). The other reason was that Outlook can export a contact as a vcard, which made it very quick and easy to get started. Then, it was just a matter of trimming out some of the fat, adding the extensions (I decided I wanted these in here, for those with a phone that might be able to understand the extensions), and that was it. This is what I ended up with (I’ve removed some of my information, just to avoid the spambots out there):

FN:Wayne Sebbens
NOTE:Facebook: http://facebook.com/username Twitter: @Username Skype: username
TEL;CELL;VOICE:xxxx xxx xxx

I originally had encoding in the NOTE: parameter so that each had it’s own line. However, while Windows Phone could recognise the CRLF encoding correctly, pretty much all the iPhone QR reader apps I tried couldn’t, often ending up with “Facebook: http://facebook.com/username=0D=0A=” and dropping the rest (one app managed to work out the new lines, but left the encoding in and dropped the leading “T” and “S” from “Twitter” and “Skype”). So, I decided to cater to the lowest common denominator, and put it all on the one line.

If you’re following along, now might be a good time to save your text file as a .vcf, then open it up in Outlook or whichever PIM you have on your computer, just to check that it is all read correctly.

Once I had a working vcard, it was time to embed it in the QR code. There is a chart creator/editor based on the Google Charts API at http://imagecharteditor.appspot.com/. If you’re following along, go to the Editor tab, and change the dropdown box to QrCode. Then, copy and paste the text of the vcard into the textbox. Tab off, and you’ll see a QR code generated immediately. I changed the size width and height to 400×400, just to get the code at a nicer, more readable, size. If you want a copy of it (most likely, you do), then you can just right-click, save the code as a png.

QR code from the template above

QR code from the template above

Now might also be a good to test that your QR code correctly creates a new contact on your phone. As I said, not every program or device can understand the extensions, so don’t worry if yours doesn’t pick them up. If your app just opens up a page as if it just read pure text, don’t worry either – it just means that particular app doesn’t understand vcards, so try a new app. If anything else hinkey happens though, you may want to double-check your formatting, and compare against the RFC spec.


I had found a few interesting things in the vcard spec as well, such as the ability to embed a photo and other media (one thing I want to see if it is possible, is to embed a ringtone in the vcard). Unfortunately, any sort of multimedia in the vcard contains far too much detail for a QR code to be generated. I had a look at Microsoft Tags, but it seems they only support URLs at the moment. Having the QR code contain a URL for a webhosted .vcf file was something else I looked into, however there were some issues here – Safari on the iPhone refuses to download the .vcf (only the Mail and Messages apps will open them), and my Windows Phone would say there was a format error.

1 Comment »

  • Works in gingerbread (QR Droid). Send me the real one.

    Comment by Darrryl — September 22, 2012 @ 11:44 am

RSS feed for comments on this post. TrackBack URL

Leave a comment