Embedding a Free QR Code Generator on Your Website

Some marketing pages, tutorials, and internal tools want a "make a QR code" button. The usual options are:

• Link out to a third-party generator (visitors leave, may not come back)
• Pull in a JavaScript library, write UI for it, handle errors yourself
• Generate them server-side and cache (overkill for one-off use)

I built EZQR partly because I wanted a fourth option: drop a real generator into any page with two lines of HTML. This post is a short tutorial — and a live demo of the embed running on this very page.

The snippet

Paste this anywhere on a page:

<div data-ezqr-embed style="max-width:500px;margin:0 auto"></div>
<script src="https://ezqr.ca/embed.js" async></script>

That's the whole integration. No build step, no npm install, no API key.

Try it (live, right here)

Type a URL, pick options, download the PNG. The generator lives in an iframe served from ezqr.ca, so it doesn't see anything on the host page and the host page doesn't see anything the visitor types.

How it works

The script is small (~60 lines) and does three things:

• Finds every element with the data-ezqr-embed attribute
• Replaces it with a lazy-loaded iframe pointing at https://ezqr.ca/embed
• Adds a small Free QR code generator by EZQR caption underneath as attribution

The loading="lazy" attribute means the iframe doesn't load until the visitor scrolls near it, so this has near-zero impact on page weight or LCP if the embed isn't above the fold.

Sizing

The default height is 520px. For tighter or taller layouts, add a height attribute:

<div data-ezqr-embed data-ezqr-height="600"></div>

Width follows the parent container, so wrap it in whatever max-width you want.

Multiple embeds, sandboxes, frameworks

The script runs once on DOMContentLoaded and finds every matching div on the page, so multiple embeds on one page work without extra setup. For SPAs that mount the snippet after initial load, re-include the script tag or call the IIFE again — there's also an ezqr-embed npm package if you'd rather have a proper module.

Why I built EZQR

Most QR generators are either ad-laden free tools or $20/mo SaaS with a strict free tier. I wanted a generator that:

• Is free forever for static QR codes — no watermark, no expiry
• Has dynamic QR codes (change the destination after printing) for the small paid tier
• Doesn't track scans unless you opt in
• Doesn't require an account to make a static code

If any of that sounds useful, the generator is at ezqr.ca. The embed snippet above is the same generator, just rendered inside your page.