---
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](../developer/text-replacer.md) `#{...}` 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

```typescript
// 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](../developer/text-replacer.md) — `#{...}` placeholder syntax used in `navigationUrl`
- [Widget System](../developer/widget-system.md)