Introduction
The QR Code component allows users to display links, bookmarks, text, emails, phone numbers, SMS/MMS, maps, WiFi access, PayPal payments, contacts, and other information in the form of a QR code on display devices.
The component provides multiple properties to customize the appearance and behavior of the QR code.
Frame Block
The Frame attributes of the QR Code component are the same as those of the Rect component. For details, see the Rect component’s Frame section.
Properties Block
The Properties of the QR Code component inherit the basic properties of the Rect component. For details, see the Rect component’s Properties section.
Additional Properties
Property Name | Property Type | Description |
Value | String String | The QR Code content, as URL or string content (we support: mailto, WIFI, sms, tel, etc). The content of the QR code, such as a URL or string (supports |
Positive Color | String String | The color of the QR code content. Note that inverted QR codes may not be readable on some devices. The color of the QR code content. ⚠ Note: Inverted QR codes may not be scannable on some devices. |
Negative Color | String String | The background color of the QR code. Note that the negative color is different from the background color of the QR Code Brick. The border settings do not apply to the negative color. The background color of the QR code. This differs from the Background Color of the QR Code brick. Border settings do not affect the negative color. To create a QR code with rounded corners and a styled border, use Background Color instead. |
Quiet Zone | Number Number | The margin (in pixels) around the QR code. It is recommended that there is some spacing around the QR code for devices to scan more easily. The margin around the QR code (in pixels). It is recommended to keep spacing so scanners can read the code more easily. |
Logo Block
Property Name | Property Type | Description |
Path | String String | The image source of the logo. The file path of the logo image (can use files uploaded to Media Box). |
Size | Number (between 0 and 100) Number (between 0 and 100) | The ratio (in percentage) of the logo to the QR code. The ratio (percentage) of the logo size relative to the QR code. |
Background Color | String String | The logo's background color, specified in HEX, RGBA, or HSLA. Background color of the logo. HEX, RGBA, or HSLA values are supported, including semi-transparent backgrounds. |
Margin | Number Number | The distance between the logo to its wrapper. The distance between the logo and its wrapper. |
Linear Gradient Block
Property Name | Property Type | Description |
Enabled | Boolean Boolean (Yes/No) | To specify whether the linear gradient properties will apply. Enable or disable linear gradient coloring for the QR code. |
Start | String String | The first color on the gradient line. The starting color of the gradient. |
End | String String | The last color on the gradient line. The ending color of the gradient. |
Direction | Array Of Array of String ( | The linear gradient direction.
x1: the x coordinate of the starting point of the gradient. y1: the y coordinate of the starting point of the gradient. x2: the x coordinate of the ending point of the gradient. y2: the y coordinate of the ending point of the gradient.
These values can be numbers between 0 and 1 or percentages. Defines the direction of the gradient. |
Properties – Border Block
The border attributes are the same as those of the Rect component. For details, see the Rect component’s Border section.
Animations Block
The animation event attributes are the same as those of the Rect component. For details, see the Rect component’s Animation section.
Events Block
The event attributes are the same as those of the Rect component. For details, see the Rect component’s Event section.