You can integrate barcode and QR code scanning into your Bubble app using a scanner plugin that accesses the device camera. Once a code is scanned, the plugin returns the decoded text, which you can use to look up products in your database, log inventory, or trigger workflows. No custom code is required for basic scanning functionality.
Add Barcode Scanning to Your Bubble App
This tutorial walks you through adding barcode and QR code scanning to a Bubble application using a plugin. You will learn how to configure the scanner element, capture decoded values, and use them to search your database. This is ideal for inventory management, product lookup, event check-in, or any app where users need to scan physical codes. The guide is written for Bubble builders who want to bridge the physical and digital worlds in their app.
Prerequisites
- A Bubble account with an active app
- A Data Type for the items you want to look up (e.g., Product with a 'barcode' text field)
- A device with a camera for testing (smartphone or laptop with webcam)
- Basic familiarity with adding elements and creating workflows in Bubble
Step-by-step guide
Install a Barcode Scanner Plugin
Install a Barcode Scanner Plugin
Navigate to the Plugins tab in your Bubble editor and click '+ Add plugins'. Search for 'barcode' or 'QR code scanner'. Popular options include 'Barcode & QR Code Scanner' and 'ZXing Barcode Scanner'. Review the plugin details, check that it supports the barcode formats you need (EAN-13, Code 128, QR, etc.), and click Install. Some plugins are free; others require a subscription.
Pro tip: Check the plugin's review count and last update date before installing. Plugins that have not been updated in over a year may have compatibility issues with recent Bubble updates.
Expected result: The barcode scanner plugin appears in your installed plugins list.
Add the Scanner Element to Your Page
Add the Scanner Element to Your Page
Go to the Design tab and open the page where you want the scanner. Click the '+' icon in the element palette and scroll to the plugin elements section — you will see the scanner element from your installed plugin. Drag it onto the page. In the Property Editor, configure the scanner settings: select which barcode formats to support (e.g., QR Code, EAN-13, Code 128), set the camera facing mode to 'environment' for rear camera on mobile or 'user' for front-facing, and optionally set the scanner dimensions.
Expected result: A scanner element is visible on your page in the editor, configured with your preferred barcode formats and camera settings.
Create a Workflow to Handle Scanned Data
Create a Workflow to Handle Scanned Data
The scanner plugin fires an event when a barcode is successfully decoded. In the Workflow tab, you will see a new event from the plugin — typically named something like 'BarcodeScanner value changed' or 'A barcode is scanned'. Click to add this event. Add an action: 'Do a Search for [Product]' with the constraint 'barcode = [Scanner element's value]'. Then add a 'Display data in a Group' action to show the matched product's details in a results group on the page. Also add a conditional branch: if the search returns empty, show an alert saying 'Product not found'.
Pro tip: Store the scanned value in a Custom State on the page (e.g., 'scanned_code') so you can reference it in multiple places without re-reading the scanner element.
Expected result: Scanning a barcode triggers a database lookup and displays the matching product, or shows a 'not found' message.
Design the Product Details Display
Design the Product Details Display
Add a Group element below or beside the scanner, set its Type of content to your Product Data Type. Inside the group, add Text elements for the product name, description, price, and an Image element for the product photo. Map each to 'Parent group's Product's [field]'. Set this group to be hidden by default (uncheck 'This element is visible on page load'). In your scan workflow, use 'Display data' to populate this group and 'Show' to make it visible.
Expected result: After a successful scan, a product details card appears showing all relevant information about the scanned item.
Add a Scan History Log
Add a Scan History Log
Create a new Data Type called 'ScanLog' with fields: scanned_value (text), product (Product), scanned_by (User), and scanned_at (date). In your barcode scan workflow, after the product lookup, add a 'Create a new thing' action for ScanLog — set scanned_value to the scanner's value, product to the search result's first item, scanned_by to Current User, and scanned_at to Current date/time. Add a Repeating Group on the page showing recent scans sorted by scanned_at descending.
Expected result: Every scan is logged in the database, and a history list on the page shows recent scans with timestamps.
Complete working example
1DATA TYPES:2- Product3 - name (text)4 - barcode (text, unique)5 - description (text)6 - price (number)7 - image (image)8 - stock_quantity (number)910- ScanLog11 - scanned_value (text)12 - product (Product)13 - scanned_by (User)14 - scanned_at (date)1516PAGE: scanner1718ELEMENTS:19- BarcodeScanner (plugin element)20 - Formats: QR, EAN-13, Code 128, UPC-A21 - Camera: environment (rear)22- Group ProductDetails (hidden by default)23 - Type of content: Product24 - Image: Parent group's Product's image25 - Text: Parent group's Product's name26 - Text: Parent group's Product's price :formatted as $#,##0.0027 - Text: Parent group's Product's description28 - Text: "Stock: " & Parent group's Product's stock_quantity29- Text "Product not found" (hidden by default)30- RepeatingGroup ScanHistory31 - Type: ScanLog32 - Data source: Search for ScanLogs (scanned_by = Current User, sorted by scanned_at desc)33 - Cell: scanned_value | product's name | scanned_at :formatted as relative3435WORKFLOWS:361. When BarcodeScanner value is changed37 → Set state of page: scanned_code = BarcodeScanner's value38 → Search for Products (barcode = BarcodeScanner's value)39 → If result count > 0:40 → Display data in Group ProductDetails: search result :first item41 → Show Group ProductDetails42 → Hide Text "Product not found"43 → Create a new ScanLog (scanned_value, product, Current User, Current date/time)44 → If result count = 0:45 → Hide Group ProductDetails46 → Show Text "Product not found"Common mistakes when integrating a barcode scanner in Bubble
Why it's a problem: Not requesting camera permissions before the scan
How to avoid: Most scanner plugins handle permission requests automatically, but test on mobile devices to confirm. Add a 'Tap to Scan' button that activates the scanner on click, which satisfies browser permission requirements for user-initiated actions.
Why it's a problem: Storing barcodes as numbers instead of text
How to avoid: Always use a text field type for barcode values in your Data Types.
Why it's a problem: Not handling duplicate scans in quick succession
How to avoid: Add a Custom State 'last_scanned' (text) on the page. In your workflow, add an 'Only when' condition: page's last_scanned is not BarcodeScanner's value. Update the state after each successful scan.
Best practices
- Use the rear-facing camera ('environment' mode) as the default for mobile scanning since it has better autofocus for barcodes.
- Store barcode values as text fields, not numbers, to preserve leading zeros and handle alphanumeric codes.
- Add an audible beep or visual flash feedback when a scan succeeds so users know it worked.
- Include a manual entry input field as a fallback for damaged or unreadable barcodes.
- Test with multiple barcode formats and physical conditions (lighting, angles, damaged labels) before going live.
- Paginate the scan history Repeating Group to avoid loading thousands of log entries at once.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Bubble.io inventory app and want to add barcode scanning. I need to scan EAN-13 and QR codes using the device camera, look up the scanned code in a Product data type, and display product details. What plugin should I use and how do I set up the workflow?
Add a barcode scanner to the inventory page that scans EAN-13 and QR codes. When a code is scanned, look up the Product by barcode field and display its name, price, and stock quantity. Log every scan in a ScanLog data type with the user and timestamp.
Frequently asked questions
Which barcode formats can I scan in Bubble?
Most scanner plugins support common 1D formats (EAN-13, EAN-8, UPC-A, Code 128, Code 39) and 2D formats (QR Code, Data Matrix). Check your chosen plugin's documentation for the full list of supported formats.
Does the barcode scanner work on desktop browsers?
Yes, if the desktop has a webcam. However, webcam scanning is less reliable than mobile cameras because most webcams lack autofocus. For best results, recommend mobile scanning to your users.
Can I scan barcodes offline in a Bubble app?
No. Bubble requires an internet connection to run workflows and database lookups. The camera capture itself works offline, but you cannot process or store the scanned data without connectivity.
How do I handle scanning multiple items in a row?
After each successful scan and database lookup, reset the scanner state and keep it active. Use a Custom State to track the last scanned value and prevent duplicate processing. Add each scanned item to a list Custom State to build a batch.
What if my barcode scanner plugin stops working after a Bubble update?
Plugin compatibility issues do occur. Check the plugin's forum thread for updates from the developer. If the plugin is abandoned, consider switching to an actively maintained alternative. For mission-critical scanning, teams like RapidDev can help you evaluate and implement reliable solutions.
Can I use the barcode scanner for event check-in?
Absolutely. Create a Ticket data type with a unique code field. Generate QR codes for each ticket. At the event, scan the QR code, look up the ticket, check if it has already been used, mark it as checked-in, and display the attendee name.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation