Custom QR code Generator

Demo to preview the plugin:

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.
Image without caption
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
Image without caption
2.Download QR Code - downloads the QR code
Image without caption
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

  1. Add the visual element to the page and adjust the desired settings
Image without caption
  1. Set an event to use the Generate QR action
Image without caption
  1. Set an event to use the Download QR Code action
Image without caption
  1. Use the QR code is ready event to trigger actions
Image without caption
  1. Or save the created QR code to the database
Image without caption
โ˜
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.

Changelogs