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

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 :)

Dynatrace image

Frictionless debugging for developers

Debugging in production doesn't have to be a nightmare.

Dynatrace reimagines the developer experience with runtime debugging, native OpenTelemetry support, and IDE integration allowing developers to stay in the flow and focus on building instead of fixing.

Learn more

Top comments (0)

Dev Diairies image

User Feedback & The Pivot That Saved The Project

🔥 Check out Episode 3 of Dev Diairies, following a successful Hackathon project turned startup.

Watch full video 🎥

👋 Kindness is contagious

If this **helped, please leave a ❤️ or a friendly comment!

Okay