Getting the Most Out of QR Codes Using URI Schemes

Feb 20 2012 by Alexander Dawson | 23 Comments

Getting the Most Out of QR Codes with URI Schemes

Lately, everyone has been talking about the potential of the QR code. It has become the Internet’s equivalent of traditional barcodes (like those you’d find on physical goods at your favorite retail store).

Someone can take a quick snapshot of a QR code with their smartphone and immediately have a website up and loaded, so we could print QR codes on paper and physical goods such as business cards, magazine ads and posters in order to lead people to our site.

But, more often than not, web developers don’t use QR codes to their fullest potential.

In this article, we’ll discuss a technique that will unlock the full potential of QR codes through URI schemes.

How QR Codes Work in a Nutshell

Let’s learn how the QR code mechanism actually works. QR codes, at their core, are specially generated images that work like barcodes.

Certain commands (known as responses) are built in, and when a QR code is captured by a camera (usually one on a smartphone or tablet), the image of the QR code is processed and then the built-in response is carried out.

A common QR code response is to open a certain website in a web browser on the device that captures the QR code.

QR codes look like the above and contain information that can be captured by a camera and interpreted by a smartphone, tablet or computer.

QR-Code Readers

This is where things get interesting. QR-code readers — the apps that scan the codes and perform the actions — are not equal when it comes to functionality. Some are able to recognize QR codes and do all sorts of amazing things, and others can simply open URLs or display text.

Most smartphones have the same set of basic features (address book, calendar, texting functionality, alerts and Internet browsing), and a good QR-code reader can cater to all of those.

With low-functionality apps in the mix, though, URL-opening is likely the only reliable function that we can expect most QR-code readers will have.

Here’s a list of features that QR-code readers are generally equipped with:

  • Displaying text
  • Setting up system alerts
  • Adding events to calendars
  • Opening URLs in a browser
  • Collecting contact information (including vCards)
  • Sending email
  • Sending text messages (SMS)
  • Geolocation
  • Calling other phones
  • Connecting to WiFi

The Idea: Using URI Schemes

Since browsers can already launch default email clients via a simple mailto URL (browsers have supported URI schemes like these for years), could the same technique be used to offer in-app functionality for other products that have non-native URI schemes and that a QR reader wouldn’t support by default?

The answer is yes!

If the application supported the scheme, and if the user had the app the QR represented installed, it would work beautifully — and it wouldn’t matter which QR-code-reader was used.

The Possibilities

Here’s a list of some cool things that are possible:

  • Launching native Apple apps (Mail, Phone, FaceTime, Text, Map, YouTube and iTunes)
  • Running JavaScript bookmarklets
  • Opening certain IM clients (Skype, AIM, MSN, GTalk, ICQ and Yahoo)
  • Opening special applications (IRC tools, feed readers, FTP clients and SVN repositories)
  • Opening any application that registers a URI scheme when it installs on a platform

What makes this particular technique so amazing is that it doesn’t rely on the QR-code reader being very advanced; all it needs is for the app creator (be it Skype, Evernote or Angry Birds) you want to launch and interface with to use the system development API to register a URI scheme.

In the case of Apple, it’s the Cocoa Touch OpenURL method of the shared UIApplication object, and for other platforms (like Android), there will be an equivalent somewhere in the documentation.

From scanner to browser to application — the possibilities are endless!

Below is a list of some common non-http URI schemes:

Application URI Scheme or Protocol Query Strings
Default e-mail application mailto:<email>?query Subject
CC
BCC
Body
Default phone application tel:<number> N/A
Default SMS application sms:<number> N/A
Chat Room client irc://<url>:query port
channel
password
Syndication feed reader feed:<url> N/A
Apple FaceTime facetime:<number> N/A
Skype client skype:<username|number>?query add
call
chat
sendfile
userinfo
Google Talk client gtalk:query?<email> chat
call
Windows Live Messenger client msnim:query?<email> add
chat

voice

video

Yahoo! Messenger client ymsgr:query?<email|number> sendim

addfriend

sendfile

call

callPhone

chat

im

customstatus

getimv

AOL Instant Messenger client aim:query?<username> goim

goaway

addbuddy

What does this mean for us? As it stands, there are actually quite a number of applications for the desktop (as well as mobile), which already use URI schemes.

Take Skype, for instance. Do you want people to be able to capture a QR code that causes their phones to call you via Skype on their handsets? That can be done (at least on iOS) right now.

