Every utility site, tech blog, agency or small business gets visitors who need to generate a QR Code quickly — and today they leave your site to do it somewhere else. Every departure is a visit that doesn't come back.

The fix is simple: put a QR Code generator inside your own site, as a widget. Visitors generate the code without leaving the page, you get a useful tool that drives repeat visits (and sometimes even a link from someone who recommends the page), and none of it requires writing a line of backend code.

This tutorial shows the 1-minute way: copy an embed snippet and paste it into your HTML, WordPress, Wix or Squarespace.

Why put a QR Code generator on your website

  • Engagement: visitors interact with the page instead of just reading and leaving.
  • Retention: they solve their problem (generating the QR) without opening a new tab on another site.
  • Useful tool = repeat traffic: people who use it once tend to come back next time they need another QR — and may recommend the page to others.
  • Organic link building: embedded tools are the kind of content other sites link to naturally.
  • Zero maintenance: the widget runs on Code2Scan's server. You paste the code once.

The 1-minute way: copy and paste the embed code

No installation, no account, no JavaScript to write. It's a single block of HTML — an <iframe> — that you paste wherever you want the generator to appear:

<iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>

Each attribute has a role:

Attribute What it does
src The widget's address — no need to change it
width="100%" Fills the width of whatever container you paste it into
height="400" Height in pixels — adjust it to fit your layout
style="max-width:340px" Keeps the widget from getting huge on wide screens
loading="lazy" Only loads once the visitor scrolls to it — doesn't slow the page down
title="..." Accessibility: describes the iframe for screen readers

Where to paste it and what you get

Where to paste it Benefit
Blog footer Useful tool next to the content, increases time on page
Contact page Visitors generate a QR of your address or link while they're already there
Digital marketing post Perfect context — people reading about QR codes already want to try one
Agency landing page Shows technical capability with zero development cost
Internal dashboard / intranet Team generates QRs without relying on another tool

How to add it in plain HTML

If your site is static HTML (or a custom template), paste the <iframe> right where you want the widget to appear — inside a <div>, a section, or a sidebar:

<section>
  <h2>QR Code Generator</h2>
  <iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>
</section>

Save the file, publish it, and the widget is already working.

How to add it in WordPress

  1. Edit the page or post where the widget should appear.
  2. Add a "Custom HTML" block (in the block editor) or use a "Text/HTML" widget (in classic-editor themes).
  3. Paste the <iframe> code inside the block.
  4. Click Preview to check it before publishing.
  5. Publish the page.

No plugin needed — WordPress's native HTML block already handles it.

How to add it in Wix or Squarespace

Both let you insert custom HTML through a specific element:

  • Wix: add the "Embed" → "Embed HTML" element, paste the iframe code, and resize the element on screen.
  • Squarespace: add a content block of type "Code Block", paste the snippet, and save.

In both cases the widget adapts to the reserved space — no need to touch width="100%".

It's free, no signup, and works on any CMS

The widget is public and free: no login, no API key, no usage limits. It works on any platform that accepts HTML — WordPress, Wix, Squarespace, Webflow, Shopify, Notion, or a hand-coded site. If a visitor just needs a one-off QR without you installing anything on your own site, they can also use the free QR Code generator directly — but having the widget embedded avoids that detour.

Basic customization: width and height

The two most common tweaks:

  • Narrower width: swap width="100%" for a fixed value, like width="340", if the widget sits in a narrow sidebar.
  • Taller or shorter height: height="400" works well in most cases, but if the widget cuts off content, bump it to 450 or 500.

Avoid forcing very small dimensions (under 300px wide) — the generator gets cramped and hard to use on mobile.

Full step-by-step

  1. Go to the QR Code widget page and copy the ready-made embed code.
  2. Paste the <iframe> into your page's HTML, WordPress's HTML block, or Wix/Squarespace's code element.
  3. Adjust width and height if needed for your layout.
  4. Save and publish the page.
  5. Test on mobile and desktop — generate a real QR and scan it to confirm it works.

Common mistakes

❌ Forgetting loading="lazy"

Without this attribute, the iframe loads as soon as the page opens, even if the visitor never scrolls to it. That slows down the initial load for nothing.

❌ Pasting the iframe without max-width

On large screens, width="100%" without a max-width limit stretches the widget way too big. Keep the style="max-width:340px" from the original snippet.

❌ Assuming you need an account or API key

The widget is public — there's no authentication step. If a tutorial tells you otherwise, it's outdated or describes a different service.

❌ Not testing on mobile

The widget itself is responsive, but the container you pasted it into might not be. Always check how it looks on mobile before calling it done.

❌ Confusing the widget with a trackable QR Code

The widget generates a static QR right in the visitor's browser. If you need to know how many people scanned each QR, that's a different feature — see the guide on trackable QR codes with UTM.

Summary

  1. Copy the <iframe> snippet from the QR Code widget — no account needed.
  2. Paste it into plain HTML, WordPress's HTML block, or Wix/Squarespace's code element.
  3. loading="lazy" keeps the widget from slowing down page load.
  4. Adjust width and height to fit the space available in your layout.
  5. It's free, works on any CMS, and doesn't expose your data.
  6. For scan tracking or an editable destination, that's already a dynamic QR Code use case — the widget covers simple, free generation.

Want to try it before pasting it into your site? Check out the QR Code widget in action and copy the embed code — it takes under a minute to go live. If you'd rather generate a one-off QR Code right now, use the QR Code generator.