🔗URL & UTM
Generate QR Codes for URLs
Create QR codes from URLs for print marketing and offline campaigns
Explanation
QR codes bridge offline and online marketing by encoding URLs for easy mobile scanning.
Examples
Simple URL QR
Input
https://example.com/campaign
Output
[QR Code Image]
With UTM tracking
Input
https://example.com?utm_source=qr_code&utm_medium=print&utm_campaign=poster_campaign
Output
[QR Code with tracking]
Code Examples
JavaScript/React
// Using qrcode library (npm install qrcode)
import QRCode from 'qrcode';
// Generate QR code as Data URL
async function generateQRCode(url, options = {}) {
try {
const qrDataURL = await QRCode.toDataURL(url, {
width: options.width || 300,
margin: options.margin || 4,
color: {
dark: options.darkColor || '#000000',
light: options.lightColor || '#FFFFFF'
},
errorCorrectionLevel: options.errorLevel || 'M' // L, M, Q, H
});
return qrDataURL;
} catch (err) {
console.error('QR generation failed:', err);
throw err;
}
}
// Generate QR for campaign URL
async function generateCampaignQR(baseUrl, campaign) {
// Add UTM parameters
const url = new URL(baseUrl);
url.searchParams.set('utm_source', 'qr_code');
url.searchParams.set('utm_medium', 'print');
url.searchParams.set('utm_campaign', campaign);
// Generate QR code
const qrCode = await generateQRCode(url.toString());
return qrCode;
}
// Usage in browser
async function displayQR() {
const qrDataURL = await generateQRCode('https://example.com');
// Display in img element
const img = document.createElement('img');
img.src = qrDataURL;
document.body.appendChild(img);
}
// Generate and download
async function downloadQR(url, filename = 'qrcode.png') {
const qrDataURL = await generateQRCode(url);
const link = document.createElement('a');
link.href = qrDataURL;
link.download = filename;
link.click();
}
// React component
function QRCodeComponent({ url }) {
const [qrCode, setQRCode] = React.useState('');
React.useEffect(() => {
generateQRCode(url).then(setQRCode);
}, [url]);
return <img src={qrCode} alt="QR Code" />;
} Python
# Using qrcode library (pip install qrcode[pil])
import qrcode
from io import BytesIO
def generate_qr_code(url, size=10, border=4):
# Create QR code instance
qr = qrcode.QRCode(
version=1,
error_correction=qrcode.constants.ERROR_CORRECT_M,
box_size=size,
border=border,
)
# Add data
qr.add_data(url)
qr.make(fit=True)
# Create image
img = qr.make_image(fill_color="black", back_color="white")
return img
# Save to file
def save_qr_code(url, filename='qrcode.png'):
img = generate_qr_code(url)
img.save(filename)
# Generate for campaign
def generate_campaign_qr(base_url, campaign):
url = f"{base_url}?utm_source=qr_code&utm_medium=print&utm_campaign={campaign}"
return generate_qr_code(url)
# Usage
save_qr_code('https://example.com', 'my_qr.png')Try it Now
💡 Tips
- Always add UTM parameters to track QR code campaigns
- Use url shortener for long URLs (better QR density)
- Test QR codes before printing
- Use error correction level M or H for print
- Add margins/quiet zone around QR code
- Higher error correction = more damage tolerance
- Include call-to-action near QR code
- Make QR codes large enough (min 2x2cm)
⚠️ Common Pitfalls
- Very long URLs create complex QR codes
- Low print quality makes QR codes unscannable
- Insufficient margin around QR code
- Using light colors reduces scannability
- Not testing with various phone cameras
- QR codes can expire if using dynamic URLs