It can also be used to run several native apps, launch JavaScript bookmarklets (perhaps including apps that run within browsers) and access the usual FTP and IRC protocols (if associated with something).

Here are some useful links for developers:

Now that you know a bit more about QR codes and have gotten a brief overview of things you need to know to get started, I’ll outline the steps to the technique below.

Note: The technique I’ll be describing below can even be used to execute JavaScript code, so under the wrong set of code-writing fingers, this could be exploited.

Step 1: Choose the Response You Want to Perform

First, decide what you’d like the QR code to accomplish. Obviously, you can use the regular QR-code generator stuff — like sending text messages to phones or sending emails — but let’s try something trickier.

We’ll create a Skype QR code that will automatically launch the app and make a voice call to a Skype contact. (This will only work if the user that scans the QR code has Skype installed).

Step 2: Create a URL Using a URL-shortening Service

Many QR-code generators suffer from a particular problem: if you try to put a mailto or other non-http link into them, they sometimes think that an error occurred (this also affects some reader apps).

This, of course, won’t get our Skype launcher anywhere near being cross-QR-code-reader-compatible, so we need another solution — and, luckily, a common one exists that can help get this URL into the browser (and help web developers monitor click stats too)!

We’re going to use a URL-shortening service. These services are rarely fussy about what you insert into them, and they push out well-formed URLs with the HTTP header required for best-possible compatibility (most QR readers know how to open basic URLs).

A URL-shortening service such as TinyURL will turn that unconventional URL into a generally acceptable one.

For this QR, we’ll call the Skype contact named echo123 — this contact is the free voice-quality testing contact that Skype offers.

For our URL-shortening service, I’ll use TinyURL, but you can use one of the many other URL-shortening services out there such as bitly, is.gd and so on.

Just enter your chosen URI scheme into the shortener.

This is the result of my TinyURL link conversion:

URL skype:echo123?call
To http://tinyurl.com/echo123skype

If you click on the URL above, you might see something like the following (if you’re using Google Chrome on Windows):

Step 3: Generate the QR Code

Now take that generated URL — which will actually work if you have the desktop version of Skype installed for Windows or Mac — and generate a working QR code from it.

Check that the shortened URL works in your web browser; the link should launch Skype.

There is an abundance of choice when it comes to ways of generating QR codes; free tools exist all over the Web.

Below are a couple of free generators:

After you’ve generated your QR code, test it. Download one of the available applications for your mobile device (if you don’t already have one) and take a snapshot of the QR code you’ve produced.

Below are some free QR-reader products for mobile platforms:

What should happen, if you followed the instructions correctly and if you’ve got the Skype app installed, is this:

  1. Your QR code will be identified by the QR reader app
  2. The QR reader app will notice that the QR code contains a URL (thus it will skip the compatibility quirks of the readers)
  3. The TinyURL link will open in the default browser
  4. It will redirect to the Skype-call URI scheme and launch Skype

Pretty amazing stuff for one clever image!

The only thing left to do with your wonderful creation is to upload it to the Web (as I have with the finished example below). I recommend, as a best practice, that you consider providing a link to the URL being snapped in the QR image itself (for desktop users).

Beyond that, you could spruce up your QR codes with a bit of color or some limited artwork if you’re feeling extra creative.

The Finished QR Code

The above QR code will call echo123 on Skype if you have the app installed.

Conclusion

The power of this technique rests in the opportunity it gives designers and developers. A URI scheme exists between app developers and the browsers that support them (luckily, that’s all of them!).

Using a simple redirect (provided by you or a third party) and these already existing and well-supported features, you can launch applications, interact via query codes, execute JavaScript and do all sorts of wonderfully creative things.

QR codes are being increasingly adopted and have never been more widely used. With this single technique you can break past most existing limitations.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

23 Comments

Bharat

February 20th, 2012

Nice tutorial, liked it.

Bruce

February 20th, 2012

Erratum: “QR codes look like the above and contain”

Bybe

February 20th, 2012

Really useful post, QR is becoming more popular than ever my problem is the fact that its SO WHITE! but other that suppose were have to live with it, to further your good post I tested sef404sh for Joomla and that automatically shortens urls as well as generators QR pictures too. If anyone needs a Joomla solution, I personally hate sef404sh but meh ;)

Thanks for another great post.

Elaine

February 20th, 2012

