Free QR Code Widget for Your Website
Quick Answer
The basic snippet
Two lines. Paste the script once per page, then drop a div wherever you want a QR code to render. The widget reads the data attributes, calls the cached image endpoint, and renders an accessible img element.
<script src="https://link2qr.com/embed.js" defer></script>
<div data-link2qr="https://example.com"></div>Full options
Every attribute except data-link2qr is optional. Defaults: size 240px, black on white, error correction M, attribution link visible.
<script src="https://link2qr.com/embed.js" defer></script>
<div
data-link2qr="https://example.com"
data-size="320"
data-dark="111827"
data-light="ffffff"
data-ec="H"
data-caption="Scan to visit our store"
></div>Supported data attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
| data-link2qr | string | required | Any URL, vCard, WiFi payload, or plain text to encode. |
| data-size | integer (64-1024) | 240 | Pixel size of the rendered QR. |
| data-dark | hex (no #) | 000000 | Foreground module color. |
| data-light | hex (no #) | ffffff | Background color. Use a contrasting color for reliable scanning. |
| data-ec | L | M | Q | H | M | Error correction level. Use H if you plan to add a logo on top. |
| data-caption | string | none | Optional text shown below the QR code. |
| data-attribution | true | false | true | Show the small "Made with Link2QR" link. |
WordPress
Works in the block editor, classic editor, Elementor, Divi, Beaver Builder, and most page builders. No plugin required.
<!-- Paste into a Custom HTML block, or into your theme footer.php -->
<script src="https://link2qr.com/embed.js" defer></script>
<!-- Then add this anywhere a QR should appear: -->
<div data-link2qr="https://yourdomain.com/menu" data-size="240"></div>React, Next.js, Astro, Vue, Svelte
The script fills the data-link2qr elements that are on the page when it runs, and skips any it has already filled. In a single-page app, load it from the component that renders the div, so it runs again after client-side navigation. The live preview below works this way.
"use client"
import { useEffect } from "react"
// Load the script after the div is in the DOM. It fills new
// data-link2qr elements each time it runs and skips filled ones.
export function StoreQR() {
useEffect(() => {
const script = document.createElement("script")
script.src = "https://link2qr.com/embed.js"
script.async = true
document.body.appendChild(script)
return () => script.remove()
}, [])
return <div data-link2qr="https://yourstore.com" data-size="280" />
}No JavaScript? Use a plain img tag
For RSS feeds, markdown files, emails, or strict SSR setups that cannot run scripts, hit the image endpoint directly. Same cache, same speed, no JavaScript required.
<!-- Pure <img> tag (works in markdown, RSS, email, SSR) -->
<img
src="https://link2qr.com/api/qr?data=https%3A%2F%2Fexample.com&size=320"
alt="QR code to example.com"
width="320"
height="320"
/>See the full image API options on the URL and image API reference.
Live preview
This box is a div with data-link2qr="https://link2qr.com/qr-code-widget", data-size="220", and data-caption="Live widget demo". This page loads /embed.js the same way as the React example above, and the script fills the div with the QR image, caption, and attribution link.
Why embed Link2QR instead of generating server-side
- Zero infra. No QR library to install, no Lambda to host, no image cache to manage. The CDN handles everything.
- Free forever. No usage tier, no signup, no key. Stays free as long as Link2QR is online.
- No cookies. The script sets no cookies, and a scan opens your link directly, so Link2QR never sees scans.
- Static output. The QR encodes your URL directly. No redirect server in the middle that could break or change behavior.
- Markdown-friendly. The plain img form works in any surface that renders an image (RSS, Discourse, GitHub READMEs, Substack, etc).
Frequently Asked Questions
Is the embed widget really free?
Yes. The script and the image API behind it are free, with no signup and no API key. The text you encode is sent to the image API in the data parameter of each image request so it can draw the QR code; the API does not save it.
Will the embedded QR codes break if Link2QR goes down?
The QR images are served from the Link2QR image API. If you want guaranteed offline availability, generate the QR once on link2qr.com, download the PNG or SVG, and host the file yourself. The widget is for live, dynamic embedding; the downloads are forever.
Can I remove the small "Made with Link2QR" attribution?
The attribution link is enabled by default. Set data-attribution="false" to hide it. Keeping the link helps us continue to offer the service for free, but it is not required.
Can I use this on a WordPress site?
Yes. Paste the script tag in a Custom HTML block, or add it to your theme footer. Then drop the data-link2qr div anywhere you want a QR to appear. Works in classic editor, block editor, Elementor, Divi, and most page builders.
Does this work with React, Next.js, Astro, Vue, or Svelte?
Yes. Each time the script runs it fills every data-link2qr element already on the page and skips elements it filled before. In a single-page app, load the script from the component that renders the div, as in the React example above, so it runs again after client-side navigation. You can also skip the script and use the image API in a plain img tag.
Can I style the QR (colors, size, dark mode)?
Yes. Use data-size for pixel size, data-dark and data-light for hex colors (no leading #), and data-ec for error correction level (L, M, Q, or H). For full styling control, link to the QR code generator directly using the URL deep-link API.
Is there a rate limit?
Yes, a light one. The /api/qr image endpoint accepts up to 60 requests per minute from one IP address and returns HTTP 429 above that. Each visitor's browser requests the image itself, so the limit applies per visitor IP address, not per website. Image responses carry a one-year Cache-Control header, so a browser that has already loaded a QR image reuses it.