MARKETPLACE
PLUGINS
QR/BARCODE READER
QR/Barcode Reader logo

QR/Barcode Reader

Published November 2024
   •    Updated today

Plugin details

The QR & Barcode Reader Plugin allows users to easily integrate a camera-based scanner within their Bubble application to read and process QR codes and various barcode formats in real-time. This plugin opens the camera, detects QR or barcode information, and returns the decoded data, which can be used to trigger actions like URL redirection, product look-up, or accessing other resources within the app.
Features:
Real-time Scanning: Initiates the device’s camera to scan QR codes and barcodes in real time.

Multiple Formats Supported: Reads various barcode formats, including QR codes, Code 128, EAN-13, UPC-A, and more.

Responsive Design: Ensures the video feed adjusts responsively to fit different screen sizes and device orientations.

Flexible Actions: Customizable start/stop camera actions and states to manage scanning, including returning decoded data or error messages.

Demo Page: https://chakor-plugin-demo-3.bubbleapps.io/version-test/qr_barcode_reader

Editor Link:  https://bubble.io/page?id=chakor-plugin-demo-3&test_plugin=1730894053318x956940064305971200_current&tab=tabs-1&name=qr_barcode_reader&type=page

Free

For everyone

3.0 stars   •   2 ratings
282 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

Step 1: Add the QR & Barcode Reader Element In the Bubble editor, go to the Plugins tab and install the QR & Barcode Reader Plugin.
Drag the QR & Barcode Reader element onto the page where you want the scanner to appear.

Step 2: Configure Element Properties
Width & Height: Adjust the element size to fit the desired area. The plugin will automatically adapt the camera feed to fill this space.
Scanning States: The plugin provides states to manage the scanning process:
scanned_url: Stores the decoded data from the scanned QR or barcode.
is_scanning: Returns "yes" when scanning is active and "no" otherwise.
error_message: Shows any error messages encountered during scanning.

Step 3: Actions
Start Scanning: Begin scanning with the Start Scanning action, which activates the device's camera and starts reading QR codes and barcodes in real-time.
Stop Scanning: Use the Stop Scanning action to halt the camera feed when scanning is no longer needed.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Action

Categories

This plugin can be found under the following categories:
Productivity   •   Technical   •   Data (things)   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (3.0)

leitorBarras
July 7th, 2025
LeitorBarras
Can you please share more details so we can help you in best possible way? Thanks!
September 9th, 2025
  •  
Chakor
Good Plugin - Needs a reset value - action
July 1st, 2025
I like it everything works good, but the logic of my workflows and my needs its very important to reset the value of the element, and I haven´t found a solution for that. Thanks!
Bubble