I’ve done some qrcode with Linux recently, they have it available for free in Ubuntu (I currently use 10.04 LTS) and it is a little tool available in the Ubuntu Software Centre called “qrencode”. You can get the code directly from http://fukuchi.org/works/qrencode/index.html.en. I run it on the command line (Ubuntu Terminal), something like this “qrencode -o picture.png -l H -s 12 ‘http://www.example site.com Tel: 01234591919431 Email: support@example-site.com Fax: 0123443232481′. Ok it isn’t as fancy but you get more info into the qr code! Cool, isn’t it?!

Thom Parkin

February 20th, 2012

Thanks for that great information.
I was not aware of the depth of applicability the QR format provides.

Nick

February 21st, 2012

Hi Alexander,

Great Post! Don’t forget Tagginn.com on the list of FREE QR Code Generators! You can also Edit the codes, without changing the QR Codes already in circulation, and Track the effectiveness of your QR Code campaigns with our in-depth analytics that tell you everything you need to know. Give it a try!

https://www.tagginn.com/

Very best wishes,

Nick

Darius

February 21st, 2012

Hi Alex,
thanks for the interesting article. I am wondering if you have a way to predefine text for an sms message on IOS5. the “?body=” does not work.
however a site like this: http://www.tonydowney.ca/assets/swf/qrgenerator.swf can get QRReader to pretype a SMS in QRReader but i still need an extra click to get it into the Messages app.
cheers,
Darius

Eric Lenhard

February 21st, 2012

Great one Alex! Very useful post, thanks. Will definitely use this in my project.

Rahul Gupta

February 21st, 2012

Thanks for spreading the word about QR Codes. The single most common question I get from ‘techies’ who visit the LAFD News & Information blog is about the QR Code I quietly added to our sidebar earlier this year.

We posted the code to encourage familiarity, and made it clickable to ease explanation. Meanwhile, rest assured that we’re working off-line to introduce this technology into many of our future Los Angeles Fire Department offerings.

Mashealy

February 21st, 2012

I am assuming this information is just for QR Codes not meta tags? Do you have a preference? If so, why?

liron

February 22nd, 2012

thanks, very deatiled tutorial :)

Marek

February 22nd, 2012

@Darius SMSTO::
QRReader for iPhone open some strange window but below there is a magic button that will open normal window.
Standard URI is sms://

@Bybe You can get really nice QR codes with this APP http://itunes.apple.com/us/app/iqr-codes/id491390884?ls=1&mt=12

Jon

February 22nd, 2012

This is by far the most I’ve learned about QR codes. Thanks for the info.

Siddharth

February 23rd, 2012

Great information about QR codes.. thanks Alex

Robin Singh

February 23rd, 2012

Can you share how can we make Beautiful QR code as shown in the sample above.

Thanks.

Mark Simchock

February 23rd, 2012

Good stuff. Very interesting.

That said, I’d like to mention that one man’s/woman’s “all sorts of wonderfully creative things” is another’s “WTF?”. Unless it was very clear what result the code was going to produce I’d think twice about the repercussions of violating user expectations.

Also, I’m pretty sure bit.ly can provide a QR for a given link. If you’re willing to use bit.ly then there’s no need to go elsewhere.

Terry

February 24th, 2012

This is a great article, now I understand how QR codes work, thanks.

Lonn

February 24th, 2012

This is pretty cool. I did try it out on my android based phone and found that it did not work with my default browser which is DolphinHD. It returned an error that the application couldn’t be started. However, when I switched to Opera Mobile it worked perfectly.

I did a short look through DolphinHD’s settings and couldn’t see where I could change this.

Jamie Billingham

February 25th, 2012

Or you can just use one of the many QR Code landing page apps out there. I use http://daqri.com and have a text or video welcome message, link to website, email me, follow me on Twitter, connect on LinkedIn, phone me now, download vcard and an AR option.
What I want to see more of is QR Codes linking to interactive options like a game or survey. Not seeing great use of the potential, yet anyway :-)

ilona

February 26th, 2012

I have implemented QR for an Internet-based survey for our custemer. I am not able to provide that link or QR since it is for work. But it works and it wowed the customer.

john

February 28th, 2012

That’s a great tutorial about the QR code. It’s very nicely done. Thanks you very much.

Michael Byers

February 28th, 2012

Good tutorial, thanks. I would like to see more uses of QR codes but they still confuse people. I am seeing a lot of people using them as avatars, how is this useful if the person is using their mobile to view that person’s profile?

Airtonix

August 28th, 2012

Actually the best qrcode readers for android are : “google goggles” and “Barcode scanner” by zxing

Leave a Comment

Subscribe to the comments on this article.