Online QR code generator in 5 easy steps



QR codes are integral part of our lives nowadays. They are used commonly by anyone who has a mobile device, e.g. smartphone, tablet, etc.

Creating such a QR code for your website from any phrase is quite easy. All you need is a website (or an HTML webpage). Follow the easy steps below to learn how to do that.

Step 1: create a webpage

Add a new webpage to your website, or simply create a webpage if it is standalone. The code should look somehow like the one below:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body></body>
</html>

This is a basic HTML page code, without anything added to it. It is not enough to create anything we need, so let's save it as, for example, MyPage.html and skip to step two.

Step 2: connect jQuery library

jQuery is a JavaScript library commonly used on many websites. You can download it from the official website or connect it using the CDN address. Let's not download anything, we will connect the latest version from the Google CDN:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body></body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>

Step 3: download and connect QR code generator script

Great. Now that we have an HTML page with jQuery support, we will need the QR generator code added to it. Download the file named qrcode.min.js here, put it to the folder near the page (let's name the folder js so that we know that all the scripts for the website/webpage go there) and connect it to the page:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body></body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="js/qrcode.min.js"></script>
</html>

Please note that the qrcode.min.js is connected after jQuery, as it needs it to work.

Step 4: create QR code placeholder

Now create a DOM element which will contain the generated QR code image. We will add a div element with the id="qrcode":

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body>
    <div id="qrcode"></div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="js/qrcode.min.js"></script>
</html>

Step 5: initialize the QR code

Now all you need is to initialize the created QR code element. This is done with the line: var qrcode = new QRCode(document.getElementById("qrcode"),{text: "My QR code works!"});. Put it after the qrcode.min.js script using the <script></script> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body>
    <div id="qrcode"></div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="js/qrcode.min.js"></script>
  <script>
    var qrcode = new QRCode(document.getElementById("qrcode"),{text: "My QR code works!"});
  </script>
</html>

And now open your created page in your favorite browser. If everything is done right, you will see your QR code on your created page:

My QR code works!

DownloadDemo
QR code generate QR code online QR code jQuery