QR Codes - Dub

Overview

Dub automatically generates QR codes for every short link you create. Customize them with your brand colors, logos, and export in multiple formats. Track scans separately from regular link clicks with detailed analytics.

Accessing QR Codes

From the Dashboard

Open Link Editor

Click on any link in your links list to open the editor.

Click QR Code Icon

Click the QR code icon in the link editor toolbar.

Customize & Download

Customize the design and download in your preferred format.

Press Q to quickly open the QR code modal when viewing a link.

Via API

Generate QR codes programmatically:

// Get QR code for a link
const qrCode = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github'
);

// With custom styling
const customQR = await fetch(
  'https://api.dub.co/qr?' +
  'url=https://dub.sh/github&' +
  'size=1000&' +
  'fgColor=%23000000&' +
  'logo=https://dub.co/logo.png'
);

Customization Options

QR Code Color

Customize the foreground color of your QR code:

Dashboard
API

Open the QR code modal
Click on the color picker or preset colors
Enter a custom hex color code
Preview updates in real-time

// Use hex color codes
const qr = await fetch(
  'https://api.dub.co/qr?' +
  'url=https://dub.sh/github&' +
  'fgColor=%23FF0000' // Red
);

Default preset colors:

#000000 - Black (default)
#C73E33 - Red
#DF6547 - Orange
#F4B3D7 - Pink
#F6CF54 - Yellow
#49A065 - Green
#2146B7 - Blue
#AE49BF - Purple

Background Color

Set a custom background color:

// API Example: Custom background
const qr = await fetch(
  'https://api.dub.co/qr?' +
  'url=https://dub.sh/github&' +
  'fgColor=%23000000&' +
  'bgColor=%23FFFFFF' // White background (default)
);

Logo Customization

Add your brand logo to the center of the QR code:

Dashboard
API

Open the QR code modal
Toggle the “Logo” switch
The logo from your domain or workspace settings is used
On Free plans, the Dub logo is shown

// Use custom logo (Pro plan and above)
const qr = await fetch(
  'https://api.dub.co/qr?' +
  'url=https://dub.sh/github&' +
  'logo=https://yourcompany.com/logo.png'
);

// Hide logo completely
const noLogo = await fetch(
  'https://api.dub.co/qr?' +
  'url=https://dub.sh/github&' +
  'hideLogo=true'
);

Custom logos and logo hiding are available on Pro plans and above. Free plans always show the Dub logo.

Size Configuration

Generate QR codes in different sizes:

// Small QR code (300px)
const small = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github&size=300'
);

// Default size (600px)
const standard = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github&size=600'
);

// Large QR code (2000px) - for print
const large = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github&size=2000'
);

For print materials, use sizes of 1000px or larger for optimal quality.

Error Correction Level

Set the QR code error correction level:

const qr = await fetch(
  'https://api.dub.co/qr?' +
  'url=https://dub.sh/github&' +
  'level=H' // High error correction
);

Available levels:

L - Low (~7% correction) - Default, best for clean environments
M - Medium (~15% correction)
Q - Quartile (~25% correction)
H - High (~30% correction) - Best when logo is displayed or printing quality varies

Margin Control

Adjust the margin around the QR code:

// No margin
const noMargin = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github&margin=0'
);

// Default margin (4)
const standard = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github&margin=4'
);

// Large margin
const large = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github&margin=8'
);

Export Formats

SVG Export

Export as scalable vector graphics:

Dashboard
API

Open QR code modal
Click the download icon
Select “Download SVG”
File downloads as {key}-qrcode.svg

// SVG format is returned by default
const svgQR = await fetch(
  'https://api.dub.co/qr?url=https://dub.sh/github'
);

const svgContent = await svgQR.text();

SVG is ideal for print materials as it scales infinitely without quality loss.

PNG Export

Export as PNG for web and digital use:

Dashboard
API

Open QR code modal
Click download icon
Select “Download PNG”

// PNG format (requires rendering)
const canvas = await getQRAsCanvas(qrData, 'image/png');

JPEG Export

Export as JPEG:

Dashboard
API

Click download icon → “Download JPEG”

const canvas = await getQRAsCanvas(qrData, 'image/jpeg');

Copy to Clipboard

Quickly copy QR codes:

Copy Image

Open QR code modal
Click the copy icon
Select “Copy Image”
Paste directly into documents, emails, or design tools

Copy URL

Get a direct URL to the QR code:

Open QR code modal
Click copy icon
Select “Copy URL”
URL format: https://api.dub.co/qr?url={shortLink}

// Example copied URL
https://api.dub.co/qr?url=https://dub.sh/github&fgColor=%23000000

QR Code Analytics

Tracking Scans

