> For the complete documentation index, see [llms.txt](https://foxocode.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxocode.gitbook.io/docs/fox-plugins/barcode-and-qr-code-scanner.md).

# Barcode & QR Code scanner

The Barcode & QR Code Scanner plugin allows you to scan barcodes and QR codes seamlessly within your Bubble.io application. It supports multiple barcode formats and provides a smooth, real-time scanning experience using the device's camera.

## Key Features

✅ Supports various barcode formats, including QR codes, EAN, UPC, Code 128, and more\
✅ Works on mobile devices and desktops with camera access\
✅ Provides real-time scanning with fast and accurate results\
✅ Can be triggered by button clicks or automatic detection\
✅ Returns scanned data for further processing and storage

## Supported Code Formats

QR Code, AZTEC, CODE\_39, CODE\_93, CODE\_128, ITF, EAN\_13, EAN\_8, PDF\_417, UPC\_A, UPC\_E, DATA\_MATRIX

## Links

Demo page: <https://foxocode.co/brcode_scanner>

Demo page editor: <https://bubble.io/page?version=live&type=page&name=brcode_scanner&id=chart-demo-54334&tab=tabs-1&type_id=audio>

{% hint style="info" %}
You can use the plugin's edit page as a reference for setup instructions, providing a hands-on guide to configuring and using the plugin within your Bubble.io application.
{% endhint %}

## Instruction

### 1. Install the Plugin

* Add the Barcode & QR Code scanner plugin to your application.

### 2. Add **the Scanner Element**

* In the **Design** tab, locate the plugin under the visual elements section.
* Drag and drop the Barcode & QR Code Scanner element onto your page.
* Ensure that the scanner is fully visible and not covered by other elements.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FQod1TLHzqxvxh3qASfy4%2FScreenshot%202025-03-18%20at%2021.56.24.png?alt=media&amp;token=70e99237-f95e-4464-acb2-5bc4bcbf466e" alt=""><figcaption></figcaption></figure>

### 3. Set Up a Trigger Button

* Add a button to your page that will initiate the scanning process.
* Label it appropriately, such as **"Start Scanner"**.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FxEd2yNKstr03wrYUdBnT%2FScreenshot%202025-03-18%20at%2022.01.13.png?alt=media&amp;token=a3061eb5-7ab3-41d0-b086-818ed6a8febe" alt=""><figcaption></figcaption></figure>

### 4. Configure Plugin Actions

In the **Workflow** tab, set up an action for the button:

* Choose the **"Start Scanner"** action to initiate real-time scanning using the device's camera.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FnIwUXVvgliOmRW3zVvNp%2FScreenshot%202025-03-18%20at%2022.06.13.png?alt=media&amp;token=7629e35f-a7ba-4913-93ef-ecb0c0864caa" alt=""><figcaption></figcaption></figure>

* Alternatively, use the **"Upload the File Scanner"** action to upload and scan a code from an image file.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2F5NBn0E5ClmNneGmcQtP9%2FScreenshot%202025-03-21%20at%2013.47.45.png?alt=media&amp;token=55cfed60-abcb-4812-8df5-d6e936343871" alt=""><figcaption></figcaption></figure>

### 5. Adjust Scanner Settings:

* Select the **Barcode & QR Code Scanner** element on the page.
* Choose between **front** or **back camera** for scanning.

<div><figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2Frd56kX5R4DIppgi41IeF%2FScreenshot%202025-03-21%20at%2014.20.03.png?alt=media&amp;token=1c4241d1-ebb7-41c6-97d0-5a1d78bb9b22" alt=""><figcaption></figcaption></figure> <figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FV0wchEphBYKcL2y50HpZ%2FScreenshot%202025-03-21%20at%2014.20.17.png?alt=media&amp;token=dfb279d3-a3e4-4c02-9e26-9a47b7262158" alt=""><figcaption></figcaption></figure></div>

* Customize the **width and height** to fit your design.
* The screenshots in the documentation show examples of adjusting the size for both desktop and mobile versions.

<div><figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FetnjhOVRo2Udkg5UsYVj%2FScreenshot%202025-03-21%20at%2013.47.25.png?alt=media&amp;token=402075bf-9b6a-4e76-a7c8-6ca241d137d5" alt=""><figcaption></figcaption></figure> <figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2Fu0iHe0OFdhU8WCjdJ5Sa%2FScreenshot%202025-03-21%20at%2013.47.30.png?alt=media&amp;token=fa6a0dd6-d2d1-4668-bfe5-ac8747b85502" alt=""><figcaption></figcaption></figure></div>

### **6. Get the Result**

* When a barcode or QR code is scanned, the plugin will generate a result.
* Display the text with the result on the page

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FEwoMJB3TxElLNQlL211O%2FScreenshot%202025-03-21%20at%2014.31.23.png?alt=media&amp;token=b58708db-fe2b-4795-bc44-37aaa7b2e7bc" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In order to re-scan without reloading the page, you need to set the workflow to stop scanning, then set a short pause and then start scanning.
{% endhint %}

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FwJYZ5wXnbGbNSMvUbY2w%2FScreenshot%202025-03-21%20at%2014.39.27.png?alt=media&amp;token=8b349487-ffc2-4583-ab21-e1b12612e407" alt=""><figcaption></figcaption></figure>

### 7. Indicate Scan Completion

* The plugin provides built-in methods to indicate a successful scan.
* You can display a custom message, play a sound notification, or trigger a visual indicator when scanning is completed.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FWuvL0dIrem2ox2QCJ0K4%2FScreenshot%202025-03-21%20at%2014.13.22.png?alt=media&amp;token=5343f92d-3d25-4387-bde5-b2a3c0eb636b" alt=""><figcaption></figcaption></figure>

## Troubleshooting & Tips

💡 **If the scanner is not working:**

* Ensure the browser has camera permissions enabled.
* Check if another application is using the camera (such as a video call).

💡 **If the scan is not detecting codes properly:**

* Ensure the barcode or QR code is well-lit and clearly visible.
* Increase the scanner area size for better detection.
* Make sure that your camera is wiped clean (sometimes there may be problems with reading the barcode when the camera is dirty)

💡 **If the scanner is not responding:**

* Ensure the element is fully visible and not covered by other UI components.
* Refresh the page and try again.

{% hint style="info" %}
On iOS devices, there is a possibility of a longer scan due to the features of the system.
{% endhint %}

## Important Note

We recommend testing your QR code size and distance in the Demo page before subscribing, to ensure optimal scanning results for your specific use case.

## About Foxocode

Foxocode is a team of experienced **product designers and developers** specializing in AI-powered solutions, no-code development, custom plugins, and full-cycle digital product creation.

**What We Offer**

* AI-powered web & app development
* AI integrations & automation
* Full website/app development from scratch
* Customization of Bubble templates
* Development of custom plugins
* Integration with external APIs and services

**Contact Us**

📧 Email: <contact.foxocode@gmail.com>\
🌐 Website: [www.foxocode.co](https://foxocode.co/)\
Let us know what you need - we will be happy to discuss your project!