Wappler QR Code Component

A powerful and flexible QR Code generator component for Wappler App Connect. Generate dynamic, customizable QR codes with support for multiple formats, colors, error correction levels, logo overlays, and more.

Features

• Customizable Styling: Full control over colors, sizes, and appearance
• Error Correction: Support for L, M, Q, and H error correction levels
• Logo Overlay: Add custom logos to the center of QR codes
• Multiple Formats: SVG and PNG output support
• Data Binding: Full Wappler data binding support
• Download: Built-in download functionality
• Click Events: Interactive with click tracking
• Dynamic Updates: Real-time updates when data changes
• Type Templates: Pre-configured for URL, Email, Phone, SMS, WiFi, vCard
• Accessible: ARIA-compliant with alt text support
• Performance: Built-in caching for optimal performance
• Loading States: Elegant loading spinners and error handling

Installation

Via Wappler Extension Manager

1. Open Wappler
2. Go to Project Settings → Extensions
3. Click Add Extension
4. Enter: wappler-qrcode
5. Click Install

Via NPM

npm install wappler-qrcode

Manual Installation

1. Download the extension
2. Extract to your project's extensions folder
3. Restart Wappler

Quick Start

Basic Usage

<dmx-qrcode 
  id="qrcode1" 
  data="https://wappler.io"
  size="200">
</dmx-qrcode>

With Data Binding

<dmx-qrcode 
  id="qrcode1" 
  dmx-bind:data="serverconnect1.data.url"
  size="300"
  foreground-color="#667eea"
  background-color="#FFFFFF">
</dmx-qrcode>

With Logo Overlay

<dmx-qrcode 
  id="qrcode1" 
  data="https://wappler.io"
  size="250"
  logo-url="/assets/logo.png"
  logo-size="medium"
  logo-shape="circle">
</dmx-qrcode>

With Download Button

<dmx-qrcode 
  id="qrcode1" 
  data="{{profile.email}}"
  size="200"
  downloadable="true"
  error-correction="H">
</dmx-qrcode>

Component Properties

Basic Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | id | String | required | Unique identifier for the component | | data | String | https://wappler.io | The data to encode (supports data binding) | | size | Number | 200 | Size in pixels (width and height) |

QR Code Settings

| Property | Type | Default | Description | |----------|------|---------|-------------| | error-correction | String | M | Error correction level: L (7%), M (15%), Q (25%), H (30%) | | margin | Number | 4 | Quiet zone margin size in modules | | format | String | svg | Output format: svg or png |

Color Settings

| Property | Type | Default | Description | |----------|------|---------|-------------| | foreground-color | String | #000000 | QR code foreground color (hex) | | background-color | String | #FFFFFF | QR code background color (hex) |

Logo/Image Overlay

| Property | Type | Default | Description | |----------|------|---------|-------------| | logo-url | String | "" | URL of logo image to overlay | | logo-size | String | medium | Logo size: small (15%), medium (20%), large (25%) | | logo-shape | String | square | Logo container shape: square or circle |

Display Options

| Property | Type | Default | Description | |----------|------|---------|-------------| | alt | String | QR Code | Alt text for accessibility | | css-class | String | "" | Additional CSS classes | | show-loading | Boolean | true | Show loading spinner | | clickable | Boolean | true | Enable click interactions |

Advanced Options

| Property | Type | Default | Description | |----------|------|---------|-------------| | qr-type | String | custom | Template type: custom, url, email, phone, sms, wifi, vcard | | downloadable | Boolean | false | Show download button | | cache | Boolean | true | Enable caching |

Component Methods

Access component methods via App Connect:

// Update QR code data
dmx.app.data.qrcode1.setData('https://new-url.com');

// Refresh QR code
dmx.app.data.qrcode1.refresh();

// Download QR code
dmx.app.data.qrcode1.downloadQRCode('my-qrcode.svg');

// Get current URL
const url = dmx.app.data.qrcode1.getUrl();

// Get current data
const data = dmx.app.data.qrcode1.getData();

// Copy URL to clipboard
dmx.app.data.qrcode1.copyUrl();

// Copy data to clipboard
dmx.app.data.qrcode1.copyData();

// Get component state
const state = dmx.app.data.qrcode1.getState();

// Generate for specific type
dmx.app.data.qrcode1.generateForType('email', '[email protected]');

Data Schema

The component exposes the following data:

{
  data: "https://wappler.io",      // Current QR data
  url: "https://api...",            // Generated QR code URL
  isLoaded: true,                   // Load status
  error: null,                      // Error message if any
  format: "svg",                    // Current format
  size: 200                         // Current size
}

Events

Listen to component events:

<!-- On loaded -->
<dmx-qrcode 
  id="qrcode1" 
  dmx-on:loaded="notifySuccess.show()">
