# How to build a QR code scanner in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build a QR code scanner in your Bubble app using a scanner plugin that accesses the device camera, decodes QR data, and triggers workflows based on the scanned content. This tutorial covers plugin setup, camera permissions, processing decoded data, and building a check-in system with real-time validation.

## Overview: Creating a QR Code Scanner in Bubble

QR codes are used for event check-ins, product lookups, and contactless interactions. This tutorial adds camera-based QR scanning to your Bubble app using a plugin, processes decoded data, and triggers actions based on scan results.

## Before you start

- A Bubble account with an app ready to edit
- A QR scanner plugin installed (e.g., Zeroqode QR Scanner)
- A device with a camera for testing
- Basic understanding of Bubble workflows

## Step-by-step guide

### 1. Install the QR scanner plugin

Go to the Plugins tab and search for QR Scanner or Barcode Scanner. Install a plugin such as the Zeroqode QR/Barcode Scanner. Review the plugin documentation for configuration options.

**Expected result:** The QR scanner plugin is installed and ready to use.

### 2. Add the scanner element to your page

In the Design tab, click the + icon and search for the scanner plugin's visual element. Drag it onto your page at a size of about 300x300px. Place it inside a Group you can show and hide so the camera only activates when the user clicks a Scan button.

> Pro tip: Hide the scanner by default and show it only when the user taps Scan to save battery and respect privacy.

**Expected result:** A camera preview element ready to scan QR codes.

### 3. Handle the scanned data

When the scanner decodes a QR code, it triggers the plugin's scan detected event. Create a workflow on this event. The decoded text is available as the scanner element's value. If it contains a URL, use Open external website. If it contains an ID, search your database for the matching record and display details or update status.

**Expected result:** Scanned QR data triggers the appropriate workflow action.

### 4. Build a check-in system

Create a Ticket Data Type with ticket_id (text), event (text), attendee (User), checked_in (yes/no), and check_in_time (date). When a QR is scanned, search for a Ticket where ticket_id equals the scanned value. If found and not checked in, set checked_in to yes and check_in_time to now. Show success or error feedback.

**Expected result:** Staff can scan QR codes to check attendees into events instantly.

### 5. Add visual feedback and error handling

After each scan, display a result message: green for success, red for invalid or already-used tickets. Add sound feedback using a JavaScript audio play action. Reset the scanner after each scan so it is ready for the next ticket. Add a scan history Repeating Group below the scanner showing recent check-ins.

**Expected result:** Clear visual and audio feedback for each scan result with a history log.

## Complete code example

File: `Workflow summary`

```text
QR SCANNER — WORKFLOW SUMMARY
==============================

DATA MODEL
  Ticket: ticket_id (text), event, attendee (User),
    checked_in (yes/no), check_in_time (date)

PAGE LAYOUT
  Button: Start Scan → Show scanner group
  Scanner Group (hidden by default)
  Result Text: success/error message
  RG: Recent check-ins

WORKFLOW: QR Scanned
  Trigger: Scanner scan detected
  Step 1: Search Ticket where ticket_id = scanned value
  Step 2 (found, not checked in):
    Make changes → checked_in = yes, check_in_time = now
    Show green success message
  Step 3 (already checked in):
    Show yellow already-used message
  Step 4 (not found):
    Show red invalid ticket message
  Step 5: Reset scanner for next scan
```

## Common mistakes

- **Leaving the camera active when not scanning** — Drains battery and concerns users about privacy. Fix: Show the scanner only when actively scanning and hide it after a successful scan.
- **Not validating scanned data before processing** — Random QR codes could contain unexpected data that breaks workflows. Fix: Always validate that scanned value matches your expected format before database operations.
- **Not providing feedback after scanning** — Users do not know if the scan succeeded or failed without visual confirmation. Fix: Show clear success/error messages with color coding after every scan.

## Best practices

- Hide the scanner until the user explicitly starts scanning
- Validate scanned data format before processing
- Provide clear visual and audio feedback for each scan
- Use the back camera by default for easier alignment
- Test on real mobile devices before launching
- Add a scan history log for staff reference

## Frequently asked questions

### Does QR scanning work on desktop?

It works with webcams but is optimized for mobile rear cameras.

### Can I scan barcodes too?

Many QR plugins also support barcode formats. Check the plugin documentation.

### How do I generate QR codes?

Use a QR generator plugin or call a QR API like goqr.me via the API Connector.

### Is there a free scanner plugin?

Some free options exist but paid plugins ($5-15/month) offer better reliability.

### Can RapidDev help build a QR-based system?

Yes. RapidDev builds QR systems for check-in, inventory, contactless menus, and authentication.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-qr-code-scanner-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-qr-code-scanner-in-bubble