QR / Barcode Scanner Bubble Mobile

✅

Link to the plugin page: will be late

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-06.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=QR/Barcode%20scanner

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-06&app_type=mobile&tab=Design&name=QR%2FBarcode+scanner&type=page&version=live&elements=bTIBj16

Introduction

The QR/Barcode Scanner Bubble Mobile plugin provides a powerful visual element for scanning QR codes and barcodes directly within your Bubble mobile applications. This plugin leverages device camera capabilities to offer real-time scanning functionality with customizable scan area shapes, camera direction control, and continuous scanning modes. It’s specifically designed for mobile platforms and supports both QR codes and various barcode formats.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/njge8JcQ

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

To use this plugin:

Install the QR/Barcode Scanner Bubble Mobile plugin from the Bubble Plugin store.

Add the QR/Barcode Scanner element to your mobile page.

Configure the scanner properties (camera facing, scan area shape, colors, etc.)

Set up workflows to handle the “Code Scanned” event.

Test on mobile devices or in mobile preview mode.

The plugin will automatically request camera permissions when the scanner is activated.

Plugin Element Properties

The plugin contains a QR/Barcode Scanner visual element that should be used on mobile pages.

QR/Barcode Scanner

Fields:

Title	Description	Type
Camera Facing	Camera direction (“environment” for back camera / “user” for front camera)	Text
Scan Area Shape	Shape of the scanning area (“Square” / “Rectangle”)	Text
Scan Area Color	Border color of the scanning area overlay	Text
Continuous Scanning	Enable continuous scanning mode (scans multiple codes without stopping)	Boolean

Element Actions

1. Start

Starts the QR/Barcode scanner and activates the camera for scanning.

2. Stop

Stops the QR/Barcode scanner and deactivates the camera.

3. Scan From Image

Scans QR code or barcode from a provided image file instead of using the camera.

Fields:

Title	Description	Type
IMG QR	Image file containing the QR code or barcode to scan	File

Exposed states

Name	Description	Type
Last Scanned Code	Contains the data from the most recently scanned QR code or barcode	Text
IsScannerActive	Indicates whether the scanner is currently active and scanning	Boolean