How to add dynamic QR Codes to Your Website

QR codes are becoming more and more popular in today’s fast-paced society.  From advertisements to business cards to TV commercials, they are quickly becoming very prevalent. In case you are not familiar with them, QR codes are those strange looking square black and white squares that you see every day.  They are used by mobile devices, which scan the image using their built in camera and a dedicated application, and have many interesting uses.  For instance, scan a QR code on a movie poster and you will be taken to a website with more information about that movie.  Scan a QR code on a business card and your phone will prompt you to save the contact’s details automatically.  In this post, I’d like to discuss how it is very easy to not only add QR codes to your website, but to create them dynamically so every page has a QR pointing to itself.

The first thing needed is a way to generate a custom QR code.  While there are many online resources for this, in this example we will be using Google’s free QR code creator, found here:

https://code.google.com/apis/chart/infographics/docs/overview.html

While Google does a great job of explaining how to use this free service, the most important parts to know are:

• chs = the desired image size (150×150) below
• cht = the desired format (qr for QR code)
• chl = the url you are wishing to link to

The line of code below will create an image that will link to this post if you scan it on your phone.  Go ahead and give it a try.

<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://www.mrc-productivity.com/techblog/?p=1172" />

While this is quite useful, there are times when you might want to include this in a header or footer for use within every page on your site.  We recently updated our m-Power demo site www.crazybikes.com to include QR codes on every page. The purpose of this was so visitors could see how Crazy Bikes apps would appear on their mobile devices without them having to type in the URL. m-Power can handle this easily and integrates seemlessly with this third-party tool. In fact, here is more on m-Power’s built-in mobile functionality. Rather than hardcode each of these QR images as in the example above, we used javascript to grab the current pages URL.
Here is the full code:

 jQuery(document).ready(function(){ callQR(); }); function callQR(){ var url=document.URL; url=encodeURI(url); var fullUrl="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+url; jQuery("#QR").attr("src",fullUrl); }

1. First, you must include jQuery within your pages.  If you are unsure how to do so, more information including the source files can be found here:  https://www.jquery.com If you are running m-Power, jQuery is included already within generated apps for your ease of use.
2. Next, we will change the image code to reference a blank element by setting the src equal to a pound symbol (#).  This will break the image, however in the next steps, we will be overwriting the pound symbol with the current URL. The image code will now look like: <img id="QR" src="#" />
3. Finally, we will create a jQuery call when the page is finished loading.   jQuery(document).ready(function(){} will run the code within {} once the page has finished loading. In this case, that is the callQR function.
4. All that is left is to write the code that will get the current page’s url, and then set the source of the image properly.  Above, we have created a function called callQR that grabbed the current url, encoded it properly, and added it to the QR code url in the next lines.  In the final line, we are setting the src attribute of every element with the id “QR”.  This means we must add the proper id to our QR image.

At runtime, the client-side scripting will fire once the page has loaded, grab the current URL, encode it properly, pass it to Google, and then render the QR code image on the browser screen. QR codes have never been easier!