Title: QR Code Scanner Widget

---

The QR Code Scanner widget performs real-time QR code and barcode scanning using the device camera. On a successful scan it executes a configurable action — currently navigating to a URL — and supports dynamic placeholder replacement via the Text Replacer #{...} syntax.

Widget Name

WIDGETQRCODE_SCANNER ("QRCodeScanner")

Category: input
Visible in catalog: yes

Configuration

| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| actionType | "navigation" | Yes | "navigation" | The action to perform after a successful scan. Currently only navigation is supported. |
| navigationUrl | string | Yes | /visitors/#{show barcode}/logon | URL to navigate to after a scan. Use #{show barcode} as a placeholder for the scanned value. |
| scannerTitle | string | No | Scan QR Code | Title displayed above the scanner viewport. |
| scannerWidth | number | No | 300 | Width of the scanner area in pixels (range: 200–800). |
| scannerHeight | number | No | 300 | Height of the scanner area in pixels (range: 200–800). |

Example Configuration

// Widget data object for the QRCodeScanner widget
const qrCodeScannerWidgetData = {
    actionType: "navigation",
    navigationUrl: "/visitors/#{show barcode}/logon",
    scannerTitle: "Scan your visitor pass",
    scannerWidth: 400,
    scannerHeight: 400
};

Related
Text Replacer — #{...} placeholder syntax used in navigationUrl
Widget System