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

Shema

Browse Source
This commit is contained in:
Timo Knuth
2026-01-25 14:59:25 +01:00
parent eef4855c1b
commit 30c1e57eab
104 changed files with 24652 additions and 24741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
src/app/(main)/(marketing)/tools/sms-qr-code/SMSGenerator.tsx
View File

@@ -1,266 +1,266 @@
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
MessageSquare,
Download,
Check,
Sparkles,
Phone
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
primary: '#ea580c', // Orange-600
primaryDark: '#c2410c', // Orange-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'sms', label: 'SMS Us' },
{ id: 'text', label: 'Text Us' },
];
export default function SMSGenerator() {
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// sms:number?body=message
const qrValue = `sms:${phone}?body=${encodeURIComponent(message)}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `sms-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 = `sms-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<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 Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* SMS Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MessageSquare className="w-5 h-5 text-orange-600" />
SMS Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
<Input
placeholder="+1 555 123 4567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-orange-600 focus:ring-orange-600"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Pre-filled Message</label>
<textarea
className="w-full h-32 p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-600 resize-none text-slate-800 placeholder:text-slate-400"
placeholder="I'm interested in..."
value={message}
onChange={(e) => setMessage(e.target.value)}
maxLength={160}
/>
<p className="text-xs text-slate-600 mt-2 text-right">{message.length}/160</p>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-orange-600" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-orange-600 text-white border-orange-600"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={phone ? qrValue : "sms:+123456789?body=Hello"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone || 'Number'}</span>
</h3>
<div className="flex items-center justify-center gap-2 mt-2 text-slate-600 text-xs">
<MessageSquare className="w-3 h-3" />
<span className="italic truncate">{message || 'Your message...'}</span>
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-orange-600 hover:bg-orange-700 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Opens the messaging app with text pre-filled.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-orange-600 to-orange-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Use SMS for marketing?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes offer better tracking and allow you to change the campaign message later.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-orange-700 hover:bg-slate-100 shrink-0 shadow-lg">
Try Dynamic Codes
</Button>
</Link>
</div>
</div>
);
}
'use client';
import React, { useState, useRef } from 'react';
import Link from 'next/link';
import { QRCodeSVG } from 'qrcode.react';
import {
MessageSquare,
Download,
Check,
Sparkles,
Phone
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { cn } from '@/lib/utils';
// Brand Colors
const BRAND = {
paleGrey: '#EBEBDF',
primary: '#ea580c', // Orange-600
primaryDark: '#c2410c', // Orange-700
};
// QR Color Options
const QR_COLORS = [
{ name: 'Classic Black', value: '#000000' },
{ name: 'Deep Blue', value: '#1E40AF' },
{ name: 'Violet', value: '#7C3AED' },
{ name: 'Teal', value: '#0D9488' },
{ name: 'Coral', value: '#F43F5E' },
{ name: 'Amber', value: '#D97706' },
{ name: 'Emerald', value: '#10B981' },
{ name: 'Rose', value: '#F43F5E' },
];
// Frame Options
const FRAME_OPTIONS = [
{ id: 'none', label: 'No Frame' },
{ id: 'scanme', label: 'Scan Me' },
{ id: 'sms', label: 'SMS Us' },
{ id: 'text', label: 'Text Us' },
];
export default function SMSGenerator() {
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const [qrColor, setQrColor] = useState(BRAND.primary);
const [frameType, setFrameType] = useState('none');
const qrRef = useRef<HTMLDivElement>(null);
// sms:number?body=message
const qrValue = `sms:${phone}?body=${encodeURIComponent(message)}`;
const handleDownload = async (format: 'png' | 'svg') => {
if (!qrRef.current) return;
try {
if (format === 'png') {
const { toPng } = await import('html-to-image');
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
const link = document.createElement('a');
link.download = `sms-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 = `sms-qr-code.svg`;
link.click();
}
}
} catch (err) {
console.error('Download failed', err);
}
};
const getFrameLabel = () => {
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
return frame?.id !== 'none' ? frame?.label : null;
};
return (
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
{/* Main Generator Card */}
<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 Section */}
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* SMS Details */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<MessageSquare className="w-5 h-5 text-orange-600" />
SMS Details
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
<Input
placeholder="+1 555 123 4567"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 text-base rounded-xl border-slate-200 focus:border-orange-600 focus:ring-orange-600"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">Pre-filled Message</label>
<textarea
className="w-full h-32 p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-600 resize-none text-slate-800 placeholder:text-slate-400"
placeholder="I'm interested in..."
value={message}
onChange={(e) => setMessage(e.target.value)}
maxLength={160}
/>
<p className="text-xs text-slate-600 mt-2 text-right">{message.length}/160</p>
</div>
</div>
</div>
<div className="border-t border-slate-100"></div>
{/* Design Options */}
<div className="space-y-6">
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
<Sparkles className="w-5 h-5 text-orange-600" />
Design Options
</h2>
{/* Color Picker */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
<div className="flex flex-wrap gap-2">
{QR_COLORS.map((c) => (
<button
key={c.name}
onClick={() => setQrColor(c.value)}
className={cn(
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
)}
style={{ backgroundColor: c.value }}
aria-label={`Select ${c.name}`}
title={c.name}
>
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
</button>
))}
</div>
</div>
{/* Frame Selector */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => (
<button
key={frame.id}
onClick={() => setFrameType(frame.id)}
className={cn(
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
frameType === frame.id
? "bg-orange-600 text-white border-orange-600"
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
)}
>
{frame.label}
</button>
))}
</div>
</div>
</div>
</div>
{/* RIGHT: Preview Section */}
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (
<div
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
style={{ backgroundColor: qrColor }}
>
{getFrameLabel()}
</div>
)}
{/* QR Code */}
<div className="bg-white">
<QRCodeSVG
value={phone ? qrValue : "sms:+123456789?body=Hello"}
size={240}
level="M"
includeMargin={false}
fgColor={qrColor}
/>
</div>
{/* Info Preview */}
<div className="mt-6 text-center max-w-[260px]">
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
<span className="truncate">{phone || 'Number'}</span>
</h3>
<div className="flex items-center justify-center gap-2 mt-2 text-slate-600 text-xs">
<MessageSquare className="w-3 h-3" />
<span className="italic truncate">{message || 'Your message...'}</span>
</div>
</div>
</div>
{/* Download Buttons */}
<div className="flex items-center gap-3 mt-8">
<Button
onClick={() => handleDownload('png')}
className="bg-orange-600 hover:bg-orange-700 text-white shadow-lg"
>
<Download className="w-4 h-4 mr-2" />
Download PNG
</Button>
<Button
onClick={() => handleDownload('svg')}
variant="outline"
className="border-slate-300 hover:bg-white"
>
<Download className="w-4 h-4 mr-2" />
SVG
</Button>
</div>
<p className="text-xs text-slate-600 mt-4 text-center">
Opens the messaging app with text pre-filled.
</p>
</div>
</div>
</div>
{/* Upsell Banner */}
<div className="mt-8 bg-gradient-to-r from-orange-600 to-orange-700 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="text-white text-center sm:text-left">
<h3 className="font-bold text-lg">Use SMS for marketing?</h3>
<p className="text-white/80 text-sm mt-1">
Dynamic QR Codes offer better tracking and allow you to change the campaign message later.
</p>
</div>
<Link href="/signup">
<Button className="bg-white text-orange-700 hover:bg-slate-100 shrink-0 shadow-lg">
Try Dynamic Codes
</Button>
</Link>
</div>
</div>
);
}

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

