Add QR code to the webpage with jquery.qrcode.js

QR code is a quick response code that has a large storage capacity. It consists of a black and white square box that you can be read using smartphones or dedicated QR reading devices to gain access to additional information.

This is used for advertisement, storing website URLs, information, etc.

In this tutorial, I am using the jquery.qrcode.js plugin to generate a custom QR code and embed it on the web page.

You can adjust its size, background, and foreground color with options.

---

Contents

1. Download and Include
2. Initialize
3. Demo 1
4. Options
5. Demo 2
6. Conclusion

---

1. Download and Include

• Download the library from GitHub.
• Include jquery.qrcode.js and qrcode.js script with jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/jquery.qrcode.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/qrcode.js"></script>

---

2. Initialize

• Create a container element.

<div id='qrcode'></div>

• Call qrcode() method to initialize the library. In the method pass the text or the URL that you want to show after scanning.

jQuery('#qrcode').qrcode("QR code text");

Completed Code

<div id="qrcode"></div>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/jquery.qrcode.js"></script>
<script type="text/javascript" src="jquery-qrcode-master/src/qrcode.js"></script>
<script>
 // Initialize
 jQuery('#qrcode').qrcode("QR code text"); 
</script>

---

3. Demo 1

View Demo

---

4. Options

Customize default behavior with available options.

Syntax – 

$( selector ).qrcode({
  option-name: value, ...
});

Here, are some options –

• text – Specify the content that will accessible after scan e.g. text, link, number, etc.
• width – Set the width. The default value is 256.
• height – Set the height. The default value is 256.
• render – It either take table and canvas value to display QR code on the screen. The default value is canvas.
• typeNumber – Automatic calculation to generate QR code. The default value is -1 and takes a value up to 40.
• background – Set background color. The default value is #ffffff.
• foreground – Set foreground color. The default value is #000000.

Example

jQuery('#qrcode').qrcode({ 
   width: 200,
   height: 200,
   render : "table", 
   text : "https://makitweb.com"
});

---

5. Demo 2

View Demo

---

6. Conclusion

It is a lightweight jQuery plugin that allows you to easily embed QR code into your web page. Pass content or link in qrcode() method that you want the user can access after scanning.

If you found this tutorial helpful then don't forget to share.