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

WIDGET_QR_CODE_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
};