QR Code Generator Widget Overview

The QR Code Generator Widget creates permanent, trackable QR codes that connect physical media to digital destinations. It features UTM parameter integration for campaign tracking, flexible display options (direct or modal), and generates QR codes that never expire, making it ideal for print materials, signage, and long-term marketing campaigns.

HTML Structure

The generated HTML structure includes:

• A unique wrapper ID like qr-widget-abc123 for complete encapsulation
• Font Awesome CDN link: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
• Scoped CSS with all selectors prefixed by the wrapper ID
• Direct QR display with <img> or button trigger with data-qr-trigger
• Modal container with data-qr-modal for popup display
• Self-executing JavaScript function for interaction handling

QR Code API Integration

QR codes are generated using a reliable public API:

• Base endpoint: https://api.qrserver.com/v1/create-qr-code/
• Size parameter: ?size={width}x{height} supporting 200-500px
• Data parameter: &data={encodedURL} with full URL encoding
• Error correction: &ecc={L|M|Q|H} for damage tolerance
• Margin parameter: &margin={modules} for quiet zone control
• No API key required - completely free and unlimited usage

UTM Parameter Builder

The tool includes comprehensive UTM tracking capabilities:

• Campaign Source: utm_source identifies traffic origin
• Campaign Medium: utm_medium specifies marketing channel
• Campaign Name: utm_campaign tracks specific promotions
• Campaign Term: utm_term for paid search keywords
• Campaign Content: utm_content differentiates similar content
• URL building with URLSearchParams API for proper encoding
• Parameter concatenation: url.includes('?') ? '&' : '?'

Display Mode: Direct

Direct display mode embeds the QR code inline:

• Container with customizable padding: padding: {n}px
• Background color support including transparent value
• Border radius: border-radius: 8px for rounded corners
• Box shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
• Image element with display: block to prevent gaps
• Responsive sizing: max-width: 100%; height: auto

Display Mode: Modal

Modal display provides an elegant button-triggered popup:

• Button styling with display: inline-flex for icon alignment
• Font Awesome icon: <i class="fas fa-qrcode"></i>
• Transform animation: translateY(-2px) on hover
• Modal overlay: position: fixed; inset: 0
• Z-index stacking: z-index: 100000 for top layer
• Backdrop blur: background: rgba(0, 0, 0, 0.5)

Modal Animation System

Smooth modal transitions enhance user experience:

• Initial state: opacity: 0; visibility: hidden
• Active state: opacity: 1; visibility: visible
• Content scaling: transform: scale(0.9) to scale(1)
• Transition timing: transition: all 0.3s ease
• Pointer events toggle: pointer-events: none/auto
• Close button rotation: transform: rotate(90deg) on hover

Error Correction Levels

Four error correction levels provide damage tolerance:

• Level L (Low): ecc=L - 7% damage tolerance
• Level M (Medium): ecc=M - 15% damage tolerance (default)
• Level Q (Quartile): ecc=Q - 25% damage tolerance
• Level H (High): ecc=H - 30% damage tolerance
• Higher levels increase data density but improve scanning reliability
• Recommended for printed materials that may get damaged

Color Customization

Flexible color options for brand consistency:

• QR background: background: {color} with hex support
• Button colors: background-color and color properties
• Border radius: border-radius: {n}px for both button and modal
• Color picker sync between visual preview and text input
• Transparent background support for overlay designs
• Real-time preview updates with color changes

Event Management

Comprehensive event handling for user interactions:

• Button click: addEventListener('click', handler)
• Event prevention: e.preventDefault() on button clicks
• Modal state toggle via classList.add/remove('active')
• Backdrop click detection with event delegation
• Escape key handler: e.key === 'Escape'
• Multiple close triggers: backdrop, button, and keyboard

Responsive Design

The widget adapts seamlessly across screen sizes:

• Modal width constraint: max-width: 500px; width: 90%
• Tablet breakpoint at @media (max-width: 768px)
• Touch-friendly button sizes with adequate padding
• QR code maintains aspect ratio with max-width: 100%
• Modal padding adjusts for mobile viewports
• Font sizes scale appropriately for readability

URL Construction

Dynamic URL building with proper encoding:

• Base URL validation and default fallback
• UTM parameter concatenation using URLSearchParams
• Query string detection: url.includes('?')
• Parameter encoding: encodeURIComponent()
• Final URL display for verification before generation
• Support for existing query parameters in base URL

Performance Optimization

Efficient implementation for fast page loads:

• Single API request per QR code generation
• No JavaScript framework dependencies
• Font Awesome loaded from CDN with caching
• CSS animations use GPU-accelerated properties
• Event listeners properly scoped to widget instance
• Minimal DOM manipulation after initialization

Browser Compatibility

Wide browser support ensures universal functionality:

• Modern syntax with const and let declarations
• Arrow functions: () => {} for concise handlers
• Template literals for string interpolation
• Compatible with Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
• Fallback for older browsers using var and function expressions
• No polyfills required for core functionality

Security Considerations

Built with security best practices:

• No data storage - all processing client-side
• HTTPS-only API endpoint for secure generation
• No cookies or tracking scripts included
• XSS prevention with proper encoding
• CSP-friendly implementation
• No user data transmitted to third parties

QR Code Permanence

Understanding QR code longevity:

• QR codes are static images - they never expire
• The encoded URL must remain active for functionality
• API generates codes on-demand without storage
• No account or API key required for generation
• Cached by browsers for performance
• Can be saved and used offline once generated

Implementation Benefits

Key advantages of this QR code solution:

• Zero cost - completely free API with no limits
• No registration or authentication required
• Works immediately after embedding the code
• Self-contained with no external dependencies
• GDPR compliant - no personal data processing
• Lightweight footprint under 8KB total size
• SEO-friendly with proper semantic markup
• Accessible with keyboard navigation support
• Print-ready with high resolution output
• Compatible with all QR code scanners