{"id":1172,"date":"2012-01-27T17:27:12","date_gmt":"2012-01-27T17:27:12","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=1172"},"modified":"2023-05-12T13:23:41","modified_gmt":"2023-05-12T19:23:41","slug":"how-to-add-dynamic-qr-codes-to-your-website","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=how-to-add-dynamic-qr-codes-to-your-website","title":{"rendered":"How to add dynamic QR Codes to Your Website"},"content":{"rendered":"<p>QR codes are becoming more and more popular in today&#8217;s fast-paced society.\u00a0 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.\u00a0 They are used by mobile devices, which scan the image using their built in camera and a dedicated application, and have many interesting uses.\u00a0 For instance, scan a QR code on a movie poster and you will be taken to a website with more information about that movie.\u00a0 Scan a QR code on a business card and your phone will prompt you to save the contact&#8217;s details automatically.\u00a0 In this post, I&#8217;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.<\/p>\n<p>The first thing needed is a way to generate a custom QR code.\u00a0 While there are many online resources for this, in this example we will be using Google&#8217;s free QR code creator, found <a title=\"https:\/\/code.google.com\/apis\/chart\/infographics\/docs\/overview.html\" href=\"https:\/\/code.google.com\/apis\/chart\/infographics\/docs\/overview.html\" target=\"_blank\" rel=\"noopener\">here<\/a>:<\/p>\n<p><a title=\"https:\/\/code.google.com\/apis\/chart\/infographics\/docs\/overview.html\" href=\"https:\/\/code.google.com\/apis\/chart\/infographics\/docs\/overview.html\" target=\"_blank\" rel=\"noopener\">https:\/\/code.google.com\/apis\/chart\/infographics\/docs\/overview.html<\/a><\/p>\n<p>While Google does a great job of explaining how to use this free service, the most important parts to know are:<\/p>\n<ul>\n<li>chs = the desired image size (150&#215;150) below<\/li>\n<li>cht = the desired format (qr for QR code)<\/li>\n<li>chl = the url you are wishing to link to<\/li>\n<\/ul>\n<p>The line of code below will create an image that will link to this post if you scan it on your phone.\u00a0 Go ahead and give it a try.<\/p>\n<p>&lt;<code>img src=\"https:\/\/chart.googleapis.com\/chart?chs=150x150&amp;cht=qr&amp;chl=https:\/\/www.mrc-productivity.com\/techblog\/?p=1172\" \/<\/code>&gt;<\/p>\n<figure style=\"width: 150px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Scan Your Phone Here\" src=\"https:\/\/chart.googleapis.com\/chart?chs=150x150&amp;cht=qr&amp;chl=https:\/\/www.mrc-productivity.com\/techblog\/?p=1172\" alt=\"Example QR Code\" width=\"150\" height=\"150\" \/><figcaption class=\"wp-caption-text\">Scan This!<\/figcaption><\/figure>\n<p>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.\u00a0 We recently updated our m-Power demo site <a href=\"https:\/\/www.crazybikes.com\" target=\"_blank\" rel=\"noopener\">www.crazybikes.com<\/a> 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 <a href=\"https:\/\/www.mrc-productivity.com\/docs\/general\/introduction-to-mobile-apps\">m-Power&#8217;s built-in mobile functionality<\/a>.  Rather than hardcode each of these QR images as in the example above, we used javascript to grab the current pages URL.<br \/>\nHere is the full code:<\/p>\n<pre class=\"CodeBlock\"><code> <code>jQuery(document).ready(function(){ callQR(); }); function callQR(){ var url=document.URL; url=encodeURI(url); var fullUrl=\"https:\/\/chart.googleapis.com\/chart?chs=150x150&amp;cht=qr&amp;chl=\"+url; jQuery(\"#QR\").attr(\"src\",fullUrl); }<\/code><\/code><\/pre>\n<ol>\n<li>First, you must include jQuery within your pages.\u00a0 If you are unsure how to do so, more information including the source files can be found here:\u00a0<a title=\"jQuery\" href=\"https:\/\/www.jquery.com\" target=\"_blank\" rel=\"noopener\"> https:\/\/www.jquery.com<\/a> If you are running m-Power, jQuery is included already within generated apps for your ease of use.<\/li>\n<li>Next, we will change the image code to reference a blank element by setting the src equal to a pound symbol (#).\u00a0 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: &lt;<code>img id=\"QR\" src=\"#\" \/<\/code>&gt;<\/li>\n<li>Finally, we will create a jQuery call when the page is finished loading. \u00a0 <code>jQuery(document).ready(function(){}<\/code> will run the code within {} once the page has finished loading. In this case, that is the callQR function.<\/li>\n<li>All that is left is to write the code that will get the current page&#8217;s url, and then set the source of the image properly.\u00a0 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.\u00a0 In the final line, we are setting the src attribute of every element with the id &#8220;QR&#8221;.\u00a0 This means we must add the proper id to our QR image.<\/li>\n<\/ol>\n<p>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!<\/p>\n<p><center><img decoding=\"async\" id=\"QR\" src=\"#\" alt=\"\" \/><\/center><script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.7.1.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/docs\/additional-resources-files\/QRCode.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>QR codes are becoming more and more popular in today&#8217;s fast-paced society.\u00a0 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.\u00a0&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-1172","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/1172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1172"}],"version-history":[{"count":23,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/1172\/revisions"}],"predecessor-version":[{"id":11727,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/1172\/revisions\/11727"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1172"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=1172"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=1172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}