Embedding QR Codes on Your Website

Available on: Pro and Max plans

Overview

The embed feature provides a hosted image URL for your QR code that you can add to any webpage. When you update the QR code’s design in SnapGlyph, the embedded version updates automatically—no need to re-upload images.

Enabling Embedding

1. Go to QR Codes in the sidebar
2. Click on the QR code you want to embed
3. Find the Embed section on the detail page
4. Toggle Enable embedding on
5. Copy the provided embed code or URL

Embed Options

SnapGlyph provides two ways to embed your QR code:

Image URL

A direct link to your QR code image:

https://embed.snapglyph.com/qr/abc123xyz.png

Use this when you need just the URL, such as:

• Email templates
• Markdown documents
• CMS image fields
• Any system that accepts image URLs

HTML Snippet

Ready-to-paste code for your website:

<img
  src="https://embed.snapglyph.com/qr/abc123xyz.png"
  alt="Scan QR Code"
  width="200"
  height="200"
/>

This includes proper sizing and accessibility attributes.

Customizing the Embed

Size Options

You can request different sizes by adding parameters to the URL:

Size	Dimensions	Use Case
Small	150x150px	Email signatures, small widgets
Medium	200x200px	Standard web use
Large	300x300px	Hero sections, prominent placement
Custom	Up to 1000px	Specify exact dimensions

Example with size parameter:

https://embed.snapglyph.com/qr/abc123xyz.png?size=300

Format Options

Request PNG or SVG format:

• PNG (default): Best for most web use
• SVG: Vector format for scaling

https://embed.snapglyph.com/qr/abc123xyz.svg

What Gets Embedded

The embedded image shows your current QR code design including:

• Colors and gradients
• Pattern and corner styles
• Logo (if added)
• Frame and text (if configured)

When you update any of these in SnapGlyph, the embed updates automatically. Websites that have cached the image may take a few minutes to show changes.

Important Notes

Tracking Behavior

• Embedded QR codes display your design but don’t track “views” of the embed
• Tracking happens when someone scans the QR code and gets redirected
• The embed URL is separate from your tracking/redirect URL

Caching

• Embed images are cached for performance
• After updating your QR code design, allow a few minutes for caches to refresh
• Add a cache-busting parameter if you need immediate updates:

  https://embed.snapglyph.com/qr/abc123xyz.png?v=2

Disabling Embedding

If you disable embedding for a QR code:

• The embed URL immediately stops working
• Any websites using the embed will show a broken image
• Re-enabling generates a new URL with a new token, so you’ll need to update any existing embeds with the new code

Use Cases

Email Signatures

Add your QR code to email signatures so recipients can quickly scan to visit your website or save your contact info.

<table>
  <tr>
    <td>
      <img src="https://embed.snapglyph.com/qr/abc123.png" width="80" height="80" alt="Scan to visit">
    </td>
    <td>
      <strong>John Smith</strong><br>
      Marketing Manager<br>
      john@company.com
    </td>
  </tr>
</table>

Digital Business Cards

Embed QR codes on digital business card pages or vCard landing pages.

Website Footers

Add a persistent QR code to your website footer for easy mobile access.

Event Pages

Display event-specific QR codes that link to registration, schedules, or venue information.

Documentation

Include QR codes in online documentation linking to demos, examples, or additional resources.

Landing Pages

Add QR codes to landing pages for visitors who want to continue on mobile.

Responsive Embedding

For responsive websites, use CSS to control the QR code size:

<img
  src="https://embed.snapglyph.com/qr/abc123.png?size=400"
  alt="Scan QR Code"
  style="max-width: 200px; width: 100%; height: auto;"
/>

This ensures the QR code scales appropriately on different screen sizes while maintaining quality.

Troubleshooting

Embed not showing

• Verify embedding is enabled for the QR code
• Check that the URL is correct
• Ensure your website allows external images

Image looks blurry

• Request a larger size in the URL
• Use SVG format for better scaling
• Don’t stretch PNG images beyond their native size

Changes not appearing

• Wait a few minutes for cache to clear
• Add a version parameter to force refresh
• Clear your browser cache

CORS or security errors

• SnapGlyph embed URLs support cross-origin requests
• If issues persist, check your website’s Content Security Policy

Next Steps

• Customize your QR code appearance
• Add a logo to your QR code
• Export QR codes in different formats