The QR Code Scanner component enables your customers to scan QR codes directly from your Interactive Content Experiences. By using this QR Code Scanner you can connect your physical stores, conferences, or even personalized gift products with your Interactive Content. The type of Interactive Content you can create varies greatly and includes Marketing Games, personalized content, scan & win draws, etc.
A QR Code Scanner allows your customers to scan a QR code, which directs them to one of your pages, holding valuable information for them. The main advantage of using Dot.vu’s QR Code Scanner component integrated into your Interactive Content is that your clients will not need to ever exit your Interactive Content Experience to scan a QR code. The component will use your customer device’s camera and once it has scanned a valid QR code it will make the QR code’s data available in data fields. This all happens without refreshing or switching apps.
How to Add the Component
To start using the QR Code Scanner component you need to first add it to your project. To do so, follow the steps below:
- Go to the Building Blocks and search for “QR Code Scanner”
- Drag it to the canvas, wherever you want to place it
- Set its size by using the Container Style
- Double click it to configure it
How to configure what data to scan
The QR Code Scanner component can scan multiple data from a single QR code. You could, for instance, have a QR code printed on a personalized gift that contains: a name, product, and personalized message. You then want to use the QR Code Scanner component to scan the QR code and print the name, message, and product in your Interactive Content Experience. To do this you need to define what it is that you expect to receive. To do so, you need to follow these steps:
- Go to the QR Code Scanner component settings
- Go to the “Data Fields” section
- Add as many data fields as you wish
Please note that when naming data fields, you cannot use spaces and it is also not possible to have two data fields with the same name.
How to generate Compatible QR Codes
In order for the QR Code Scanner component to read multiple data from the QR code, the QR code needs to be generated with a format the QR Code Scanner component can read. To generate a compatible QR code, go to the component settings and click on “Generate QR Code”.
Once you are on the QR Code Settings you will see three sections:
- Data Fields Content: In this section, you define what the data is that the QR code should have. For example, it could be:
- Name: “Dear friend John Doe”
- Product: “Laptop”
- Personalized message: “Hi John, I hope you like this laptop. I wish you a happy birthday!”
- QR Code Content Preview: This contains the QR code’s content in plain text. You can use this generated text to use your own tool for creating QR codes. When creating a QR code in an external tool, please remember to select “Plain Text” as the QR code format and then paste the content given in this text box.
- QR Code Preview: This section contains a QR code image you can save and print.
Use the QR Code Generator Setting to generate as many QR codes as you wish to.
Actions
Starts the camera and stars scanning QR codes.
Stops scanning for QR codes and stops the camera.
Data Fields
State of the QR Code Scanner Component. The Component can be in any of these states:
- Idle: The Component is stopped and waiting to get started (using the Start Action).
- Loading: The Component is asking permission to use the camera and initializing the device’s camera for scanning QR Codes.
- Scanning: The Component is scanning for QR Codes. You can stop scanning by using the Stop Action
If the components failed to start, this data field will contain the reason why.
A QR Code Data data field will be created for each data field you add. Continuing with personalised gift example, the component will have the data fields:
- QR Code Data: Name
- QR Code Data: Product
- QR Code Data: Personalised message
These data fields will be set with the content of the last scanned QR Code
Triggers
Triggers whenever the component has started scanning.
Triggers whenever the component has stopped scanning. The component can stop scanning by multiple reasons:
- It scanned a valid QR Code.
- It scanned an invalid QR Code.
- The Stop Action was exectuted.
- The customer blocked permission to the camera.
Triggered whenever the component scanned a valid QR Code. When this triggers, the QR Code data is already set with the contents from the QR Code.
Triggers whenever the component scanned a QR code but its contents are not formatted correctly. This can happen when a customer scans a QR code which was not created to work with the QR Code Scanner component.
Triggers after a Start Action is executed but because of an issue, the camera was not able to start. The main causes for this to happen are:
- The customer did not give permission to use the camera.
- The customer’s device does not have a camera.
- The customer’s browser does not have access or does not support using the device’s camera.
When this triggers the error data field will contain the reason why the component failed to start. You can use the error data field to display the error to your client.