QR Code Components

Generate scannable QR codes for products, collections, and checkout links

Overview

The QR Code components allow you to generate high-quality, scalable QR codes in SVG format. Perfect for print materials (billboards, posters, merch tables) and digital campaigns (social media, ads). All QR codes include UTM tracking parameters for analytics.

SVG Format

Vector graphics ensure perfect quality at any size, from tiny business cards to massive billboards.

UTM Tracking

Automatically adds utm_source=qr-code and utm_medium=offline for campaign tracking.

Easy Download

One-click download as SVG file with descriptive filename for easy organization.

Examples

Product Page QR Code

Generate a QR code for a product detail page. Perfect for merch tables or venue displays.

Urban Explorer Hoodie

€49.99 • Black/Grey/Navy

Collection/Store QR Code

Direct customers to your full collection or artist store. Great for promotional materials.

Winter Collection 2024

15 Products • Limited Edition

Checkout Link with Discount

Pre-filled checkout link with discount code. Perfect for exclusive promotions or event attendees.

Festival Special - 20% Off

Code: FESTIVAL20 • Valid until Jan 31

Button Variants

Different button styles for various UI contexts.

With Text

Icon Only

Default

Button Sizes

Small, default, and large button sizes to match your UI.

Small

Default

Large

UTM Tracking Parameters

All QR codes automatically include UTM parameters for campaign tracking.

Tracked Product Link

https://fanbace.com/product/123?utm_source=qr-code&utm_medium=offline

Tracking Benefits: Measure campaign effectiveness, track offline-to-online conversion, and attribute sales to specific marketing materials.

Usage

import { QRButton } from '@/components/fanbace/qr-button';

// Basic usage
<QRButton
  url="https://fanbace.com/product/123"
  productName="Cool T-Shirt"
  variant="with-text"
/>

// Icon only variant
<QRButton
  url="https://fanbace.com/stores/artist"
  productName="Artist Store"
  variant="icon-only"
/>

// With custom size
<QRButton
  url="https://fanbace.com/checkout?discount=SAVE20"
  productName="Special Offer"
  variant="with-text"
  size="lg"
  onOpen={() => console.log('QR modal opened')}
/>

Props

PropTypeDefaultDescription
urlstringrequiredThe URL to encode in the QR code
productNamestringrequiredProduct or page name for display
productImagestringundefinedOptional product image URL
variant'default' | 'icon-only' | 'with-text''with-text'Button appearance style
size'sm' | 'default' | 'lg''default'Button size
classNamestringundefinedAdditional CSS classes
onOpen() => voidundefinedCallback when modal opens

Use Cases

🎪 Events & Venues

  • • Display at merch tables during concerts
  • • Print on event posters and flyers
  • • Add to venue digital signage
  • • Include in festival programs

📱 Digital Marketing

  • • Social media story graphics
  • • Email newsletter campaigns
  • • Digital advertising banners
  • • YouTube video overlays

🖨️ Print Materials

  • • Business cards and postcards
  • • Billboard and bus stop ads
  • • Product packaging inserts
  • • Magazine advertisements

💰 Promotions

  • • Exclusive discount code access
  • • Limited-time offer campaigns
  • • VIP pre-sale links
  • • Contest entry pages