How to Add a QR Code Generator to Your Website

The Quick Version

1. Copy the snippet from Easy QR's embed page. It is just one <div>, a little caption, and one <script> tag.
2. Paste it into an HTML or custom code block on your site. Every popular site builder has one — they call it different things, but it does the same job.
3. Hit publish. The generator shows up where the placeholder div was, and your visitors can paste a link and download it as a PNG, SVG, or JPG.

Want a look at the real snippet and a working preview before you start? Pop open the embed page — the full copy-paste snippet, a live preview, and three playgrounds to tinker in (CodePen, JSFiddle, JSitor) are all sitting right there.

Where to Paste It on Each Popular Platform

The snippet stays exactly the same wherever it goes — below is just a quick reminder of where to drop it inside each editor.

WordPress

Open your page or post, tap the + to add a block, search for "Custom HTML", and paste the snippet in. Take a quick peek with Preview before you publish. It works in the newer block editor and the Classic editor alike — in Classic, switch to the "Text" tab first.

Wix

In the editor, go to Add Elements → Embed Code → Embed HTML, drag the element onto your page, click Enter Code, and paste the snippet. Then drag the corners to make it as tall as you like.

Squarespace

Edit the page, add a Code block from the block menu, double-check the language is set to HTML, and paste the snippet in.

Webflow

Drag an Embed element from the Add panel onto your page, open the HTML embed editor, paste the snippet, and publish your site.

Shopify

From the admin, edit a page (or use the theme editor's Custom Liquid / Custom HTML section) and paste the snippet into the HTML area.

Ghost

In the editor, type /html to drop in an HTML card and paste the snippet there.

Plain HTML, Astro, Next.js, and friends

Paste the snippet straight into your HTML. If your framework strips out raw HTML inside JSX, reach for one of the ready-made wrappers instead — there are maintained packages for plain JavaScript, Vue 3, and Astro, plus a Docker container you can host yourself, all linked from the embed page.

What Your Visitors Get

Why Put a QR Code Generator on Your Site?

• Blog posts and how-to guides about QR codes are a lot more handy when readers can whip one up right there instead of going off to find another tool.
• Help centers and docs for products where people sometimes need a QR code — Wi-Fi logins, contact cards, event pages, app store links — can head off a support email by putting the tool right on the page.
• Staff portals and intranets let your team quickly make QR codes for signs, training handouts, and printed materials without hunting down a separate tool or another login.
• Schools and design sites teaching marketing, information design, or web development can let students try making QR codes hands-on, right inside the lesson.
• Marketing landing pages can use it as a friendly hook — a genuinely useful free tool keeps people hanging around far longer than a plain list of features.

Grab the Snippet

The exact copy-paste snippet, a live preview, playgrounds on CodePen, JSFiddle, and JSitor, and the open-source wrapper packages for plain JavaScript, Vue 3, Astro, and Docker are all waiting on the Embed QR Generator page.

Open the Embed Page

What If I Want Codes I Can Edit Later?

The embed makes static QR codes — the link is built right into the pattern, so it stays put once you print it. If you would rather have codes whose destination you can change down the road (and that show you scan stats), take a look at editable dynamic QR codes. You manage dynamic codes from an Easy QR account rather than the embedded generator.

Questions People Often Ask

How do I add a QR code generator to my website?

Copy a short piece of HTML and paste it onto any page of your site. Easy QR gives you a free QR code maker that drops right in — one <div> and one <script> tag — so your visitors can make their own static QR codes without leaving your page. The whole snippet is waiting on the embed page.

Do I need to write any code to add a QR generator to my site?

Not at all. The Easy QR snippet is pure copy and paste. If your website builder has a spot to drop in HTML or a "custom code" block — and WordPress, Wix, Squarespace, Webflow, Shopify, Ghost, and plain HTML all do — you paste it in, hit publish, and you are done.

Is the embedded QR code generator free to add to my website?

Yes, it is free to add to any site, and the static QR codes your visitors make with it are free forever on Easy QR — no watermark, no expiry, no scan limit, and nobody has to sign up to use it.

Will adding a QR generator slow my website down?

Nope. The little loader script comes in quietly in the background, and the generator only loads when it is needed. Your page keeps rendering at full speed and your Core Web Vitals stay happy.

Can I resize the QR generator on my page?

You can. It stretches to fill whatever space you put it in, and if you want it taller, just add a data-ezqr-height="600" attribute to the placeholder div.

Are there ready-made packages instead of a copy-paste snippet?

There are. Prefer to install a package? Grab the open-source wrappers for plain JavaScript (ezqr-embed on npm/unpkg), Vue 3 (ezqr-vue), or Astro (ezqr-astro), or run your own with the Docker container (ezqr-container) on GHCR. You will find them all on the embed page.