</dmx-qrcode>

<!-- On error -->
<dmx-qrcode 
  id="qrcode1" 
  dmx-on:error="notifyError.show()">
</dmx-qrcode>

<!-- On clicked -->
<dmx-qrcode 
  id="qrcode1" 
  dmx-on:clicked="showDetails()">
</dmx-qrcode>

<!-- On downloaded -->
<dmx-qrcode 
  id="qrcode1" 
  downloadable="true"
  dmx-on:downloaded="notifyDownload.show()">
</dmx-qrcode>

Available Events

• mounted - Component initialized
• loaded - QR code loaded successfully
• error - Error loading QR code
• clicked - QR code clicked
• refreshed - QR code refreshed
• downloaded - QR code downloaded
• urlCopied - URL copied to clipboard
• dataCopied - Data copied to clipboard
• destroyed - Component destroyed

Common Use Cases

1. Profile QR Code

<dmx-qrcode 
  id="profileQR" 
  dmx-bind:data="'https://mysite.com/profile/' + user.id"
  size="200"
  foreground-color="#2563eb"
  logo-url="/assets/profile-icon.png"
  logo-shape="circle">
</dmx-qrcode>

2. Contact vCard

<dmx-qrcode 
  id="contactQR" 
  data="BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+1234567890
EMAIL:[email protected]
END:VCARD"
  qr-type="vcard"
  size="250"
  downloadable="true">
</dmx-qrcode>

3. WiFi Credentials

<dmx-qrcode 
  id="wifiQR" 
  data="WIFI:T:WPA;S:NetworkName;P:Password;;"
  qr-type="wifi"
  size="300"
  error-correction="H">
</dmx-qrcode>

4. Dynamic URL with Tracking

<dmx-qrcode 
  id="trackingQR" 
  dmx-bind:data="'https://mysite.com/track?id=' + campaign.id + '&ref=' + source"
  size="200"
  dmx-on:clicked="trackQRClick.load()">
</dmx-qrcode>

5. Event Ticket

<dmx-qrcode 
  id="ticketQR" 
  dmx-bind:data="ticket.qrData"
  size="300"
  logo-url="/assets/event-logo.png"
  logo-size="large"
  error-correction="H"
  css-class="ticket-qr">
</dmx-qrcode>

Styling

Custom CSS

/* Custom container styling */
.my-qrcode {
  border: 2px solid #667eea;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.qrcode-container:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

Apply custom class:

<dmx-qrcode 
  id="qrcode1" 
  css-class="my-qrcode"
  data="https://wappler.io">
</dmx-qrcode>

Error Correction Levels

Choose the appropriate error correction level based on your use case:

| Level | Recovery | Use Case | |-------|----------|----------| | L | 7% | Clean environments, maximum data capacity | | M | 15% | Standard use, good balance (default) | | Q | 25% | Dirty or damaged environments | | H | 30% | Critical data, industrial use, logo overlays |

Note: Higher error correction = denser QR code = harder to scan at small sizes

QR Code Types

URL

data: "https://example.com"

Email

data: "mailto:[email protected]?subject=Hello&body=Message"

Phone

data: "tel:+1234567890"

SMS

data: "sms:+1234567890?body=Hello"

WiFi

data: "WIFI:T:WPA;S:NetworkName;P:Password;H:false;;"

vCard

data: `BEGIN:VCARD
VERSION:3.0
FN:John Doe
ORG:Company
TEL:+1234567890
EMAIL:[email protected]
URL:https://example.com
END:VCARD`

Troubleshooting

QR Code Not Displaying

1. Check browser console for errors
2. Verify data is not empty
3. Ensure component has valid ID
4. Check network connectivity to QR API

Logo Not Showing

1. Verify logo URL is accessible
2. Check logo image format (JPG, PNG, SVG)
3. Ensure CORS is enabled for logo domain
4. Try different logo sizes

Cannot Scan QR Code

1. Increase error correction level
2. Increase size (minimum 150px recommended)
3. Ensure sufficient contrast between colors
4. Check quiet zone margin (increase if needed)

API Information

This component uses the free QR Server API:

• Service: https://api.qrserver.com/
• Formats: SVG, PNG
• Rate Limits: Reasonable use policy
• Reliability: High availability

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details

Credits

• Built for Wappler
• QR Code generation powered by QR Server API
• Created by Evaldas Sedys

Support

• Issues: GitHub Issues
• Documentation: Wiki
• Forum: Wappler Community

Changelog

v1.0.0 (2024)

• Initial release
• Basic QR code generation
• Color customization
• Logo overlay support
• Download functionality
• Multiple format support
• Data binding integration
• Error correction levels
• Loading states and error handling

Made with love for the Wappler Community