Demo to preview the settings
Introduction
Looking to generate an unique branded QR code? Look no further! This no-code plugin can do it all.
Create your own distinctive branded QR code with a range of customizable options.
The options are:
- Adjust the main background color, pattern, or squares to your preference.
- Incorporate your logo at the center, either as the background or overlaid on the QR code, or combine both options.
- Experience the unique feature of ""Bubble"" and ""Live Preview"" within the app editor. Witness all changes in real-time without needing to refresh the page.
- Enjoy seamless QR code generation with cross-browser support, utilizing HTML5 Canvas and Table.
- Modify the size of the pattern's dots to suit your needs.
- Utilize the Padding Zone to add spacing around the QR code.
- Customize the inner fill and outer border color of the Position Pattern.
- Personalize the inner fill and outer border color of the Alignment Pattern.
- Choose the vertical and horizontal color of the Timing Patterns.
- Include your own logo images, even transparent PNG images.
- Apply a Background Image of your choice.
- Easily change the main background and pattern colors.
- The maximum supported characters for the QR code is 194.
- Save your customized QR code in base64 format or download it as a PNG file.
- Set error correction to ensure accurate data transmission, even for large amounts of data.
Plugin Element Properties
The plugin contains a Branded QR visual element that should be used on a page.
Element Fields:
Title | Description | Type |
Autorun | Run from workflow or on page load | yes / no |
Text | Any text, can be url. Should not be empty! | text |
Width | number | |
Height | number | |
Padding | number | |
Background color | color | |
Dots color | color | |
Dots scale | Must be greater than 0, less than or equal to 1. default is 1 | number |
Error Correction | L - 7%, M - 15%, Q - 25%, H - 30%. Raising this level improves error correction capability but also increases the amount of data QR Code size. Select L for large amount of data, and H for small amount. Read more about it here: https://www.qrcode.com/en/about/error_correction.html | dropdown(choices - L,M,Q,H) |
===== Squares colors ===== | ||
Top left Outer | Top left square border color | color |
Top left Inner | Top left square color | color |
Top right Outer | Top right square border color | color |
Top right Inner | Top right square color | color |
Bottom left Outer | Bottom left square border color | color |
Bottom left Inner | Bottom left square color | color |
Bottom right Outer | Bottom right square border color (this element is named "Alignment") | color |
Bottom right Inner | Bottom right square color (this element is named "Alignment") | color |
===== Timing indicator colors ===== | ||
Horizontal color | Horizontal line of special dots. Change the color to see an example. | color |
Vertical color | Vertical line of special dots. Change the color to see an example. | color |
===== Logo ===== | ||
Logo | image | |
Logo width | number | |
Logo height | number | |
Transparent logo | Whether use transparent image | yes/no |
===== Background ===== | ||
*Make sure that it is something simple and with enough transparency so the qr code remains readable | ||
Background image | image | |
Background transparency | Background image transparency, value between 0 and 1. default is 0.2. | number |
Background autocolor | Automatic color adjustment | yes/no |
Editor Element Preview: | ||
Show Live PREVIEW | See instant result in the plugin element in your app editor | checkbox |
Page element: | ||
Show generated QR in element | Show generated QR Code in the plugin element if yes. Otherwise the element will be empty and the QR Code is available in the state "QR code Base64" format and can be shown in an image element. | checkbox |
Element Actions
1.Generate QR - generates the QR code
2.Download QR Code - downloads the QR code
Title | Description |
File name | The name for the downloaded file |
Element Events
Name | Description |
QR code is ready | This event is triggered when the QR code generation process has been completed, and the QR code image is ready for use. |
Element States
Name | Description | Type |
QR code Base64 | Contains the QR code image in base64 format. | text |
is initialized | Indicates whether the element was initialized or not. | yes/no |
Workflow example
- Add the visual element to the page and adjust the desired settings
- Set an event to use the Generate QR action
- Set an event to use the Download QR Code action
- Use the QR code is ready event to trigger actions
- Or save the created QR code to the database
Note: The element supports generating a QR Code through the Generate QR action or automatically on element initialization (set "yes" for the Autorun field).
Don't overcomplicate the QR code with too bright a background image, too tiny a pattern or a logo that covers too much. Test it with a QR reader before going to production.
