🔗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