> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/guides/integration/scanner-qr-barcode.md).
# Scanner (QR/Barcode)
## What is Scanner?
The Scanner feature opens a native camera interface for scanning QR codes and barcodes, returning the decoded content as text. This is useful for check-ins, product lookups, coupon redemption, adding contacts, or any workflow where users need to scan a code rather than type.
Scanner requests [camera](/hidden-pages/camera.md) permission on both iOS and Android. Users will be prompted to grant this permission the first time the feature is used.
Natively supports a wide range of 1D and 2D formats:
1D product
1D industrial
2D
UPC-A
Code 39
QR Code
UPC-E
Code 93
Data Matrix
EAN-8
Code 128
Aztec
EAN-13
Codabar
PDF 417
UPC/EAN Extension 2/5
ITF
MaxiCode
RSS-14
RSS-Expanded
{% hint style="info" %}
Barcodes with a higher symbol density require a higher-resolution camera to scan successfully.
{% endhint %}
## Prerequisites
{% hint style="success" %}
This feature is available in all plans. [See all plans](/getting-started/subscription-plans.md)
{% endhint %}
{% hint style="info" %}
Scanner uses the [Camera](/hidden-pages/camera.md) feature, which is enabled by default for all new apps. If the Camera has been disabled for your app, you'll need to re-enable it for Scanner to work.
{% endhint %}
## Implementation
Choose your integration method below: **Bubble.io Plugin** (No-Code), **JavaScript SDK** (Code), or **AI Agents** (for AI-powered editors like Lovable, Base44, and Replit).
### Initialization
{% tabs %}
{% tab title="Bubble.io Plugin" %}
**Check Plugin**
Before starting, verify if the Natively plugin is already installed in your Bubble project.
1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
2. **Check Installed Plugins:** Look through your list of installed plugins for "Natively iOS & Android app builder".
* If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.
* If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.
{% endtab %}
{% tab title="JavaScript SDK" %}
**Check SDK**
Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.
1. Open your project's main HTML file (or header settings) and look for the Natively script tag inside the `` section.
2. Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., `@2.26.0`).
```javascript
```
{% hint style="info" %}
To ensure you are using the most up-to-date version, check the [Natively GitHub releases page](https://github.com/buildnatively/js-sdk/releases) for the latest version number.
{% endhint %}
{% endtab %}
{% tab title="AI Agents" %}
**Initialize the SDK**
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.
Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.
```
Check if the following Natively SDK script is present in the of index.html. If missing or outdated, add it: For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases
```
{% endtab %}
{% endtabs %}
### Setup Logic
{% tabs %}
{% tab title="Bubble.io Plugin" %}
### \[Element] Natively - Scanner (QR/Barcode Scanner)
#### Events:
* **Scanner Result Updated** - fires when a code is successfully scanned.
#### States:
* **Scanner Result** - the decoded text content of the scanned code.
#### Actions:
* **Show Scanner** - opens the native scanner interface.
{% endtab %}
{% tab title="JavaScript SDK" %}
```javascript
// ============================================================================
// NATIVELY SCANNER (QR/BARCODE) - DOCUMENTATION & EXAMPLES
// ============================================================================
const scanner = new NativelyScanner();
// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// scanner.showScanner(callback)
// - Opens the native scanner interface for QR codes and barcodes.
// - callback: function — required.
// ============================================================================
// CALLBACK RESPONSE FIELDS - showScanner
// ============================================================================
// resp.result: string — the decoded text content of the scanned code
// --- Scanner. Show Scanner Example. Start ---
const open_scanner_callback = function (resp) {
console.log(resp.result); // decoded text content
};
scanner.showScanner(open_scanner_callback);
// --- Scanner. Show Scanner Example. End ---
```
{% endtab %}
{% tab title="AI Agents" %}
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.
Copy the line below and paste it into your AI agent.
[Your feature description] using the Natively Scanner SDK: const scanner = new NativelyScanner(); scanner.showScanner(callback) opens the native scanner interface for QR codes and barcodes, returning resp.result (the decoded text content). For reference: https://docs.buildnatively.com/guides/integration/scanner-qr-barcode
{% hint style="warning" %}
Replace the placeholder at the beginning with a description of what you want to build - for example: "Open the scanner when the user taps the scan button, and display the decoded result on the screen".
{% endhint %}
{% endtab %}
{% endtabs %}
### How to use
#### Parse the result based on your expected format
`resp.result` is always a plain string, regardless of the code type scanned - whether it's a URL, a product ID, or a plain text value. Your app is responsible for interpreting the content (e.g., checking if it starts with `https://` to decide whether to open it as a link).
#### Combine with Deep Links for smart routing
If your QR codes encode a URL pointing to your own domain, you can navigate directly within your app, depending on the content.
#### Higher-density codes need better cameras
If users report trouble scanning densely packed barcodes (e.g., PDF417 or Data Matrix with lots of encoded data), this may be a hardware limitation on lower-end devices rather than a bug in your implementation.
## Troubleshooting
Scanner opens but never detects a code
Make sure the code is in a supported format (see the table above). Proprietary or non-standard barcode formats aren't supported. Also confirm there's enough lighting and the camera has a clear, steady view of the code.
Scanning works inconsistently on some devices
Higher-density barcodes may require a higher-resolution camera. This is more likely on older or budget devices.
Not working in a web browser
This is a native feature and will not work in a standard web browser. Test on a real device using a Natively build or the Preview app.
[^1]: Replace this placeholder
