tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add marketing landing pages and tools for dynamic QR codes and analytics

Browse Source
This commit is contained in:
Timo Knuth
2026-04-07 14:50:16 +02:00
parent 8408159a96
commit a6fd2ed61f
14 changed files with 1360 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/blog/static-vs-dynamic-qr-code.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

4
src/app/(main)/(marketing)/MarketingLayout.tsx
View File

@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Footer } from '@/components/ui/Footer';
import en from '@/i18n/en.json';
import { ChevronDown, BookOpen, Building2, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon } from 'lucide-react';
import { ChevronDown, BookOpen, Building2, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon, Star } from 'lucide-react';
import { cn } from '@/lib/utils';
import { AnimatePresence, motion } from 'framer-motion';
import { allUseCases } from '@/lib/growth-pages';
@@ -67,6 +67,7 @@ export default function MarketingLayout({
{ name: 'Zoom', description: 'Join Zoom meeting', href: '/tools/zoom-qr-code', icon: Video, color: 'text-sky-500', bgColor: 'bg-sky-50' },
{ name: 'Teams', description: 'Join Teams meeting', href: '/tools/teams-qr-code', icon: Users, color: 'text-violet-500', bgColor: 'bg-violet-50' },
{ name: 'Barcode', description: 'Generate barcodes', href: '/tools/barcode-generator', icon: BarcodeIcon, color: 'text-slate-800', bgColor: 'bg-slate-100' },
{ name: 'Google Review', description: 'Get more reviews', href: '/tools/google-review-qr-code', icon: Star, color: 'text-yellow-500', bgColor: 'bg-yellow-50' },
];
const resources = [
@@ -129,6 +130,7 @@ export default function MarketingLayout({
<li><a href="/tools/zoom-qr-code">Zoom QR Code</a></li>
<li><a href="/tools/teams-qr-code">Teams QR Code</a></li>
<li><a href="/tools/barcode-generator">Barcode Generator</a></li>
<li><a href="/tools/google-review-qr-code">Google Review QR Code</a></li>
</ul>
</nav>
</div>

12
src/app/(main)/(marketing)/custom-qr-code-generator/page.tsx
View File

@@ -313,6 +313,18 @@ export default function CustomQRCodeGeneratorPage() {
title: 'Real Estate Sign QR Codes',
description: 'Useful when branded property signage needs a cleaner listing handoff and trackable scan context.',
ctaLabel: 'Create your real estate QR code',
},
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Add tracking and updatable destinations to your branded QR codes.',
ctaLabel: 'Create dynamic QR',
},
{
href: '/tools/vcard-qr-code',
title: 'vCard QR Code Generator',
description: 'Turn your brand identity into a scannable digital business card.',
ctaLabel: 'Create vCard QR',
},
{
href: '/use-cases',

14
src/app/(main)/(marketing)/dynamic-qr-code-generator/page.tsx
View File

@@ -273,6 +273,20 @@ const relatedUseCaseLinks = [
description: featuredUseCases[1].summary,
ctaLabel: featuredUseCases[1].ctaLabel,
},
{
href: '/qr-code-tracking',
title: 'Track Every QR Code Scan',
description:
'See device, time, and location context for every scan. Understand which placements drive real activity.',
ctaLabel: 'Track your QR scans',
},
{
href: '/reprint-calculator',
title: 'QR Code Reprint Cost Calculator',
description:
'Calculate how much static QR reprints cost vs one active dynamic QR code.',
ctaLabel: 'Calculate reprint savings',
},
{
href: '/use-cases',
title: 'Explore the use-case hub',

36
src/app/(main)/(marketing)/qr-code-analytics/page.tsx
View File

@@ -4,6 +4,7 @@ import {
buildUseCaseMetadata,
UseCasePageTemplate,
} from "@/components/marketing/UseCasePageTemplate";
import { GrowthLinksSection } from "@/components/marketing/GrowthLinksSection";
export const metadata: Metadata = buildUseCaseMetadata({
title: "QR Code Analytics",
@@ -38,6 +39,7 @@ const softwareSchema = {
export default function QRCodeAnalyticsPage() {
return (
<>
<UseCasePageTemplate
title="QR Code Analytics"
description="Measure QR code scans by placement, timing, device context, and campaign route so offline workflows become reportable."
@@ -139,5 +141,39 @@ export default function QRCodeAnalyticsPage() {
]}
schemaData={[softwareSchema]}
/>
<GrowthLinksSection
eyebrow="Related workflows"
title="Analytics is only the start"
description="Tracking scans is more useful when it connects to destination flexibility, campaign comparison, and cost planning."
links={[
{
href: '/qr-code-tracking',
title: 'QR Code Tracking',
description: 'See device, time, and location context for every scan. Understand which placements drive real activity.',
ctaLabel: 'Track QR code scans',
},
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Create QR codes with updatable destinations so analytics can inform what to change — without reprinting.',
ctaLabel: 'Create dynamic QR code',
},
{
href: '/reprint-calculator',
title: 'Reprint Cost Calculator',
description: 'Calculate how much static reprints are costing vs one dynamic QR subscription.',
ctaLabel: 'Calculate reprint savings',
},
{
href: '/pricing',
title: 'Compare Plans',
description: 'See which plan gives you the scan volume, analytics depth, and QR code count your workflows need.',
ctaLabel: 'Compare plans',
},
]}
pageType="commercial"
cluster="qr-analytics"
/>
</>
);
}

321
src/app/(main)/(marketing)/qr-code-print-size-guide/page.tsx Normal file
View File

@@ -0,0 +1,321 @@
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { breadcrumbSchema } from '@/lib/schema';
import Breadcrumbs from '@/components/Breadcrumbs';
export const metadata: Metadata = {
title: 'QR Code Print Size Guide: Minimum Sizes for Every Surface | QR Master',
description: 'The minimum QR code size for print depends on scan distance. This guide gives you exact dimensions for business cards, flyers, posters, and billboards.',
keywords: ['minimum qr code size', 'qr code print size', 'qr code size for print', 'how big should a qr code be', 'qr code dimensions'],
alternates: {
canonical: 'https://www.qrmaster.net/qr-code-print-size-guide',
},
openGraph: {
title: 'QR Code Print Size Guide | QR Master',
description: 'Exact QR code dimensions for every print surface — from business cards to billboards.',
type: 'article',
url: 'https://www.qrmaster.net/qr-code-print-size-guide',
},
robots: {
index: true,
follow: true,
},
};
const breadcrumbs = [
{ name: 'Home', url: '/' },
{ name: 'QR Code Print Size Guide', url: '/qr-code-print-size-guide' },
];
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
'@id': 'https://www.qrmaster.net/qr-code-print-size-guide#article',
headline: 'QR Code Print Size Guide: Minimum Sizes for Every Surface',
description: 'The minimum QR code size for print depends on scan distance. This guide gives you exact dimensions for business cards, flyers, posters, and billboards.',
author: {
'@type': 'Organization',
name: 'QR Master',
url: 'https://www.qrmaster.net',
},
publisher: {
'@type': 'Organization',
name: 'QR Master',
url: 'https://www.qrmaster.net',
},
datePublished: '2026-04-07',
dateModified: '2026-04-07',
mainEntityOfPage: 'https://www.qrmaster.net/qr-code-print-size-guide',
};
const faqSchema = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: [
{
'@type': 'Question',
name: 'What is the minimum size for a QR code to be scannable?',
acceptedAnswer: {
'@type': 'Answer',
text: 'The minimum recommended size is 2 × 2 cm (0.8 × 0.8 in) for QR codes scanned at very close range (under 10 cm), such as on business cards. For most print materials scanned at arm\'s length (30–40 cm), use at least 3 × 3 cm.',
},
},
{
'@type': 'Question',
name: 'What DPI should I use for printing a QR code?',
acceptedAnswer: {
'@type': 'Answer',
text: 'For print, export your QR code at a minimum of 300 DPI. For large-format printing (posters, banners), use the vector SVG format instead of PNG — SVG scales to any size without quality loss.',
},
},
{
'@type': 'Question',
name: 'How big should a QR code be on a poster?',
acceptedAnswer: {
'@type': 'Answer',
text: 'For an A2 poster (420 × 594 mm) viewed at 1–2 metres, use a QR code that is at least 8 × 8 cm. Larger is always better — a 10 × 10 cm code scans reliably from 2–3 metres away.',
},
},
{
'@type': 'Question',
name: 'How big should a QR code be on a business card?',
acceptedAnswer: {
'@type': 'Answer',
text: 'On a standard business card (85 × 55 mm), a QR code of 2 × 2 cm to 2.5 × 2.5 cm works reliably when held at normal reading distance (15–20 cm).',
},
},
{
'@type': 'Question',
name: 'Does adding a logo to a QR code affect scannability?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Only if the logo covers more than about 30% of the QR code area. QR codes have built-in error correction. At "Q" (25%) or "H" (30%) error correction level, a logo is fine. Always test scan after adding a logo.',
},
},
],
};
const sizeData = [
{ surface: 'Business Card', scanDistance: '15–20 cm', minSize: '2 × 2 cm', recommended: '2.5 × 2.5 cm', dpi: '300 DPI PNG', format: 'PNG or SVG' },
{ surface: 'Flyer / Leaflet', scanDistance: '20–30 cm', minSize: '3 × 3 cm', recommended: '4 × 4 cm', dpi: '300 DPI PNG', format: 'PNG or SVG' },
{ surface: 'A4 Poster', scanDistance: '30–60 cm', minSize: '5 × 5 cm', recommended: '7 × 7 cm', dpi: '300 DPI PNG', format: 'SVG recommended' },
{ surface: 'A2 / A1 Poster', scanDistance: '1–2 m', minSize: '8 × 8 cm', recommended: '10 × 10 cm', dpi: '300 DPI', format: 'SVG required' },
{ surface: 'Window / Banner', scanDistance: '1–3 m', minSize: '10 × 10 cm', recommended: '15 × 15 cm', dpi: 'Vector only', format: 'SVG required' },
{ surface: 'Billboard', scanDistance: '3–10 m', minSize: '20 × 20 cm', recommended: '30 × 30 cm', dpi: 'Vector only', format: 'SVG required' },
];
export default function QRCodePrintSizeGuidePage() {
return (
<>
<SeoJsonLd data={[articleSchema, faqSchema, breadcrumbSchema(breadcrumbs)]} />
<div className="min-h-screen bg-white">
{/* HERO */}
<section className="pt-20 pb-12 bg-gradient-to-br from-slate-900 to-slate-700 text-white">
<div className="container mx-auto px-4 max-w-4xl">
<Breadcrumbs items={breadcrumbs} className="[&_ol]:text-white/70 [&_span.font-semibold]:text-white [&_a]:text-white/70 [&_span]:text-white/70" />
<div className="mt-6 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6 border border-white/10">
Print Guide
</div>
<h1 className="text-4xl lg:text-5xl font-black mb-6 leading-tight">
QR Code Print Size Guide
</h1>
<p className="text-xl text-slate-300 max-w-2xl leading-relaxed mb-4">
The right QR code size depends on one thing: how far away will the scanner be?
This guide gives you exact minimum dimensions for every print surface.
</p>
<div className="bg-white/10 border border-white/20 rounded-xl p-4 mt-6 max-w-xl">
<p className="text-sm font-semibold text-white mb-1">Quick Rule of Thumb</p>
<p className="text-slate-300 text-sm">
QR code width = scan distance ÷ 10. Example: scanning from 30 cm → minimum 3 cm wide.
</p>
</div>
</div>
</section>
{/* SIZE TABLE */}
<section className="py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 mb-8">
Recommended Size by Print Surface and Scan Distance
</h2>
<div className="overflow-x-auto rounded-2xl border border-slate-200 shadow-sm">
<table className="w-full text-sm">
<thead>
<tr className="bg-slate-900 text-white">
<th className="px-5 py-4 text-left font-semibold">Surface</th>
<th className="px-5 py-4 text-left font-semibold">Scan Distance</th>
<th className="px-5 py-4 text-left font-semibold">Minimum Size</th>
<th className="px-5 py-4 text-left font-semibold">Recommended</th>
<th className="px-5 py-4 text-left font-semibold">Format</th>
</tr>
</thead>
<tbody>
{sizeData.map((row, i) => (
<tr key={row.surface} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
<td className="px-5 py-4 font-semibold text-slate-900">{row.surface}</td>
<td className="px-5 py-4 text-slate-600">{row.scanDistance}</td>
<td className="px-5 py-4 text-red-700 font-semibold">{row.minSize}</td>
<td className="px-5 py-4 text-green-700 font-semibold">{row.recommended}</td>
<td className="px-5 py-4 text-slate-600">{row.format}</td>
</tr>
))}
</tbody>
</table>
</div>
<p className="mt-4 text-xs text-slate-500">
Sizes are for QR codes with standard black-on-white contrast at error correction level Q or H. Reduce minimum sizes by 20% only in ideal lighting conditions.
</p>
</div>
</section>
{/* DPI & FORMAT GUIDE */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50 border-y border-slate-200">
<div className="max-w-4xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 mb-8">DPI and Format Requirements</h2>
<div className="grid md:grid-cols-3 gap-6">
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
<div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center mb-4">
<span className="font-bold text-blue-700 text-sm">PNG</span>
</div>
<h3 className="font-bold text-slate-900 mb-2">PNG for Small Print</h3>
<p className="text-sm text-slate-600 leading-relaxed">
Use PNG at <strong>300 DPI minimum</strong> for business cards, flyers, and small posters. Export at 10× your target print size in pixels (e.g. 3 cm at 300 DPI = 354 px).
</p>
</div>
<div className="bg-white p-6 rounded-2xl border border-emerald-100 shadow-sm ring-1 ring-emerald-200">
<div className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center mb-4">
<span className="font-bold text-emerald-700 text-sm">SVG</span>
</div>
<h3 className="font-bold text-slate-900 mb-2">SVG for Everything Larger</h3>
<p className="text-sm text-slate-600 leading-relaxed">
SVG is a vector format — it scales to any size without quality loss. Use SVG for all A2+ posters, banners, and billboards. QR Master exports SVG directly from the generator.
</p>
</div>
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
<div className="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center mb-4">
<span className="font-bold text-amber-700 text-sm">ECL</span>
</div>
<h3 className="font-bold text-slate-900 mb-2">Error Correction Level</h3>
<p className="text-sm text-slate-600 leading-relaxed">
Use <strong>Level Q</strong> (25% recovery) or <strong>Level H</strong> (30% recovery) for print — especially if you add a logo. Higher error correction means more modules and a slightly larger minimum size.
</p>
</div>
</div>
</div>
</section>
{/* PRINT CHECKLIST */}
<section className="py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 mb-8">Print QR Code Checklist</h2>
<ul className="space-y-3">
{[
'QR code is at least the minimum size for the intended scan distance',
'High contrast between QR modules and background (black on white preferred)',
'Quiet zone (white border) of at least 4 module widths on all sides',
'Exported as SVG for large format, PNG at 300+ DPI for small format',
'Scanned from target distance before sending to print',
'Error correction set to Q or H if a logo is embedded',
'Dynamic QR code used if the destination URL might change',
].map((item) => (
<li key={item} className="flex items-start gap-3">
<span className="mt-0.5 w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0">
<svg className="w-3 h-3 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
</span>
<span className="text-slate-700 text-sm leading-relaxed">{item}</span>
</li>
))}
</ul>
</div>
</section>
<GrowthLinksSection
eyebrow="Ready to print?"
title="Create your print-ready QR code"
description="Generate, customize, and download QR codes in SVG or PNG at any size you need."
links={[
{
href: '/reprint-calculator',
title: 'Reprint Cost Calculator',
description: 'Calculate how much static reprints are costing vs one dynamic QR subscription.',
ctaLabel: 'Calculate reprint savings',
},
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Create QR codes you can update after printing. No reprint needed when links change.',
ctaLabel: 'Create dynamic QR code',
},
{
href: '/custom-qr-code-generator',
title: 'Custom QR Code Generator',
description: 'Add your logo, brand colors, and a frame to create print-ready branded QR codes.',
ctaLabel: 'Create custom QR code',
},
]}
pageType="commercial"
cluster="print-size-guide"
/>
{/* FAQ */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50">
<div className="max-w-3xl mx-auto">
<h2 className="text-2xl font-bold text-slate-900 text-center mb-10">
Frequently Asked Questions
</h2>
<div className="space-y-4">
{[
{
question: 'What is the minimum size for a QR code to be scannable?',
answer: 'The absolute minimum is 2 × 2 cm for scanning at very close range (business cards, held 15 cm away). For most materials, use at least 3 × 3 cm. The general rule: minimum width = scan distance ÷ 10.',
},
{
question: 'What DPI should I use for printing a QR code?',
answer: 'Use 300 DPI minimum for all print. For large format (posters, banners, billboards), always use SVG — it is vector-based and scales to any size without quality loss.',
},
{
question: 'How big should a QR code be on a poster?',
answer: 'For an A2 poster viewed at 1–2 metres, use at least 8 × 8 cm. For A1 posters viewed from further away, 10 × 10 cm is recommended.',
},
{
question: 'How big should a QR code be on a business card?',
answer: 'On a standard business card (85 × 55 mm), a 2 × 2 cm to 2.5 × 2.5 cm QR code works reliably when scanned at normal reading distance.',
},
{
question: 'Does adding a logo affect QR code scannability?',
answer: 'Only if the logo covers more than ~30% of the QR area. Use error correction level Q or H when adding logos. Always test scan before printing at scale.',
},
].map((item) => (
<details key={item.question} className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{item.question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{item.answer}
</div>
</details>
))}
</div>
</div>
</section>
</div>
</>
);
}

14
src/app/(main)/(marketing)/qr-code-tracking/page.tsx
View File

@@ -241,6 +241,20 @@ const relatedUseCaseLinks = [
'Tie printed discount placements to measurable scans so you can compare promotion performance.',
ctaLabel: 'Create your coupon QR code',
},
{
href: '/qr-code-analytics',
title: 'QR Code Analytics Dashboard',
description:
'Go deeper into placement-level reporting and offline campaign attribution.',
ctaLabel: 'Explore QR analytics',
},
{
href: '/reprint-calculator',
title: 'QR Code Reprint Cost Calculator',
description:
'See how much dynamic QR codes save vs reprinting static codes each campaign.',
ctaLabel: 'Calculate reprint savings',
},
{
href: '/use-cases',
title: 'Explore the use-case hub',

61
src/app/(main)/(marketing)/reprint-calculator/page.tsx
View File

@@ -2,6 +2,9 @@ import React from 'react';
import type { Metadata } from 'next';
import ReprintSavingsCalculator from '@/components/marketing/ReprintSavingsCalculator';
import { ArrowDown, Check, ShieldCheck, Zap } from 'lucide-react';
import SeoJsonLd from '@/components/SeoJsonLd';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { breadcrumbSchema } from '@/lib/schema';
export const metadata: Metadata = {
title: 'Reprint Cost Calculator | QR Master',
@@ -30,9 +33,58 @@ export const metadata: Metadata = {
},
};
const softwareSchema = {
'@context': 'https://schema.org',
'@type': 'WebApplication',
'@id': 'https://www.qrmaster.net/reprint-calculator#app',
name: 'QR Code Reprint Cost Calculator',
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web Browser',
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
description: 'Calculate the cost of reprinting static QR codes vs switching to dynamic QR codes that never need reprinting.',
};
const howToSchema = {
'@context': 'https://schema.org',
'@type': 'HowTo',
name: 'How to calculate QR code reprint costs',
step: [
{ '@type': 'HowToStep', position: 1, name: 'Enter print run size', text: 'Enter how many QR codes you print per campaign.' },
{ '@type': 'HowToStep', position: 2, name: 'Enter reprint cost', text: 'Enter your cost per reprint campaign.' },
{ '@type': 'HowToStep', position: 3, name: 'See annual savings', text: 'The calculator shows how much dynamic QR codes save annually.' },
],
};
const breadcrumbs = [
{ name: 'Home', url: '/' },
{ name: 'Reprint Calculator', url: '/reprint-calculator' },
];
const growthLinks = [
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Create QR codes you can update after printing. Change the destination without reprinting a single flyer.',
ctaLabel: 'Create dynamic QR code',
},
{
href: '/qr-code-tracking',
title: 'QR Code Tracking',
description: 'See device, time, and location context for every scan. Know which placements drive real activity.',
ctaLabel: 'Track your QR scans',
},
{
href: '/pricing',
title: 'Compare Plans',
description: 'One dynamic QR subscription costs less than a single batch of reprints. See the plan that fits your volume.',
ctaLabel: 'Compare plans',
},
];
export default function ReprintCalculatorPage() {
return (
<>
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbs)]} />
{/* Hero Section */}
<section className="pt-24 pb-12 bg-white relative overflow-hidden">
<div className="container mx-auto px-4 text-center max-w-3xl relative z-10">
@@ -112,6 +164,15 @@ export default function ReprintCalculatorPage() {
</div>
</div>
</section>
<GrowthLinksSection
eyebrow="Next steps"
title="Stop reprinting. Start updating."
description="Dynamic QR codes let you change the destination after printing. One code, unlimited campaigns."
links={growthLinks}
pageType="commercial"
cluster="reprint-calculator"
/>
</>
);
}

213
src/app/(main)/(marketing)/tools/google-review-qr-code/GoogleReviewGenerator.tsx Normal file
View File

@@ -0,0 +1,213 @@
'use client';
import React, { useState, useRef } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { toPng } from 'html-to-image';
import { Star, Download, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
const QR_COLORS = [
{ name: 'Google Blue', value: '#1A73E8' },
{ name: 'Classic Black', value: '#000000' },
{ name: 'Indigo', value: '#4F46E5' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
{ name: 'Violet', value: '#7C3AED' },
];
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'review', label: 'Leave a Review' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'feedback', label: 'Share Feedback' },
];
function isValidGoogleReviewLink(url: string): boolean {
try {
const parsed = new URL(url);
return (
parsed.hostname.includes('google.com') ||
parsed.hostname.includes('g.page') ||
parsed.hostname.includes('maps.app.goo.gl')
);
} catch {
return false;
}
}
export default function GoogleReviewGenerator() {
const [reviewUrl, setReviewUrl] = useState('');
const [qrColor, setQrColor] = useState('#1A73E8');
const [frameType, setFrameType] = useState('review');
const [error, setError] = useState('');
const qrRef = useRef<HTMLDivElement>(null);
const handleUrlChange = (value: string) => {
setReviewUrl(value);
if (value && !isValidGoogleReviewLink(value)) {
setError('Please enter a valid Google Review link (google.com, g.page, or maps.app.goo.gl)');
} else {
setError('');
}
};
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = 'google-review-qr-code.png';
link.href = dataUrl;
link.click();
} else {
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
if (svgData) {
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'google-review-qr-code.svg';
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const frameLabel = FRAME_OPTIONS.find(f => f.id === frameType && f.id !== 'none')?.label ?? null;
const isReady = reviewUrl && !error && isValidGoogleReviewLink(reviewUrl);
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
<div className="grid lg:grid-cols-2">
{/* LEFT: Input */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
<div className="space-y-4">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Star className="w-5 h-5 text-yellow-500" />
Your Google Review Link
</h2>
<div>
<Input
type="url"
placeholder="https://g.page/r/YOUR_ID/review"
value={reviewUrl}
onChange={(e) => handleUrlChange(e.target.value)}
className="w-full font-mono text-sm"
/>
{error && (
<div className="mt-2 flex items-center gap-2 text-sm text-red-600">
<AlertCircle className="w-4 h-4 shrink-0" />
{error}
</div>
)}
{!reviewUrl && (
<p className="mt-2 text-xs text-slate-500">
Go to Google Maps → find your business → Share → Copy link
</p>
)}
</div>
</div>
{/* Color Picker */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-slate-700">QR Color</h3>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((color) => (
<button
key={color.value}
onClick={() => setQrColor(color.value)}
className={`w-8 h-8 rounded-full border-2 transition-all ${
qrColor === color.value
? 'border-slate-900 scale-110'
: 'border-transparent hover:border-slate-300'
}`}
style={{ backgroundColor: color.value }}
title={color.name}
/>
))}
</div>
</div>
{/* Frame */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-slate-700">Frame Label</h3>
<div className="grid grid-cols-2 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={`px-3 py-2 rounded-xl text-sm font-medium border transition-all ${
frameType === frame.id
? 'border-blue-600 bg-blue-50 text-blue-700'
: 'border-slate-200 text-slate-600 hover:border-slate-300'
}`}
>
{frame.label}
</button>
))}
</div>
</div>
{/* Download Buttons */}
<div className="space-y-3">
<Button
onClick={() => handleDownload('png')}
disabled={!isReady}
className="w-full flex items-center justify-center gap-2"
>
<Download className="w-4 h-4" />
Download PNG
</Button>
<button
onClick={() => handleDownload('svg')}
disabled={!isReady}
className="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-slate-700 text-sm font-medium hover:border-slate-300 hover:bg-slate-50 transition-all disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
<Download className="w-4 h-4" />
Download SVG
</button>
</div>
</div>
{/* RIGHT: Preview */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center bg-slate-50">
<h3 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-6">Preview</h3>
<div ref={qrRef} className="flex flex-col items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
<QRCodeSVG
value={isReady ? reviewUrl : 'https://www.qrmaster.net/tools/google-review-qr-code'}
size={200}
fgColor={qrColor}
level="Q"
includeMargin={true}
/>
{frameLabel && (
<div
className="mt-3 px-4 py-1.5 rounded-full text-sm font-semibold text-white"
style={{ backgroundColor: qrColor }}
>
{frameLabel}
</div>
)}
</div>
{!isReady && (
<p className="mt-4 text-xs text-slate-400 text-center max-w-[200px]">
Enter your Google Review link to generate your QR code
</p>
)}
</div>
</div>
</div>
</div>
);
}

366
src/app/(main)/(marketing)/tools/google-review-qr-code/page.tsx Normal file
View File

@@ -0,0 +1,366 @@
import React from 'react';
import type { Metadata } from 'next';
import GoogleReviewGenerator from './GoogleReviewGenerator';
import { Star, MapPin, Search, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { generateSoftwareAppSchema } from '@/lib/schema-utils';
export const metadata: Metadata = {
title: {
absolute: 'Google Review QR Code Generator — Free | QR Master',
},
description: 'Create a QR code for your Google Reviews in seconds. Customers scan once and land directly on your review form. Free, no signup required.',
keywords: ['qr code for google reviews', 'qr code generator for google reviews', 'google review qr code', 'google maps review qr code', 'get more google reviews'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/google-review-qr-code',
},
openGraph: {
title: 'Google Review QR Code Generator — Free | QR Master',
description: 'Create a QR code that takes customers directly to your Google review form. More reviews, less friction.',
type: 'website',
url: 'https://www.qrmaster.net/tools/google-review-qr-code',
},
twitter: {
card: 'summary_large_image',
title: 'Google Review QR Code Generator — Free',
description: 'Create a QR code that takes customers directly to your Google review form.',
},
robots: {
index: true,
follow: true,
},
};
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Google Review QR Code Generator',
'Generate a QR code that links directly to your Google review form. Customers scan once and can leave a review immediately.',
'/og-image.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Google Review QR Code',
description: 'Generate a QR code that sends customers directly to your Google review form.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Find your Google Review link',
text: 'Open Google Maps, search for your business, click Share → Copy link. Or use Google Business Profile → Get more reviews.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Paste the link into the generator',
text: 'Paste your Google review URL into the field above. The generator accepts g.page, google.com, and maps.app.goo.gl links.',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize and download',
text: 'Choose a color and frame label (e.g. "Leave a Review"), then download as PNG or SVG.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Display the QR code',
text: 'Print the code on receipts, table cards, packaging, or your window. Customers scan once to review.',
},
],
totalTime: 'PT60S',
},
{
'@type': 'FAQPage',
mainEntity: [
{
'@type': 'Question',
name: 'How do I find my Google Review link?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Open Google Maps → search for your business → click Share → Copy link. Alternatively, go to your Google Business Profile dashboard → click "Get more reviews" — this gives you a direct review shortlink.',
},
},
{
'@type': 'Question',
name: 'Does this Google Review QR code expire?',
acceptedAnswer: {
'@type': 'Answer',
text: 'No. This is a static QR code that directly encodes your Google review URL. It will work as long as your Google Business Profile is active.',
},
},
{
'@type': 'Question',
name: 'Can I track how many people scanned the QR code?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Not with a static QR code. If you need scan analytics (device, location, time), create a dynamic QR code with tracking through QR Master.',
},
},
{
'@type': 'Question',
name: 'What happens when a customer scans the QR code?',
acceptedAnswer: {
'@type': 'Answer',
text: 'They are taken directly to your Google review form. If they are logged into a Google account on their phone, they can leave a review immediately with no extra steps.',
},
},
{
'@type': 'Question',
name: 'Where should I display the Google Review QR code?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Best placements: receipts, table tent cards (restaurants), checkout counters, packaging inserts, and your shop window. The moment after a positive experience is the best time to ask for a review.',
},
},
],
},
{
'@type': 'BreadcrumbList',
itemListElement: [
{ '@type': 'ListItem', position: 1, name: 'Home', item: 'https://www.qrmaster.net' },
{ '@type': 'ListItem', position: 2, name: 'QR Code Tools', item: 'https://www.qrmaster.net/tools' },
{ '@type': 'ListItem', position: 3, name: 'Google Review QR Code Generator', item: 'https://www.qrmaster.net/tools/google-review-qr-code' },
],
},
],
};
export default function GoogleReviewQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Google Review QR Code Generator" toolSlug="google-review-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#1A1265]">
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 border border-white/10">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-yellow-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Google Review QR Code <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">Generator — Free</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Customers scan once and land directly on your Google review form.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> More reviews, less friction.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5">
<Star className="w-4 h-4 text-yellow-400" />
Direct to Review Form
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5">
<MapPin className="w-4 h-4 text-emerald-400" />
Works for Any Business
</div>
</div>
</div>
{/* Hero QR Visual */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-yellow-500/20 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net/tools/google-review-qr-code" size={170} fgColor="#1A73E8" level="Q" />
</div>
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center">
<Star className="w-4 h-4 text-yellow-300" />
</div>
<div className="space-y-1 w-full">
<div className="h-1.5 w-3/4 bg-white/30 rounded-full" />
<div className="h-1.5 w-1/2 bg-white/20 rounded-full" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<GoogleReviewGenerator />
</section>
{/* HOW TO FIND YOUR REVIEW LINK */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
How to Find Your Google Review Link
</h2>
<p className="text-slate-600 text-center mb-12 max-w-2xl mx-auto">
You need your Google Business review URL before creating the QR code. Here are two ways to get it.
</p>
<div className="grid md:grid-cols-2 gap-8">
<article className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
<div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mb-4">
<Search className="w-6 h-6 text-blue-600" />
</div>
<h3 className="font-bold text-slate-900 mb-3">Method 1: Google Maps</h3>
<ol className="space-y-2 text-sm text-slate-600 list-none">
<li><span className="font-semibold text-slate-800">1.</span> Open Google Maps</li>
<li><span className="font-semibold text-slate-800">2.</span> Search for your business name</li>
<li><span className="font-semibold text-slate-800">3.</span> Click the <strong>Share</strong> button</li>
<li><span className="font-semibold text-slate-800">4.</span> Copy the short link (starts with <code className="bg-white px-1 rounded text-xs">maps.app.goo.gl</code> or <code className="bg-white px-1 rounded text-xs">g.page</code>)</li>
<li><span className="font-semibold text-slate-800">5.</span> Paste into the generator above</li>
</ol>
</article>
<article className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
<div className="w-12 h-12 rounded-xl bg-yellow-100 flex items-center justify-center mb-4">
<Share2 className="w-6 h-6 text-yellow-600" />
</div>
<h3 className="font-bold text-slate-900 mb-3">Method 2: Google Business Profile</h3>
<ol className="space-y-2 text-sm text-slate-600 list-none">
<li><span className="font-semibold text-slate-800">1.</span> Sign in to <strong>business.google.com</strong></li>
<li><span className="font-semibold text-slate-800">2.</span> Select your business location</li>
<li><span className="font-semibold text-slate-800">3.</span> Click <strong>"Get more reviews"</strong></li>
<li><span className="font-semibold text-slate-800">4.</span> Copy the review shortlink provided</li>
<li><span className="font-semibold text-slate-800">5.</span> Paste into the generator above</li>
</ol>
</article>
</div>
</div>
</section>
{/* USE CASES */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-5xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Who Uses Google Review QR Codes?
</h2>
<p className="text-slate-600 text-center mb-12">
Any business where the moment of satisfaction happens in person.
</p>
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
{[
{ icon: '🍽️', title: 'Restaurants & Cafés', text: 'Print on receipts or table cards. Ask after the meal when the experience is fresh.' },
{ icon: '🏨', title: 'Hotels & Guesthouses', text: 'Place on checkout envelopes or in-room cards. Capture reviews at checkout.' },
{ icon: '🏥', title: 'Clinics & Salons', text: 'Display at reception. Patients and clients who had a great experience can review in seconds.' },
{ icon: '🛍️', title: 'Retail & Shops', text: 'Include in packaging or display at checkout. Turn happy shoppers into reviewers.' },
].map((item) => (
<article key={item.title} className="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
<div className="text-3xl mb-3">{item.icon}</div>
<h3 className="font-bold text-slate-900 mb-2">{item.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{item.text}</p>
</article>
))}
</div>
</div>
</section>
<GrowthLinksSection
eyebrow="Level up your local marketing"
title="More QR workflows for local businesses"
description="Review QR codes work best alongside dynamic destination management and scan tracking."
links={[
{
href: '/qr-code-for/restaurants',
title: 'QR Codes for Restaurants',
description: 'Menu, ordering, and review QR workflows built for food service businesses.',
ctaLabel: 'Restaurant QR workflows',
},
{
href: '/qr-code-for/hotels',
title: 'QR Codes for Hotels',
description: 'Check-in, room service, and review QR setups for hospitality.',
ctaLabel: 'Hotel QR workflows',
},
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Update your review link or redirect to a different page anytime — no reprint needed.',
ctaLabel: 'Create dynamic QR code',
},
{
href: '/qr-code-tracking',
title: 'QR Code Tracking',
description: 'See exactly how many people scanned your review QR code and from which location.',
ctaLabel: 'Track QR code scans',
},
]}
pageType="commercial"
cluster="google-review-qr"
/>
<RelatedTools />
{/* FAQ */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Google Review QR codes.
</p>
<div className="space-y-4">
{[
{
question: 'How do I find my Google Review link?',
answer: 'Open Google Maps → search your business → click Share → Copy link. Or go to Google Business Profile → "Get more reviews" for a direct shortlink.',
},
{
question: 'Does the Google Review QR code expire?',
answer: 'No. This is a static QR code that encodes your Google review URL directly. It works indefinitely as long as your Google Business Profile is active.',
},
{
question: 'Can I track how many people scanned it?',
answer: 'Not with a static QR code. For scan analytics (device, location, time), create a dynamic QR code with tracking through QR Master.',
},
{
question: 'What happens when a customer scans the QR code?',
answer: 'They are taken directly to your Google review form. If they are logged into a Google account, they can leave a star rating and review immediately.',
},
{
question: 'Where should I put the Google Review QR code?',
answer: 'Best placements: receipts, table cards, checkout counters, packaging inserts, and your shop window. Ask for reviews right after the positive experience.',
},
].map((item) => (
<details key={item.question} className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{item.question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{item.answer}
</div>
</details>
))}
</div>
</div>
</section>
</div>
</>
);
}

24
src/app/(main)/(marketing)/tools/vcard-qr-code/page.tsx
View File

@@ -5,6 +5,7 @@ import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus } from
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
@@ -238,6 +239,29 @@ export default function VCardQRCodePage() {
</div>
</section>
{/* GROWTH LINKS */}
<GrowthLinksSection
eyebrow="Level up your QR strategy"
title="More ways to use QR codes for your brand"
description="A vCard QR code is a great start. Add custom design, tracking, and dynamic destinations to get the most out of every print."
links={[
{
href: '/custom-qr-code-generator',
title: 'Custom QR Code Generator',
description: 'Add your logo, brand colors, and a custom frame to your QR codes.',
ctaLabel: 'Custom QR with logo',
},
{
href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator',
description: 'Update your contact destination after printing. No new QR code needed.',
ctaLabel: 'Dynamic QR with tracking',
},
]}
pageType="commercial"
cluster="vcard-qr"
/>
{/* RELATED TOOLS */}
<RelatedTools />

11
src/components/marketing/FreeToolsGrid.tsx
View File

@@ -23,7 +23,8 @@ import {
CreditCard,
Video,
Users,
Barcode
Barcode,
Star
} from 'lucide-react';
const TOOLS = [
@@ -186,6 +187,14 @@ const TOOLS = [
href: '/tools/barcode-generator',
color: 'text-slate-900',
bg: 'bg-slate-100'
},
{
icon: Star,
name: 'Google Review',
description: 'Get more Google reviews',
href: '/tools/google-review-qr-code',
color: 'text-yellow-500',
bg: 'bg-yellow-50'
}
];

195
src/lib/blog-data.ts
View File

@@ -5,6 +5,201 @@ export const blogPosts: BlogPost[] = [
// NEW POSTS
// ==================================================================================
{
slug: "static-vs-dynamic-qr-code",
title: "Static vs Dynamic QR Code: What's the Difference and Which Do You Need?",
description: "Static QR codes are permanent. Dynamic QR codes let you change the destination after printing. This guide shows when to use each — with real reprint cost examples.",
excerpt: "Static QR codes are permanent. Dynamic QR codes let you change the destination after printing. This guide shows when to use each — with real reprint cost examples.",
category: "QR Code Basics",
pillar: "use-cases",
published: true,
publishDate: "2026-04-07",
date: "April 7, 2026",
datePublished: "2026-04-07T09:00:00Z",
dateModified: "2026-04-07T09:00:00Z",
updatedAt: "2026-04-07",
authorSlug: "timo",
authorName: "Timo Knuth",
authorTitle: "QR Code & Marketing Expert",
readTime: "9 Min",
image: "/blog/static-vs-dynamic-qr-code.png",
heroImage: "/blog/static-vs-dynamic-qr-code.png",
imageAlt: "Side-by-side comparison of a static QR code and a dynamic QR code with editable destination",
keywords: ["static qr codes", "dynamic qr code", "static vs dynamic qr code", "edit a qr code", "redirect a qr code", "can you change a qr code link", "can you change the url of a qr code", "dynamic qr code meaning"],
quickAnswer: `<p>A <strong>static QR code</strong> encodes data permanently — you cannot change it after printing. A <strong>dynamic QR code</strong> uses a short redirect URL so you can update the destination at any time without reprinting. Dynamic codes cost more but are essential for print campaigns where links change.</p>`,
keySteps: [
"Decide if your destination URL will ever change — if yes, use dynamic.",
"For business cards, menus, or seasonal campaigns: always use dynamic.",
"For one-time personal use (WiFi, event check-in): static is fine.",
"Calculate your reprint costs before committing to static at scale.",
"With dynamic QR codes, update the URL in your dashboard — the printed code keeps working.",
],
faq: [
{
question: "Can you edit a QR code after printing?",
answer: "Not directly. A static QR code cannot be edited — the data is fixed. A dynamic QR code can be edited: you change the destination URL in your dashboard, and the printed code automatically redirects to the new URL.",
},
{
question: "Can you change a QR code link?",
answer: "Yes, but only if it is a dynamic QR code. Dynamic codes point to a short redirect URL that you control. Change the destination in your dashboard and the printed code updates immediately.",
},
{
question: "Can you redirect a QR code?",
answer: "Yes — dynamic QR codes work through a redirect layer. You set the final destination in a dashboard and can change it at any time. Static QR codes cannot be redirected.",
},
{
question: "Can you change the URL of a QR code?",
answer: "Only for dynamic QR codes. The printed code links to a short managed URL. You update the destination in your account and the redirect changes — no new print needed.",
},
{
question: "What does dynamic QR code mean?",
answer: "A dynamic QR code encodes a short redirect URL instead of your final destination. This means you can update where the code sends people at any time — without reprinting the physical code.",
},
{
question: "Are static QR codes free?",
answer: "Yes. Static QR codes can be generated for free and require no account or ongoing service. However, they cannot be edited or tracked after creation.",
},
{
question: "What happens when I reprint a static QR code?",
answer: "Reprinting means discarding all previously printed materials and paying full production costs again. For campaigns that change URLs seasonally or annually, this adds up quickly. A single reprint batch for 500 flyers at €0.15 per piece costs €75 — before design and distribution.",
},
{
question: "Do dynamic QR codes expire?",
answer: "Only if your subscription expires. As long as your account is active, dynamic QR codes redirect indefinitely. QR Master offers a free tier with basic dynamic codes so you can test before committing.",
},
],
relatedSlugs: ["trackable-qr-codes", "microsoft-teams-qr-code"],
sources: [
{ name: "ISO/IEC 18004:2015 — QR Code bar code symbology specification", url: "https://www.iso.org/standard/62021.html", accessDate: "April 2026" },
{ name: "Denso Wave — QR Code inventor, official QR code information", url: "https://www.qrcode.com/en/about/", accessDate: "April 2026" },
{ name: "QR Master — Reprint Cost Calculator", url: "https://www.qrmaster.net/reprint-calculator", accessDate: "April 2026" },
{ name: "QR Master — Dynamic QR Code Generator", url: "https://www.qrmaster.net/dynamic-qr-code-generator", accessDate: "April 2026" },
],
content: `<div class="blog-content">
<div class="post-metadata bg-blue-50 p-4 rounded-lg mb-8 border-l-4 border-blue-500">
<p class="text-sm text-gray-700">
<strong>Author:</strong> Timo Knuth, QR Code &amp; Marketing Expert<br/>
Published: April 7, 2026
</p>
</div>
<div class="bg-green-50 border border-green-200 rounded-xl p-6 mb-8">
<h2 class="text-lg font-bold text-green-900 mt-0 mb-3">Quick answer</h2>
<p class="text-green-800 mb-0">A <strong>static QR code</strong> is permanent — once printed, the data is fixed forever. A <strong>dynamic QR code</strong> routes through a redirect you control, so you can update the destination at any time without reprinting. Dynamic codes are essential for any campaign where URLs change.</p>
</div>
<h2>What is a Static QR Code?</h2>
<p>A static QR code encodes your data — a URL, contact, WiFi password, or plain text — directly into the QR pattern. Once generated and printed, that data is permanent. You cannot change it.</p>
<p>Static codes work fine for:</p>
<ul>
<li>Personal WiFi passwords that never change</li>
<li>One-time event check-in links</li>
<li>Plain text like a short message or fixed phone number</li>
<li>Anything where you are 100% certain the content will not change</li>
</ul>
<p>The problem starts when you use static QR codes for business campaigns where URLs change — menus get updated, promo pages expire, link structures migrate. Every change forces a full reprint.</p>
<h2>What is a Dynamic QR Code?</h2>
<p>A dynamic QR code encodes a short redirect URL (e.g., <code>qrmaster.net/r/abc123</code>) instead of your final destination. You control where that redirect points in a dashboard. Change the destination, and the printed code automatically sends scanners to the new URL — no reprint needed.</p>
<p>Dynamic codes also enable:</p>
<ul>
<li><strong>Scan tracking</strong> — see how many people scanned, on which device, from which country</li>
<li><strong>A/B destination testing</strong> — route scans to different landing pages to compare performance</li>
<li><strong>Campaign attribution</strong> — tie print placements to real conversion data</li>
</ul>
<h2>Static vs Dynamic QR Code: Feature Comparison</h2>
<div class="overflow-x-auto my-8">
<table class="w-full border-collapse text-sm">
<thead>
<tr class="bg-slate-100">
<th class="border border-slate-200 px-4 py-3 text-left font-semibold">Feature</th>
<th class="border border-slate-200 px-4 py-3 text-center font-semibold">Static QR Code</th>
<th class="border border-slate-200 px-4 py-3 text-center font-semibold">Dynamic QR Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-slate-200 px-4 py-3">Edit destination after print</td>
<td class="border border-slate-200 px-4 py-3 text-center text-red-600 font-semibold">No</td>
<td class="border border-slate-200 px-4 py-3 text-center text-green-600 font-semibold">Yes</td>
</tr>
<tr class="bg-slate-50">
<td class="border border-slate-200 px-4 py-3">Scan analytics</td>
<td class="border border-slate-200 px-4 py-3 text-center text-red-600 font-semibold">No</td>
<td class="border border-slate-200 px-4 py-3 text-center text-green-600 font-semibold">Yes</td>
</tr>
<tr>
<td class="border border-slate-200 px-4 py-3">Reprint needed when URL changes</td>
<td class="border border-slate-200 px-4 py-3 text-center text-red-600 font-semibold">Yes</td>
<td class="border border-slate-200 px-4 py-3 text-center text-green-600 font-semibold">No</td>
</tr>
<tr class="bg-slate-50">
<td class="border border-slate-200 px-4 py-3">Cost after printing</td>
<td class="border border-slate-200 px-4 py-3 text-center">€0 (but reprints add up)</td>
<td class="border border-slate-200 px-4 py-3 text-center">Subscription fee</td>
</tr>
<tr>
<td class="border border-slate-200 px-4 py-3">Works offline (WiFi, vCard)</td>
<td class="border border-slate-200 px-4 py-3 text-center text-green-600 font-semibold">Yes</td>
<td class="border border-slate-200 px-4 py-3 text-center">URL-based only</td>
</tr>
<tr class="bg-slate-50">
<td class="border border-slate-200 px-4 py-3">Best for</td>
<td class="border border-slate-200 px-4 py-3 text-center">One-time / permanent use</td>
<td class="border border-slate-200 px-4 py-3 text-center">Campaigns, print, marketing</td>
</tr>
</tbody>
</table>
</div>
<h2>The Real Cost of Static QR Code Reprints</h2>
<p>Here is where the math matters. Many businesses default to static QR codes because they are free to generate. But when the linked URL changes — which happens more often than expected — the cost of reprinting is significant.</p>
<h3>Example 1: Restaurant Menu</h3>
<p>A restaurant prints 200 table tent cards with a static QR code linking to their PDF menu. The menu changes quarterly (seasonal updates). Each reprint batch costs €60 in printing.</p>
<ul>
<li><strong>Year 1 cost with static:</strong> €60 × 4 reprints = <strong>€240 in printing alone</strong></li>
<li><strong>Year 1 cost with dynamic:</strong> €0 in reprints + €9/month subscription = <strong>€108</strong></li>
<li><strong>Savings with dynamic in Year 1: €132</strong></li>
</ul>
<h3>Example 2: Retail Shelf Talkers</h3>
<p>A retailer places 500 shelf talkers with a static QR linking to a seasonal promotion page. The promotion runs 6 times per year.</p>
<ul>
<li><strong>Static reprint cost:</strong> 500 talkers × €0.18 × 6 = <strong>€540/year</strong></li>
<li><strong>Dynamic QR subscription:</strong> ~€108/year</li>
<li><strong>Savings: €432/year</strong></li>
</ul>
<p>Use the <a href="/reprint-calculator" class="text-blue-600 underline font-semibold">QR Code Reprint Cost Calculator</a> to enter your own numbers and see your exact savings.</p>
<h2>When to Use Static QR Codes</h2>
<p>Static is the right choice when:</p>
<ul>
<li>The destination will never change (e.g., a permanent product manual URL)</li>
<li>You are encoding non-URL data: WiFi credentials, plain text, phone numbers, vCards</li>
<li>It is a one-time use case (event check-in, single-use coupon)</li>
<li>You have no budget for a subscription and the URL is guaranteed stable</li>
</ul>
<h2>When to Use Dynamic QR Codes</h2>
<p>Dynamic is the right choice when:</p>
<ul>
<li>The destination URL might change (promotions, menus, seasonal campaigns)</li>
<li>You need to know how many people scanned and from where</li>
<li>You are printing at scale (reprinting 500+ items every time a link changes is expensive)</li>
<li>You want to test different destinations (A/B routing)</li>
<li>You need to fix a typo in the URL after printing</li>
</ul>
<p>Get started with a <a href="/dynamic-qr-code-generator" class="text-blue-600 underline font-semibold">dynamic QR code generator</a> to create codes you can update after printing. Pair it with <a href="/qr-code-tracking" class="text-blue-600 underline font-semibold">QR code tracking</a> to see exactly who scans and from where.</p>
<h2>Summary</h2>
<p>The choice between static and dynamic QR codes comes down to one question: <strong>will the destination ever change?</strong> If yes, use dynamic — the subscription cost is almost always lower than the cost of reprinting. If no, static is free and perfectly adequate.</p>
</div>`,
},
{
slug: "microsoft-teams-qr-code",
title: "How to Create a Microsoft Teams QR Code for Instant Meeting Joins",

1
src/middleware.ts
View File

@@ -53,6 +53,7 @@ export function middleware(req: NextRequest) {
'/testimonials',
'/qr-code-for-marketing-campaigns',
'/qr-code-for',
'/qr-code-print-size-guide',
'/use-cases/flyer-qr-codes',
'/use-cases/packaging-qr-codes',
'/use-cases/real-estate-sign-qr-codes',