@@ -1,291 +1,291 @@
import React from 'react';
import type { Metadata } from 'next';
import SMSGenerator from './SMSGenerator';
import { MessageSquare, Shield, Zap, Smartphone, Send } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free SMS QR Code Generator | SMS QR Code Erstellen | QR Master',
},
description: 'Create a QR code to send an SMS text message instantly. SMS QR Code erstellen mit vorgefertigtem Text. Free, private, and works on all phones.',
keywords: ['sms qr code', 'text message qr code', 'send sms qr', 'sms generator', 'text qr', 'sms qr code erstellen', 'qr code für sms', 'nachricht qr code', 'sms vorlage qr code', 'sms versenden qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/sms-qr-code',
},
openGraph: {
title: 'Free SMS QR Code Generator | QR Master',
description: 'Generate QR codes for instant SMS messages. Pre-fill text and number.',
type: 'website',
url: 'https://www.qrmaster.net/tools/sms-qr-code',
images: [{ url: '/og-sms-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free SMS QR Code Generator',
description: 'Create QR codes to send texts. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'SMS QR Code Generator',
'Generate QR codes that open the user\'s SMS app with a pre-filled message.',
'/og-sms-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an SMS QR Code',
description: 'Create a QR code that prepares a text message.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Phone Number',
text: 'Type the destination phone number.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Message',
text: 'Type the message you want pre-filled (e.g., "Send me info!").',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and share it.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does the text send automatically?': {
question: 'Does the text send automatically?',
answer: 'No. The QR code opens the messaging app with the text typed out. The user must simply tap "Send". This is a security feature of all smartphones.',
},
'Is there a cost?': {
question: 'Is there a cost?',
answer: 'Generating the code is free. Standard SMS rates apply for the person sending the text message, depending on their carrier plan.',
},
'Can I change the message later?': {
question: 'Can I change the message later?',
answer: 'No. Static QR codes have the message embedded in them. To change the message, you need a new QR code.',
},
'What uses are there for SMS QR codes?': {
question: 'What uses are there for SMS QR codes?',
answer: 'They are great for SMS marketing opt-ins ("Text JOIN to 12345"), customer support requests, or voting via text.',
},
}),
],
};
export default function SMSQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="SMS QR Code Generator" toolSlug="sms-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#ea580c' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<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 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-amber-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">
Make Texting Easy with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-100">SMS QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-orange-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let users send you a pre-written text with one scan. Ideal for opt-ins and support.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Universal compatibility.</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 backdrop-blur-sm">
<MessageSquare className="w-4 h-4 text-amber-300" />
Pre-fill Texts
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Open
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-amber-300" />
Zero Friction
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/30 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-full bg-white rounded-xl shadow-lg p-3 mb-6 relative overflow-hidden flex gap-3 items-center">
<div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
<MessageSquare className="w-5 h-5 text-orange-600" />
</div>
<div className="bg-slate-100 rounded-2xl rounded-tl-none p-3 text-xs text-slate-600 w-full">
Hi, I want to join the club!
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-orange-100 p-2 rounded-full">
<Send className="w-5 h-5 text-orange-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">SMS</div>
<div className="text-sm font-bold text-slate-900">Sent!</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<SMSGenerator />
</section>
{/* HOW IT WORKS */}
<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-12">
How SMS QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<MessageSquare className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Compose</h3>
<p className="text-slate-600 text-sm">
Enter the number and the message you want your customers to send.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
User scans the code. The messages app opens automatically.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Send className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Send</h3>
<p className="text-slate-600 text-sm">
User hits "Send" to trigger the text. Perfect for quick sign-ups or votes.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<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 SMS QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does the user need an internet connection?"
answer="No. The QR code contains all the info offline. However, the user needs a cellular signal to actually send the SMS message."
/>
<FaqItem
question="Is it free for the user to send?"
answer="It depends on their mobile plan. Standard SMS rates apply, though most modern plans include unlimited texting."
/>
<FaqItem
question="Can I use shortcodes?"
answer="Yes. You can enter a shortcode (e.g. 55555) in the phone number field instead of a regular number."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes. Since the user is sending a text to you, they will see your number (or shortcode) in their messaging app."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details 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">
{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">
{answer}
</div>
</details>
);
}
import React from 'react';
import type { Metadata } from 'next';
import SMSGenerator from './SMSGenerator';
import { MessageSquare, Shield, Zap, Smartphone, Send } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free SMS QR Code Generator | SMS QR Code Erstellen | QR Master',
},
description: 'Create a QR code to send an SMS text message instantly. SMS QR Code erstellen mit vorgefertigtem Text. Free, private, and works on all phones.',
keywords: ['sms qr code', 'text message qr code', 'send sms qr', 'sms generator', 'text qr', 'sms qr code erstellen', 'qr code für sms', 'nachricht qr code', 'sms vorlage qr code', 'sms versenden qr'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/sms-qr-code',
},
openGraph: {
title: 'Free SMS QR Code Generator | QR Master',
description: 'Generate QR codes for instant SMS messages. Pre-fill text and number.',
type: 'website',
url: 'https://www.qrmaster.net/tools/sms-qr-code',
images: [{ url: '/og-sms-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free SMS QR Code Generator',
description: 'Create QR codes to send texts. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'SMS QR Code Generator',
'Generate QR codes that open the user\'s SMS app with a pre-filled message.',
'/og-sms-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create an SMS QR Code',
description: 'Create a QR code that prepares a text message.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Phone Number',
text: 'Type the destination phone number.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Message',
text: 'Type the message you want pre-filled (e.g., "Send me info!").',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and share it.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Does the text send automatically?': {
question: 'Does the text send automatically?',
answer: 'No. The QR code opens the messaging app with the text typed out. The user must simply tap "Send". This is a security feature of all smartphones.',
},
'Is there a cost?': {
question: 'Is there a cost?',
answer: 'Generating the code is free. Standard SMS rates apply for the person sending the text message, depending on their carrier plan.',
},
'Can I change the message later?': {
question: 'Can I change the message later?',
answer: 'No. Static QR codes have the message embedded in them. To change the message, you need a new QR code.',
},
'What uses are there for SMS QR codes?': {
question: 'What uses are there for SMS QR codes?',
answer: 'They are great for SMS marketing opt-ins ("Text JOIN to 12345"), customer support requests, or voting via text.',
},
}),
],
};
export default function SMSQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="SMS QR Code Generator" toolSlug="sms-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#ea580c' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<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 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-amber-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">
Make Texting Easy with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-100">SMS QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-orange-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let users send you a pre-written text with one scan. Ideal for opt-ins and support.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Universal compatibility.</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 backdrop-blur-sm">
<MessageSquare className="w-4 h-4 text-amber-300" />
Pre-fill Texts
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-300" />
Instant Open
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-amber-300" />
Zero Friction
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/30 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-full bg-white rounded-xl shadow-lg p-3 mb-6 relative overflow-hidden flex gap-3 items-center">
<div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
<MessageSquare className="w-5 h-5 text-orange-600" />
</div>
<div className="bg-slate-100 rounded-2xl rounded-tl-none p-3 text-xs text-slate-600 w-full">
Hi, I want to join the club!
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-orange-100 p-2 rounded-full">
<Send className="w-5 h-5 text-orange-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">SMS</div>
<div className="text-sm font-bold text-slate-900">Sent!</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<SMSGenerator />
</section>
{/* HOW IT WORKS */}
<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-12">
How SMS QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<MessageSquare className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Compose</h3>
<p className="text-slate-600 text-sm">
Enter the number and the message you want your customers to send.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
User scans the code. The messages app opens automatically.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Send className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Send</h3>
<p className="text-slate-600 text-sm">
User hits "Send" to trigger the text. Perfect for quick sign-ups or votes.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<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 SMS QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does the user need an internet connection?"
answer="No. The QR code contains all the info offline. However, the user needs a cellular signal to actually send the SMS message."
/>
<FaqItem
question="Is it free for the user to send?"
answer="It depends on their mobile plan. Standard SMS rates apply, though most modern plans include unlimited texting."
/>
<FaqItem
question="Can I use shortcodes?"
answer="Yes. You can enter a shortcode (e.g. 55555) in the phone number field instead of a regular number."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes. Since the user is sending a text to you, they will see your number (or shortcode) in their messaging app."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details 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">
{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">
{answer}
</div>
</details>
);
}