QR code scans are automatically tracked separately:

// Get analytics for QR scans only
const qrScans = await fetch(
  '/api/analytics?' +
  'linkId=link_123&' +
  'trigger=qr&' +
  'interval=30d'
);

// Compare QR vs regular link clicks
const allClicks = await fetch(
  '/api/analytics?' +
  'linkId=link_123&' +
  'groupBy=triggers&' +
  'interval=30d'
);

The trigger field distinguishes QR code scans (qr) from regular link clicks (link).

Scan Locations

Track where QR codes are being scanned:

// QR scans by country
const scansByCountry = await fetch(
  '/api/analytics?' +
  'linkId=link_123&' +
  'trigger=qr&' +
  'groupBy=countries'
);

// QR scans by city
const scansByCity = await fetch(
  '/api/analytics?' +
  'linkId=link_123&' +
  'trigger=qr&' +
  'groupBy=cities'
);

Use Cases

Print Materials

Add QR codes to business cards, flyers, posters, and product packaging

Event Check-ins

Use QR codes for event registration and attendee tracking

Product Labels

Link to product information, manuals, or support resources

Restaurant Menus

Create contactless digital menus with trackable QR codes

Retail Displays

Drive online traffic from in-store displays and signage

Marketing Campaigns

Track offline marketing effectiveness with QR scan analytics

Advanced Features

Dynamic QR Codes

All Dub QR codes are dynamic - update the destination URL without changing the QR code:

Print QR Code

Generate and print your QR code.

Update Link

Later, update the short link’s destination URL in Dub.

QR Stays Same

The printed QR code continues to work, now pointing to the new URL.

This is a huge advantage over static QR codes - fix mistakes or update campaigns without reprinting.

Batch QR Code Generation

Generate QR codes for multiple links:

// Example: Generate QR codes for all links in a campaign
const links = await fetch('/api/links?tagId=tag_campaign');
const linkData = await links.json();

for (const link of linkData) {
  const qr = await fetch(
    `https://api.dub.co/qr?url=${link.shortLink}&size=1000`
  );
  
  // Save QR code
  const buffer = await qr.arrayBuffer();
  await saveQRCode(link.key, buffer);
}

Design Consistency

QR codes automatically use:

Domain Logo: If your domain has a logo configured
Workspace Logo: Falls back to workspace logo
Dub Logo: Default for free plans

This ensures brand consistency across all your QR codes.

Best Practices

Use High Contrast

Dark QR codes on light backgrounds scan best - avoid light colors

Test Before Printing

Always test QR codes with multiple devices before mass printing

Size Appropriately

Minimum 2cm × 2cm for printed codes, larger for distant scanning

Include Instructions

Add “Scan to visit” or similar text near QR codes for clarity

Use Error Correction

Use level H for printed materials with logos or potential damage

Monitor Performance

Track scan analytics to optimize placement and design

Troubleshooting

QR Code Won’t Scan

Check Contrast

Ensure sufficient contrast between foreground and background.

Verify Size

Make sure the QR code is large enough for the scanning distance.

Test Error Correction

If using a logo, increase error correction level to H.

Check URL

Verify the short link is active and not expired.

API Reference

For detailed API documentation:

QR Code API

Get Started

Core Features

Guides

Self-Hosting

Integrations

​Overview

​Accessing QR Codes

​From the Dashboard

​Via API

​Customization Options

​QR Code Color

​Background Color

​Logo Customization

​Size Configuration

​Error Correction Level

​Margin Control

​Export Formats

​SVG Export

​PNG Export

​JPEG Export

​Copy to Clipboard

​Copy Image

​Copy URL

​QR Code Analytics

​Tracking Scans

​Scan Locations

​Use Cases

Print Materials

Event Check-ins

Product Labels

Restaurant Menus

Retail Displays

Marketing Campaigns

​Advanced Features

​Dynamic QR Codes

​Batch QR Code Generation

​Design Consistency

​Best Practices

Use High Contrast

Test Before Printing

Size Appropriately

Include Instructions

Use Error Correction

Monitor Performance

​Troubleshooting

​QR Code Won’t Scan

​API Reference

Build docs developers (and LLMs) love

Overview

Accessing QR Codes

From the Dashboard

Via API

Customization Options

QR Code Color

Background Color

Logo Customization

Size Configuration

Error Correction Level

Margin Control

Export Formats

SVG Export

PNG Export

JPEG Export

Copy to Clipboard

Copy Image

Copy URL

QR Code Analytics

Tracking Scans

Scan Locations

Use Cases

Advanced Features

Dynamic QR Codes

Batch QR Code Generation

Design Consistency

Best Practices

Troubleshooting

QR Code Won’t Scan

API Reference