1. Add the scanner
Add QR Scanner to a native mobile page or QR Scanner (web) to a web page.

Set the element's size and corner radius directly in the Bubble editor. The scanner automatically fills the element.

2. Start scanning

The scanner does not start automatically by default. Add the Start Scanner action to a button or workflow.

If you want the scanner to start when the element loads, enable auto_start.

3. Choose your scan mode

Use scan_mode to control how scans are handled:

• Once — stops after the first code is detected and shows the scan result with an option to scan again.
  
• Continuous — keeps scanning after a code is detected. Use rescan_delay to control how long the same code is ignored before it can be scanned again.
  

The scanner automatically detects supported QR codes and barcode formats. No format configuration is required.

4. Customize the scanner

Set accent_color to your brand colour. It controls the scanner frame, scanning line and buttons.

You can also customize:

• frame_shape — Square, Rectangle, Wide or None.
  
• frame_style — choose the style of the scanning frame.
  
• scan_line — show or hide the scanning animation.
  

5. Use the scan result

Create a workflow with When QR Scanner's code scanned.

Inside the workflow, use QR Scanner's last code to access the scanned value. You can use it in searches, database actions, text elements, API calls and other Bubble workflows.

The scanner's states are updated before the code scanned event runs.

6. Scan images

You can also scan codes without using the camera.

• Pick Image To Scan — opens the device's photo library on native mobile or the file picker on web.
  
• Scan From Image — scans an image from a URL, such as an uploaded file or an image stored in your database.
  

If no code is found in the selected image, the no code found event is triggered.

7. Camera controls

Use the available actions to control the scanner while it is running:

• Switch Camera — switch between available cameras.
  
• Toggle Torch — turn the device's flashlight on or off when supported.
  
• Set Zoom — adjust the camera zoom.
  
• Open Fullscreen / Close Fullscreen — display the scanner over the entire screen.
  
• Stop Scanner — stop the camera when you no longer need it.
  

Tips

• Ticket check-in: use Open Fullscreen with scan_mode = Once for a simple scan-and-close workflow.
  
• Small barcodes: use Set Zoom to make small labels easier to scan.
  
• Screenshots and saved tickets: use Pick Image To Scan or Scan From Image.
  
• Leaving the page: use Stop Scanner when the camera is no longer needed.
  
• Troubleshooting: enable debug_overlay to see the current permission status, decoder, frame count and read count.
  
• One scanner per page. The scanner actions target the last scanner element placed on the page.
  

Testing

Test the scanner on the device and browser where your app will actually be used. Camera behaviour can vary depending on the device, browser, lighting and available camera hardware.

Mobile camera permission

Before building your native mobile app, make sure your app includes a camera usage description in its mobile settings. On the web, the page must be served over HTTPS.

📄 Full documentation: https://wide-finch-c12.notion.site/QR-Barcode-Scanner-Documentation-3da61f4cca3a8018a43be8facb54f5dc?pvs=73