Plugins
Templates
Template Setup Guides

QR & Bar Code Reader Plugin

Link to plugin page: https://zeroqode.com/plugin/qr--bar-code-reader-1530097456687x249120198975291400

Introduction

This plugin enables smooth and seamless QR and Bar code reading functionality in your Bubble app. For a better quality of scanning please make sure there is sufficient lighting in the room and QR/Barcodes are of good quality.

Please note that on iOS devices the plugin works only in Safari browser.

Visual Elements

The plugin has 2 elements:

QR & Barcode Reader

This is element is used to scan QR or Barcode formats. Supports reading the following formats:

QRCode, Code128, Code 93, Code39, Code39 vin, EAN, EAN-8, Codebar, UPC, UPC-E, i2OF5, 2OF5

GenerateQR

This is element is used to generate a QR formatted image from inputted values. The width and height of the generated QR can be customized in action.

Installation

Place the elements on page in order to access plugin's actions and states. Configure the element proprieties and actions in the application. Get result.

Element 1. QR & Barcode Reader

Proprieties

  • Show Location Showing a box around detected barcodes, if bar-code was read successfully, a line in the middle will appear. This may slowdown processing time.

  • Barcode Type

Choose a type of reader type. Auto provides Auto detection.

If choosing auto there are possible clashes, or false-positives. Also in auto mode QR code is not possible to detect, so if you work with QR, select the respective scanner type instead of Auto.

  • Frequency

Controls the scan-frequency of the video-stream. Defines the maximum number of scans per second. By default is 10.

  • Camera Mode

Camera to use, frontal('selfie') camera or back camera of the device.

  • Successful detection sound

Sound to play at successful detection.

For iOS you have to touch the page anywhere at least once to activate sound auto playing, otherwise the sound will be blocked.

Plugin States

Result Format Result Code Result Image

QRcode Reader does not return result image.

Actions

Start live Decoder - Can be triggered anywhere, on button click or page load

Element 2. GenerateQR

Actions

Generate QR code - Generates new QR code

Settings:

  • Generated Image Size (Set the Width and Height of final generated image)

  • Text (Input data to encode QR code)

Plugin States

Generated Image: Generated QR code in base64 format. Can be downloaded or uploaded anywhere or shown as image on page.

Demo to preview the settings