===== Web App Setup =====
Display a QR Code
1. Install the plugin.
2. Add the QR Code Display element to the page.
3. Set Text to encode to a static value or dynamic Bubble value.
4. Configure the size, foreground color, and background color.
5. Preview the app to display the QR code.


Generate QR Code Image Data
- Use the Generate QR Code Image workflow action when you need QR code image data without placing the display element on the page.

Set:
- Text to encode: The text, URL, or dynamic value
- Size: Recommended default is 300
- Foreground color: Example: #000000
- Background color: Example: #ffffff

Generate and Save a QR Code File
- Use the Generate and Save QR Code File workflow action to create a PNG file and upload it to Bubble file storage.

The action returns:
QR Code File
QR Code Data URI
QR Code Base64

The returned file can be saved to a Bubble image or file field.

===== Native Mobile Setup =====

Add the Mobile Element
1. Open the Mobile App editor.
2. Add the QR Code Display – Mobile element to the current view.
3. Keep the element present and visible when running its element actions.

The element can generate a QR code directly from its fields or through a mobile workflow action.

Generate and Display from a Workflow
1. Add a text input and a button.
2. Create a workflow for the button.
3. Select the mobile QR element’s Generate and Display action.
4. Set Text to encode to the text input’s value.
5. Configure the size and colors.
6. Run the app and tap the button.

The QR code will update using the value provided by the workflow.

Generate, Save, and Upload
1. Create a workflow for the save button.
2. Select the mobile QR element’s Generate and Save action.
3. Set the following fields:
- Text to encode: The input’s value
- Size: Recommended default is 300
- Foreground color: Example: #000000
- Background color: Example: #ffffff
- File name: Example: qr-code.png
- Website Home URL: Bubble’s dynamic Website home URL
4. Use the QR Code Saved event to continue the workflow after the upload finishes.
5. Use the QR Code Save Failed event to handle errors.

Available Mobile States
Generated QR Value — The exact value encoded in the latest QR code
Generated Image Data — The generated PNG image as a Base64 data URI
Saved Image — The uploaded Bubble image
Saved File URL — The clean hosted URL of the uploaded PNG
Is Saving — Returns yes while the save process is running
Save Error — Contains the latest save error message

Saving to the Database
- Under the QR Code Saved event, create or modify a database record:

QRCodeValue =
QR Code Display – Mobile's Generated QR Value

QRCodeImage =
QR Code Display – Mobile's Saved Image

QRCodeImageFileURL =
QR Code Display – Mobile's Saved File URL

Use an image field for Saved Image and a text field for Saved File URL.

Recommended Settings

For reliable scanning:
- Use a dark foreground and light background
- Use at least 150–200 px for short text or URLs
- Use 250–300 px for Wi-Fi details or vCards
- Use 300–400 px for longer text
- Avoid low-contrast or transparent color combinations

Native Mobile Testing
- Test native functionality using Bubble’s mobile preview and, before publishing your app, verify it in BubbleGo or a native test build.