Step 1 — Install and add the element Install the plugin from the Bubble marketplace. Drag the QR Scanner element onto your page. Set the width and height to at least 300x300px for a comfortable scanning area. Larger is better on mobile — 350x400px is recommended.

Step 2 — Add Start and Stop buttons
Add a Button labeled Start Scanner. In its workflow add Element Actions → Start Scanner. Add another Button labeled Stop Scanner. In its workflow add Element Actions → Stop Scanner. Optionally add a Reset button using Element Actions → Reset Scanner to clear all states.

Step 3 — Display the scanned value
Add a Text element and set its content to QR Scanner's scanned_value. This updates automatically every time a code is successfully scanned.

Step 4 — Configure the element
In the Appearance tab set the following:
- camera_facing: environment for back camera, user for front camera
- border_color: set your brand color for the corner brackets and scan line
- auto_open_urls: check this to automatically open scanned URLs in a new tab
- vibrate_on_scan: check this to vibrate the device on successful scan
- sound_on_scan: check this to play a beep sound on successful scan
- scan_cooldown: milliseconds before the same code can be scanned again. Default 2000
- success_message: custom text shown in the green banner on successful scan
- auto_start: check this to start the camera automatically when the page loads
- show_border: check this to show the purple corner bracket overlay

Step 5 — Use the code_scanned event
Add a workflow triggered by the QR Scanner code_scanned event. Use this to save the scanned value to your database, look up a record, check in a user, or trigger any action in your app.

Step 6 — Use exposed states
- scanned_value: the raw text or URL from the last successful scan
- scan_status: human readable status message
- is_scanning: yes when camera is active
- scan_count: total number of successful scans in the session
- scan_history: comma separated list of the last 20 scanned values

Step 7 — Camera on HTTPS
Camera scanning requires HTTPS. Bubble preview URLs use HTTP so camera permission will not appear in preview. Deploy your app to the live URL to test camera scanning on mobile. Image upload works on both HTTP and HTTPS so you can test that in preview.

Notes
- For best mobile scanning results set the element to at least 350x400px
- Back camera works best for QR codes and barcodes
- Front camera is useful for selfie-style or accessibility scenarios
- Scan cooldown default is 2000ms — reduce to 500ms for rapid sequential scanning
- Scan history resets when the page is refreshed