Using QR Codes on Your Website

April 19th, 2012 Leave a comment
Like the article?
Using QR Codes on Your Web Site

Lately, it seems the Internet is buzzing about the QR code and its potential for different applications. QR codes can be used on business cards, advertisements, printed materials and other items that users can take a snapshot of with their mobile device and it will take them to our website. This article will discuss some potential uses for QR codes so you can begin using these useful items on your own website.

What is a QR Code?

QR codes are basically barcodes that can hold lots of information in generated images. You can create QR codes with built-in commands so that when they are captured by a camera, the QR code is processed and the built-in command is carried out. Usually the devices that are used to capture QR codes are mobile devices such as smart phones or tablets and they usually need an app or other software to process the QR code since this functionality is not always built-in to the device.

A common use for QR codes is to launch a Web site in the browser when the code is captured. Check out this QR code that will take you to our homepage:

QR code

This allows you to have complex or long URLs, or also specific URLs if you want to send the user somewhere other than the home page. However, these codes are not just for Web sites. You can also create QR codes that call a number, send a text message, start a Skype call and many other things.

Reading QR Codes

As I mentioned, you usually need a code reader app to be able to scan the codes and perform the command. Not all readers are created equal so it may take a bit of experimentation for you to find one that you like and that performs all of the functions you need. Here is a list of functions to look for in a good reader application:

  • Displays text
  • Sets up system alerts
  • Adds events to calendars
  • Opens URLs in the browser
  • Collects contact information (as Contact or vCard)
  • Sends email
  • Sends text messages (SMS)
  • Geolocation
  • Initiates phone calls
  • Connects to WiFi

This is just the basic set of functionality you should expect out of your QR code reader.

Setting up a QR Code

Setting up a QR code for your site is easy to do. Let’s start with setting up a QR code that will open your site in the browser, like the one I have above.

Step 1: Find a QR Code generator

There are several code generators available online that will whip a code up for you very quickly. Here is a list of some popular ones:

Any of these code generation sites will allow you to create a QR code that performs different functionality.

Step 2: Set Up the Command

I’ll use QR Stuff for this part of the tutorial. To create a code that opens your site in the browser, choose “Website URL” from the list of Data Types.

data type

Enter the site URL that you want to embed. You may need to shorten the link to prevent errors, which can sometimes occur when you have very long URLs. Choose to embed it to shorten it depending on where you are sending the user.


Customize the look of your code by choosing foreground color text in step 3.

foreground colour

Step 3: Get Your New Code

And that’s it! You can see a preview of your code on the left:

QR code preview

Choose from the list of output types at the bottom to download your generated code that you can begin using right away!

Using URIs in QR Codes

Now that you have seen how easy it is to generate the QR code, let’s try for something a little more difficult. How about a QR code that initiates a Skype call? This would be a great code to put on your business card or Web site that would allow anyone to easily call you with the Skype application.

In order to make this work we have to know a bit about URIs or Uniform Resource Identifier. You have probably seen URIs before in the form of mailto:, aim: or gtalk:. These URIs inform a specific application to perform an action, just like telling your browser to open a site. In this part we will use the skype: URI to place a Skype call with the QR code.

Step 1: Set up the URL

URIs work just like regular URLs, just not through HTTP. We can set up a URL link with the skype: URI but we will have to use a URL shortening service to do it. Most QR code generators will not accept a non-http URL, so by shortening the link we can get a regular looking HTTP URL that hiding our Skype URI link.

To do this, I will use a service called TinyURL that will accept my Skype URL and create a new HTTP URL.

enter the URL

Any URL shortening service should be able to do this for you, so you don’t need to use a particular one. For this demo, we will try to call the echo123 Skype ID, which is the free voice-quality testing service that Skype offers to help you set up the service. When using the skype: URI the link would look like this:


Entering this into the TinyURL creator gets me my new URL:

tiny URL

Step 2: Generate the Code

Now that you have an appropriate URL, you can follow the same steps we used to create the Web site link code to create the QR code for your Skype call.

Step 3: Test Your Code

Once you have the QR code generated, you can test it by installing a QR code reader application on your mobile device and taking a picture of the code. Below are some free QR-reader products for mobile platforms:

Here is what should happen once you capture the QR code:

  1. The code is identified by the QR reader
  2. The reader will attempt to go to the URL it is given in the browser
  3. The browser will redirect the request to the Skype application
  4. A call will be initiated to the echo123 ID

If everything works successfully, we have finished our Skype QR code!


QR codes have a lot of functionality that isn’t really being used by developers on the Web. They are a great way to transmit a lot of information in a small space for print materials and have many uses online as well. The power of these codes really rests in the designers and developers since they are the ones that need to adopt and use these codes in their work. QR codes are gaining momentum and more innovative techniques are being created with them right now, that there isn’t a better time to begin implementing them into your designs.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!