QR / Barcode Scanner for Bubble Mobile
Native barcode scanning with camera, gallery import, torch, continuous mode, and clipboard auto-copy.
[/hr]
OverviewA fully native QR and barcode scanning element for Bubble mobile apps. Point your camera at any barcode and get the decoded result instantly. Supports both live camera scanning and scanning from saved images in your gallery.
[/hr]
Features
- Live camera scanning — Real-time barcode detection with a styled viewfinder overlay
- Gallery scan — Pick an image from your device library and scan it for barcodes ★ unique
- Torch / Flashlight — Toggle the camera flash on and off during scans
- Continuous scan mode — Keep scanning without stopping, with built-in 2-second debounce
- Auto-copy to clipboard — Automatically copy scanned values to the device clipboard
- Vibration feedback — Device vibrates when a code is successfully detected
- Front / Back camera — Choose which camera to use
- Barcode type filter — Scan only the types you need (QR, Code 128, EAN, etc.)
- Single scan mode — Stops after the first detection (default)
- Customizable viewfinder — Adjust color and opacity of the scan area overlay
- Workflow actions — Trigger scan, stop scan, toggle torch, and scan from image via workflows
- Events — React to code detection and gallery scan completion
- States — Access scanned value, code type, scan status, torch state, and gallery scan results
[/hr]
Supported Barcode Types
- QR Code
- EAN-13, EAN-8
- Code 128, Code 39, Code 93
- UPC-A, UPC-E
- ITF-14
- PDF417
- Aztec
- Data Matrix
- Codabar
[/hr]
Element FieldsDisplay
- Viewfinder color — The border color of the scan area overlay
- Viewfinder opacity — Transparency of the overlay area (0 to 1)
- Scan button label — Custom text for the start scan button
- Show scan button — Show or hide the on-screen button
Camera
- Camera facing — back or front camera
- Auto focus — Enable or disable camera auto-focus
- Barcode types — Comma-separated list of types to scan (leave empty for all)
- Scan mode — single (stops after one scan) or continuous (keeps scanning)
Feedback
- Vibrate on scan — Vibrate device when a code is detected
- Auto-copy to clipboard — Copy the result to clipboard automatically
- Show torch button — Show the flash toggle button during active scanning
[/hr]
Actions
- Start scanning — Open the camera and begin detecting codes
- Stop scanning — Close the camera and turn off the torch
- Toggle torch — Turn the flashlight on or off during scanning
- Scan from image — Open the device gallery to pick a photo and scan it for barcodes
[/hr]
Events
- code detected — Fires when a QR or barcode is successfully scanned by the camera
- image scan complete — Fires when scanning from a gallery image finishes
[/hr]
States
- scanned value — The decoded content of the scanned code
- code type — The format of the detected code (qr, code128, ean13, etc.)
- is scanning — True when the camera is actively scanning
- has permission — True when camera permission has been granted
- error — Error message if something went wrong
- torch on — True when the flashlight is turned on
- copied to clipboard — True when the result was copied to the clipboard
- image scan status — Status of gallery scanning: idle, scanning, success, or error
- image scan result — JSON result from scanning a gallery image
- image scan error — Error message if gallery scanning failed
[/hr]
How to Use1.
Add the element — Drag "QR / Barcode Scanner" from the plugins section onto your page
2.
Scan a code — Tap the scan button or use the "Start scanning" workflow action
3.
Get the result — Read the "scanned value" state or use the "code detected" event to trigger workflows
4.
Scan from gallery — Use the "Scan from image" action to pick and scan a saved photo
5.
Optional — Configure barcode types, camera facing, torch, continuous mode, and more
[/hr]
Requirements
- Bubble mobile app (BubbleGo / TestFlight / published app)
- Camera permission on the device
- Gallery scanning requires photo library access
[/hr]
Built for Bubble native mobile — tested on BubbleGo.https://bubble.io/page?id=test-22411&test_plugin=1782067533856x837240512629964800_current&tab=Design&name=Home&type=pagehttps://test-22411.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Home 
Built on Bubble
