Using the QR Code building block

The QR Code allows you to quickly generate a QR Code Image for an URL.

You can use it to quickly drive your audience to a Mechanic participation or any landing page.

Best Practices for using a QR Code

  • If you use a short URL, the final QR Code will be simpler and much easier to scan. You can use a URL Shortener service like bit.ly to increase legibility of your QR Codes.
  • Keep a good contrast between the QR foreground and background colors. This will also help with legibility.
  • Leave an empty area around the QR Code. This will let the QR Scanner recognize easier the code.
  • Always test the QR Codes you add to your Graphics, ideally under the expected scenarios.

Properties

Use the Inspector‍, right-sidebar, to customize the QR Code:

QR Settings


URL: Type in the URL you want your QR Code to drive your audience to

Foreground Color: You may change the foreground color of your QR Code

Background Color: You may change or leave transparent the background color of your QR Code

Position and Size

Position: Change the QR Code position inside the Canvas according to the X and Y axis (in percentage relative to the configured screen resolution). 

Size: Change the QR Code size inside the Canvas according to its width and height (in percentage relative to the configured screen resolution).  

Appearance

Opacity: Set the transparency percentage of the QR Code

Borders

Style: Defines the sides and style of the border.

Width: Defines how wide the border will be.

Color: Choose a color for the border.

Radius: Increasing this number will round the corners of the rectangle.

Learn how to change these properties specific to borders by clicking here‍.


Control from the Remote

The URL Property can be exposed to the remote in order to allow an operator to update it. This will directly change the image at the output pointing to the new URL on it (1).


Was this article helpful?