🈁Scanner (QR/Barcode)

Scan QR codes and barcodes directly from your app using the device's native camera.

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 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

Barcodes with a higher symbol density require a higher-resolution camera to scan successfully.

Prerequisites

This feature is available in all plans. See all plans

Scanner uses the Camera 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.

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

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.

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 <head> 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).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

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 <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic

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.

JavaScript SDK

// ============================================================================
// 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 ---

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

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".

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.