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
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.
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.
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".
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.
Alternatively, use the "Upload the File Scanner" action to upload and scan a code from an image file.
5. Adjust Scanner Settings:
Select the Barcode & QR Code Scanner element on the page.
Choose between front or back camera for scanning.
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.
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
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.
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.
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.
On iOS devices, there is a possibility of a longer scan due to the features of the system.
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 Let us know what you need — we’ll be happy to discuss your project!
Last updated