➡️ Instructions
To start using the plugin, follow the steps described below:

    👉 Create a "Shape" element on your page. You can leave the size of it as you wish, but as we are talking about QR Code, it is good that this element has the same size in width and height. Then define an "ID Attribute" value for that element.

    👉 After creating your "Shape" element, now create on your page in "QR Code - Styling" element. This element is responsible for configuring our entire plugin. In your settings tab you must enter the following fields:

         ● Element ID: Set here the value of the "ID Attribute" of the "Shape" element created in the first step.
         ● Link: Set the target value of your QR Code here. Where the user should be forwarded when reading the QR Code.
         ● Image File: Define here the image that will be in the center of your QR Code. If you don't want an image in the center, leave this field empty.
         ● Background: Set the background color of your QR Code here. If you want it without background, leave this field empty. Remember that depending on the type of file, the option without background may not work, especially in the JPEG type.
         ● Margin: Define here the margin that your QR Code will contain away from the edges of your "Shape" element. This distance will also be maintained when you generate the QR Code image.
         ● Dots Style: Set here the style of the "Dots" of your QR Code. You can choose between 5 options, they are: Square, Dots, Rounded, Extra Rounded, Classy, ​​Classy Rounded
         ● Dots Color: Set here the color of the "Dots" of your QR Code.
         ● Corners Square Style: Set here the "Corners Square" style of your QR Code. You can choose between 3 options, they are: Dots, Square, Extra Rounded
         ● Corners Square Color: Set here the color of the "Corners Square" of your QR Code.
         ● Corners Dots Style: Set here the "Corners Dots" style of your QR Code. You can choose between 2 options, they are: Dots, Square
         ● Corners Dots Color: Set here the color of the "Corners Dots" of your QR Code.

    👉 After configuring all the fields of the "QR Code - Styling" element the way you want your plugin will be ready to be used.

➡️ States

When the "QR Code - Styling" element is inserted in your page, it has two states, they are:

    👉 QR Code: This state you will use to download the QR Code to your computer. It enters as the value of the "QR Code - Styling (Download)" event that can be called in your application's Workflow.

    👉 QR Code - URL Bubble: This state stores the URL of the QR Code that was generated in your "File manager".

➡️ Events

The plugin contains 3 Events that can be called, they are:

    👉 QR Code - Styling (Download): This event downloads the QR Code to your computer. It can be called in your Workflows and when called you will need to inform 3 fields for it. Are they:
         ● File name: Define here the name of the file that will be generated.
         ● QR Code: Define here the "QR Code" state of the "QR Code - Styling" element that is on your page.
         ● File type: Define here the type of file to be generated. The plugin supports 4 types: png, jpeg, webp, svg

    👉 Upload to Bubble: This event uploads the QR Code to the "File manager" of your Bubble app. It can be called in your Workflows and when called you will need to inform 2 fields for it. Are they:
         ● File name: Define here the name of the file that will be generated.
         ● File type: Define here the type of file to be generated. The plugin supports 4 types: png, jpeg, webp, svg
Whenever the upload is completed the "QR Code - Upload to Bubble (Complete)" event is called. Use this event to store the URL of the generated file in your database or for a specific use case.

    👉 QR Code - Upload to Bubble (Complete): This event always runs when the "Upload to Bubble" event is completed. Use this event to store the URL of the generated file in your database or for a specific use case.