> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/extensions/barcode-qr-scanner.md).

# Barcode / QR Scanner

## <mark style="color:green;">Overview</mark>

The **Barcode / QR Scanner** feature allows your app users to scan **QR codes** and **barcodes** directly from your mobile app using their device's camera.

Depending on your configuration, the scanned data can:

* Open the scanned URL automatically
* Redirect users to a custom Action URL
* Pass the scanned value to your website using a JavaScript callback

This feature is available as a **Premium** add-on.

***

## <mark style="color:green;">Before You Begin</mark>

Before configuring the Barcode / QR Scanner, ensure the following requirements are met:

* Your app is on the **Premium Plan**.
* The **Barcode / QR Scanner** add-on is enabled.
* <mark style="color:red;">**Camera Permission**</mark> <mark style="color:red;"></mark><mark style="color:red;">is enabled under</mark> <mark style="color:red;"></mark><mark style="color:red;">**Branding → App Permissions**</mark><mark style="color:red;">.</mark>
* Your app has been **published as a new version** after enabling the feature, as older app versions do not support Barcode / QR Scanner.

> **Note:** Existing app versions will not support this feature. After enabling the Barcode / QR Scanner, you must publish a new app version for the scanner to work.

***

## <mark style="color:green;">Enable Barcode / QR Scanner</mark>

<figure><img src="/files/wzVzkIVEkGVVjQwi1ZrE" alt="" width="563"><figcaption></figcaption></figure>

1. Go to **Add-ons → Barcode / QR Scanner**.
2. Enable the **Barcode / QR Scanner** toggle.
3. Save your changes.
4. Publish your app.

Once enabled, the scanner can be assigned to supported buttons in your app.

***

## <mark style="color:green;">Add Scanner to a Navigation Bar Button</mark>

<figure><img src="/files/VqAMK8TF1Dm0lXTOTrnR" alt=""><figcaption></figcaption></figure>

You can launch the scanner directly from the app's Navigation Bar.

1. Go to **Screens**.
2. Open the desired screen.
3. Navigate to **Navigation Bar**.
4. Add a new button or edit an existing button.
5. Select **Barcode / QR Scanner** (Premium).

A configuration dialog will appear.

***

## <mark style="color:green;">Scanner Configuration</mark>

<figure><img src="/files/IjkoFiNuhJ3kwgQNzvow" alt=""><figcaption></figcaption></figure>

### Button Icon

Choose the icon that will appear in the navigation bar.

### Code Type

Choose which type of code your scanner should detect.

#### QR Code

Scans QR Codes only.

When **QR Code** is selected, the following **Process Scan Data** options are available:

* Open Scanned URL
* Action URL
* JavaScript Callback

***

#### Barcode

Scans supported barcode formats (such as Code 128, EAN-13, UPC, etc.).

When **Barcode** is selected, the available options are:

* Action URL
* JavaScript Callback

> **Note:** **Open Scanned URL** is available only when **QR Code** is selected.

***

## <mark style="color:green;">Process Scan Data</mark>

Choose what should happen after a successful scan.

***

### Open Scanned URL

If the scanned QR Code contains a valid web URL, Twinr automatically opens that URL inside your app.

Example:

Scanned QR Code:

```
https://example.com/product/123
```

Result:

The user is redirected to:

```
https://example.com/product/123
```

***

### Action URL

Use this option when you want to send the scanned value to a custom URL.

After selecting **Action URL**, an additional field appears:

#### Action URL

Enter the destination URL.

The URL **must include** the placeholder:

```
{{code}}
```

Example:

```
https://example.com/verify/{{code}}
```

If the scanned code is:

```
ABC123456
```

Twinr will open:

```
https://example.com/verify/ABC123456
```

> **Important:** The `{{code}}` placeholder is mandatory. Twinr replaces it with the scanned barcode or QR code value at runtime.

***

### JavaScript Callback

Choose this option if you want your website to handle the scanned data.

After selecting **JavaScript Callback**, enter the name of the JavaScript function available on your website.

Example:

```
onBarcodeScanned
```

Your website should define the function:

```
function onBarcodeScanned(result) {    console.log(result);}
```

Whenever a barcode or QR code is scanned, Twinr calls this function and passes the scanned data.

This option is useful if you want to:

* Validate product codes
* Search products
* Trigger custom workflows
* Navigate users based on the scanned result

***

## <mark style="color:green;">Where Can I Use Barcode / QR Scanner?</mark>

Currently, the Barcode / QR Scanner can be launched from:

* Navigation Bar Buttons

Support for additional UI elements may be introduced in future releases.

***

## <mark style="color:green;">Important Notes</mark>

* Available only on the **Premium Plan**.
* Camera permission must be enabled.
* A **new app version** must be published after enabling the feature.
* `{{code}}` is required when using **Action URL**.
* **Open Scanned URL** is supported only for **QR Code**.
* JavaScript Callback requires the specified function to exist on your website.

***

## <mark style="color:green;">FAQs</mark>

#### Why isn't the Barcode / QR Scanner working in my app?

Make sure:

* Barcode / QR Scanner is enabled.
* Camera permission is enabled.
* You have published a new app version.
* You are using the latest version of your mobile app.

***

#### What is the difference between QR Code and Others?

* **QR Code** scans only QR Codes and supports **Open Scanned URL**.
* **Others** scans supported barcode formats and supports **Action URL** and **JavaScript Callback**.

***

#### Is `{{code}}` required for Action URL?

Yes. Twinr replaces `{{code}}` with the scanned value. Without it, the scanned data cannot be passed to your destination URL.

***

#### Can I process the scanned data using JavaScript?

Yes. Select **JavaScript Callback** and enter the name of a JavaScript function available on your website. Twinr will invoke that function with the scanned result after a successful scan.