DEV Community

Cover image for How to Add a QR Code to Your Website with Just a Few Lines of Code
Gift Egbonyi
Gift Egbonyi

Posted on

How to Add a QR Code to Your Website with Just a Few Lines of Code

#qrcode #javascript #frontend #beginners

Another Wednesday, another mini-tutorial!

Today, we’re doing something super practical: adding a QR code to your website. Because sometimes, sharing a link the old-school way just doesn’t cut it.

Wait, Why Use a QR Code at all?

Quick answer: they’re easy, mobile-friendly and just cool. QR codes let users scan and go; they could scan a contact form, app download or your portfolio link,

Step 1: Basic HTML Setup 

<div class="card">
  <h1>Scan Me!</h1>
  <div id="qrcode"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

That’s your placeholder. Now let’s generate the actual QR code.

Step 2: Use a QR Code Generator Library (No Backend Needed)

We’ll use a popular lightweight library called QRCode.js. You can include it via CDN:

<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Step 3: Add the JavaScript

Now generate the QR code and target the #qrcode div:

const qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "https://your-link-here.com",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});
Enter fullscreen mode Exit fullscreen mode

Replace the text value with the link you want users to scan.

Optional: Add Some Basic Styling

Here’s a little CSS to centre the QR code and keep things neat:

body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  width: 300px;
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#qrcode {
  margin-top: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Feel free to customise it, round corners, borders, drop shadows, etc...

Final Result

You now have a working QR code on your site!
No backend, no fancy framework, just good ol’ HTML, CSS and JS.

Check it out in this Codepen

Bonus Idea:

Let users generate QR codes dynamically by typing a URL and clicking a button. Wanna see that next Wednesday? Let me know!

Follow me to see more straight-forward and short tutorials like this :)

Top comments (2)

Collapse
 
musa_jamaldeen profile image
Musa Jamaldeen •

Sounds like a great idea! I'd love to see a tutorial on generating QR codes dynamically using a URL input and a button. Looking forward to it next Wednesday! I'll be sure to check it out 😊.

Collapse
 
giftintech profile image
Gift Egbonyi •

Hi there! I made a tutorial about it: dev.to/giftintech/dynamic-qr-code-...

Do check it out! :)