Embed QR Codes on Your Website
Self-hosted SVG, client-side generation, and dynamic QR patterns that scale from one product to millions.
Last updated: 2026
Adding a QR code to a web page used to mean opening a generator, downloading an image, and re-uploading. That works for one-off use, but breaks down for product catalogs, ticket emails, and dashboards where each item needs its own QR. This guide walks through three honest, proven patterns: self-hosted SVG for static pages, client-side generation with a JavaScript library for dynamic content, and dynamic QR (redirect) codes for printed materials where the destination may change. No imaginary APIs — just techniques that work today, with zero vendor lock-in.
Step-by-step Guide
Pattern 1: Self-hosted SVG
Use qrmint.app to generate your QR code, download it as SVG (infinitely scalable, text-based, ~1KB), and commit it to your /public folder. Reference it with <img src="/qr-homepage.svg" alt="QR code" width="200" />. Works everywhere, zero runtime cost, CSP-friendly.
Pattern 2: Client-side generation with qrcode.js
For per-product or per-user QR codes, include a library like qrcode.js or qr-code-styling via a <script> tag or npm install. Render each code in-browser: new QRCodeStyling({ data: productUrl, width: 256 }).append(el). No external requests, no tracking, no API limits.
Pattern 3: Dynamic QR codes (Pro)
When the printed URL must stay the same but the destination changes (e.g. a restaurant menu, a time-limited campaign), generate a dynamic QR with qrmint.app Pro. You get a qrmint.app/r/{code} short URL; update the redirect target in the dashboard without reprinting.
E-commerce: per-product QR
Render QR codes in your product template at build time (SSG/ISR) or client-side. For Shopify, add a snippet with qrcode.js pointing at {{ product.url }}. For Next.js / Astro, generate SVG in getStaticProps and inline it.
Email: per-order QR
Transactional emails should never depend on external image hosts that might get blocked. Embed QR codes as data: URLs (base64-encoded PNG) generated server-side, or use a library like node-qrcode in your email worker to produce an inline attachment.
WordPress and CMS integration
Drop a qrmint.app-exported SVG into your Media Library and insert it as an Image block. For dynamic per-post QR codes, use a shortcode plugin that calls a client-side library (no dedicated QR plugin required if you already use a JS snippet loader).
Try it now
Create QR code →Tips & Best Practices
- ●Prefer SVG over PNG for print and retina displays — scalable, tiny, and ~1KB vs 50KB+.
- ●Set explicit width and height on the <img> tag to prevent cumulative layout shift (CLS).
- ●For high-volume per-item QR codes, generate client-side with qrcode.js to eliminate server cost and external dependencies.
- ●When you do need a dynamic redirect, use qrmint.app Pro dynamic QR — the short URL stays stable even after you update the destination.