> 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="/files/UbW0AFHmYuPr7SzhEXzX" 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="/files/ZcZbnqUEygCQFBE6ygLD" 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="/files/1Rd5qeA8rafSJaH6F5QU" 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="/files/98KWz1wsztJIVrdtvPoi" 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="/files/NB51L6A1pHiIAEgrY2CB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lQtZfjM1zhc43oiDi8Es" 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="/files/EvYzVjkI3luus5Zd4ziE" alt=""><figcaption></figcaption></figure> <figure><img src="/files/I5cjpxu6xJKA9V3m9sa0" 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="/files/rxdcbSxy4XcqLxdgiv43" 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="/files/Z1n6lLsdUrVLBxTv1MbT" 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="/files/GsDC62qimJbO7WTMPpLD" 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 Bubble developers specializing in template customization, custom plugin development, and full-cycle website creation from scratch.

**What We Offer**

* 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’ll be happy to discuss your project!