QR code

QR Code Widget Guide

The QR Code Widget makes it easy to create and display dynamic, fully customizable QR codes on your website. Perfect for bridging online and offline interactions, this widget helps you guide users to specific URLs, promotions, contact information, or app downloads with a simple scan. Designed for maximum flexibility, it allows you to customize the look of your QR codes so they blend seamlessly with your site’s branding—creating an interactive and modern user experience.

1. Start with a Template

What you'll see:

• QR layout options like Standard Code, With Label, or Call-to-Action Below

• A Continue with this template button

How to proceed:

• Select the QR code layout that suits your use case

• Click Continue to customize the QR code appearance and behavior

2. Use the Navigation Tabs

Once you proceed, you’ll have access to three key tabs for customization:

1. Content – Set the destination and messaging

2. Style – Adjust colors, size, and design

3. Settings – Configure advanced options like tracking and responsiveness

3. Customize Your Widget

Content Tab

Define what your QR code does and where it leads:

• Target URL – Link to any webpage, form, app, or downloadable content

• Display Text – Optional headings or CTAs (e.g., “Scan to Download Our App”)

• Labels – Add additional context or short instructions

This section requires no coding and is ideal for quick setup.

Style Tab

Design the QR code to match your brand and website aesthetic:

• Color Customization – Adjust the QR code's foreground and background colors

• Size Options – Set fixed dimensions or allow responsive scaling

• Borders & Rounding – Control edge style and spacing

• Font & Button Styling – If including a label or button, fully control its appearance

Make your QR code visually engaging and on-brand.

Settings Tab

Enhance functionality with additional configuration options:

• Dynamic QR Mode – Update the destination URL without changing the code

• Tracking Parameters – Add UTM codes or campaign tags for analytics

• Scan Limit or Expiry – Restrict usage or set a display deadline for limited campaigns

• Responsive Behavior – Ensure proper display on mobile, tablet, and desktop

• Custom Code Injection – Use JavaScript or CSS to extend behavior

These settings help you make your QR code more versatile and measurable.

Helpful Tips

• Use the Content tab to define your link and supporting message

• Use the Style tab to keep the QR code aligned with your visual branding

• Use the Settings tab to enable tracking or advanced targeting

• Always click "Save" to apply your changes!