How to use Barcode Generate, Read, & Scan
This plugin includes barcode generation, barcode file saving, barcode reading from images, and live barcode scanning using the device camera.

1. Display a barcode on the page

Add the Barcode Display element to your page.

Set the Barcode Value field to a static value or dynamic Bubble value.

Set the Barcode Format field to one of the supported formats:
CODE128, CODE39, EAN13, UPC, or ITF.

The element will display the barcode directly on the page and expose states such as Barcode Value, Barcode Format, Is Valid, Error Message, Warning Message, and Barcode Image Data.


2. Generate barcode image data

Use the Generate Barcode Image Data workflow action when you want to generate barcode image data without saving the file.

This action returns a base64 PNG image data value that can be used for previews, temporary display, or workflow processing.

Required fields:
- Barcode Value
- Barcode Format

Optional styling fields:
- Line Color
- Background Color
- Width
- Height
- Margin
- Display Value Text
- Font Size


3. Generate and save barcode file

Use the Generate and Save Barcode File workflow action when you want to upload the generated barcode image to Bubble file storage.

This action returns:
- File URL
- Barcode Image Data
- Barcode Value
- Barcode Format
- Success
- Error Message
- Warning Message

For the Website Home URL field, pass Bubble’s dynamic Website home URL value.

The returned File URL can be saved to your database.


4. Read barcode from image

Add the Barcode Reader element to your page. The element can be visible or hidden.

Use the Read Barcode from Image element action and pass an image URL or Bubble file URL.

You can set Expected Format to AUTO or to a specific format:
AUTO, CODE128, CODE39, EAN13, UPC, or ITF.

After reading, the Barcode Reader element publishes:
- Barcode Value
- Barcode Format
- Success
- Error Message
- Raw Result
- Is Processing

Use the Barcode read event to trigger workflows after a successful read.


5. Scan barcode using device camera

Add the Barcode Scanner element to your page.

Use the Start Scanner action to start the camera scanner.

Set Expected Format to AUTO or to a specific format:
AUTO, CODE128, CODE39, EAN13, UPC, or ITF.

Set Camera Facing Mode:
- environment = rear/back camera, recommended for mobile barcode scanning
- user = front camera or desktop webcam

When a barcode is scanned, the Barcode Scanner element publishes:
- Scanned Value
- Scanned Format
- Success
- Error Message
- Raw Result
- Is Scanning

Use the Barcode scanned event to save the scanned value to your database or trigger another workflow.

Example workflow:
When Barcode Scanner's Barcode scanned event happens
→ Create a new Thing
→ Barcode Value = Barcode Scanner's Scanned Value
→ Barcode Format = Barcode Scanner's Scanned Format
→ Date = Current date/time


6. Preventing duplicate scans

To prevent duplicate database records, the scanner ignores the same barcode value while the scanner session is active.

If you need to scan and save the same barcode again, stop or restart the scanner, then scan it again.


7. Format mismatch behavior

If Expected Format is set to a specific format and the scanner detects a different barcode format, the plugin will publish a format mismatch error message and will not trigger the Barcode scanned event.

Example:
Expected Format = CODE128
Detected Format = ITF

The scanner will show an error message and will not trigger the Barcode scanned event, so it will not save the scan unless your app has a separate error-handling workflow.


8. Supported barcode formats

Supported formats:
- CODE128
- CODE39
- EAN13
- UPC
- ITF

Recommended usage:
- CODE128: best for general text, IDs, order numbers, and dynamic values
- CODE39: best for uppercase letters, numbers, and simple inventory codes
- EAN13: best for 13-digit product barcodes
- UPC: best for 12-digit UPC-A product barcodes
- ITF: best for numeric-only values, commonly used for logistics and packaging


9. Notes

Barcode scanning requires camera permission from the user.

Camera scanning works best on HTTPS pages.

For best scan accuracy, use clear barcode images with good contrast and no blur.

AUTO format detection works well for most cases, but if you know the barcode type, selecting a specific expected format can improve accuracy.

For UPC barcodes, use Expected Format = UPC for best accuracy. Some barcode readers may classify UPC-A as EAN13 in AUTO mode because UPC-A can be represented as EAN13 with a leading zero.