Skip to content

QR Code reader

In WeWeb, you can find the QR code reader element in the Add menu:

QR code reader

This element comes with 2 in-built variables:

  1. QR Code Reader - cameras
  2. QR Code Reader – code

QR code reader variables

Selecting a Camera

The QR Code Reader - cameras lists all the cameras found on the device that is accessing the app.

By default, the element will activate the user's default camera but you can choose to reference another camera by typing in its name:

QR code reader camera

TIP

By combining the select and the QR code reader elements, you can create a great UX where users have the option to choose the camera they want to use to scan a QR code.

In the example below, you can see we bound the list of cameras found by the QR code reader to a select element:

QR code reader selected camera

We were then able to bind the "Camera name" of the QR code reader to the component variable of the select element:

QR code reader selected camera

Scanning a QR code

Once the user scans a QR code with the camera of their choice, the QR Code Reader – code will be updated with the value referenced by the QR code, for example a URL.

In the example below, you can see we scanned a QR code that referenced WeWeb's Twitter account:

QR code result

On scan workflow

Note that the QR code reader element comes with a pre-built workflow with a trigger On scan:

QR code reader workflow

This workflow stores the event of the scan in a Scan result text variable in the QR code component folder.

You could use bind this variable to other elements in your app. For example, a modal asking the user for confirmation they want to navigate to the URL suggested by the QR code:

Popup after QR code reading