We have developed a plugin that allows you to generate, display, and download custom QR codes in Bubble.
With this plugin, you can customize colors and background transparency, and export QR codes in PNG or SVG format.
In this article, we will explain the features of this plugin and how to implement it in your QR code app.
Plugin Page
The “Transparent QR Code Generator” can be installed from the following link:
Transparent QR Code Generator Plugin page on Bubble. Use thi…
Features
✅ Set custom QR code and background colors
✅ Option to make the background transparent
✅ Display QR codes dynamically on the screen (Element)
✅ Generate QR codes as PNG files (Action)
✅ Generate QR codes as SVG files (Action)
✅ Download QR codes as PNG files (Action)
With these features, you can create a variety of custom QR code applications, such as:
- Original QR Code Generator Tools
- Adding Custom QR Codes to Business Cards
- Generating QR Codes for Events and Promotions
- Saving QR Codes in SVG Format for Printing and Design Use
How to Use
This plugin has two main functionalities: Element and Action.
Display QR Code on Screen (Element)
This feature allows you to dynamically display QR codes by placing an element in the editor.
Steps to Implement:
1.Add the “QR Code Generator” element to the page in the Bubble editor.
2.Configure the fields as follows:
| Field Name | Description |
|---|---|
| URL | The URL to convert into a QR code. |
| QRcode color | The color of the QR code lines. |
| Background color | The background color of the QR code. |
| Background Transparent | When checked, the background color is disabled, making it transparent. |
3.The QR code will be displayed in real-time based on these settings.
Download QR Code as PNG (Action)
This feature allows users to download the QR code as a PNG file.
Steps to Implement:
1.Add the “Download QR Code” action to a workflow.
2.Configure the fields as follows:
| Field Name | Description |
|---|---|
| File name | The file name for the downloaded QR code. |
| URL | The URL to convert into a QR code. |
| Size | The size of the QR code (px). |
| QRcode color | The color of the QR code lines. |
| Background color | The background color of the QR code. |
| Background Transparent | When checked, the background color is disabled, making it transparent. |
3.When the user triggers the action, the QR code will be downloaded.
Generate QR Code as PNG (Action)
This feature allows you to generate a QR code in PNG format for further use in workflows.
Steps to Implement:
1.Add the “Generate QR Code (PNG)” action to a workflow.
2.Configure the fields as follows:
| Field Name | Description |
|---|---|
| URL | The URL to convert into a QR code. |
| Size | The size of the QR code (px). |
| QRcode color | The color of the QR code lines. |
| Background color | The background color of the QR code. |
| Background Transparent | When checked, the background color is disabled, making it transparent. |
3.Once executed, the QR code will be generated in PNG format.
Generate QR Code as SVG (Action)
This feature allows you to generate a QR code in SVG format for further use in workflows.
Steps to Implement:
1.Add the “Generate QR Code (SVG)” action to a workflow.
2.Configure the fields as follows:
| Field Name | Description |
|---|---|
| URL | The URL to convert into a QR code. |
| Size | The size of the QR code (px). |
| QRcode color | The color of the QR code lines. |
| Background color | The background color of the QR code. |
| Background Transparent | When checked, the background color is disabled, making it transparent. |
3.Once executed, the QR code will be generated in SVG format.
Conclusion
With this plugin, you can easily create, manage, and download customizable QR codes in Bubble!
Enhance your app by adding QR code functionality and improving user experience.
Try out the “Transparent QR Code Generator” today and make your Bubble app even more powerful!