Generating QR codes in Bubble can be done through a free QR code API or a dedicated plugin. This tutorial covers using the QRServer API via the API Connector to generate QR codes from any text or URL, displaying the generated QR image in your app, creating downloadable and printable QR codes, and building a bulk QR code generator for multiple items like products or event tickets.
Overview: QR Code Generator in Bubble
This tutorial shows you how to add QR code generation to your Bubble app. You will use a free API to create QR codes from any text, URL, or data, and display them in your app for users to download, print, or scan.
Prerequisites
- A Bubble app on any plan
- Basic understanding of the API Connector plugin
- Familiarity with Bubble's Design tab and Image elements
- Data to encode in QR codes (URLs, text, or product IDs)
Step-by-step guide
Set up the QR code API in the API Connector
Set up the QR code API in the API Connector
Install the API Connector plugin if not already installed. Add a new API called 'QR Code Generator'. Add a GET call named 'Generate QR'. Set the URL to: https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=[text_to_encode]. Make 'text_to_encode' a dynamic parameter by using brackets. Set 'Use as' to Data. No authentication is needed — this is a free public API. Initialize the call with a test value like 'https://example.com'. The response is a PNG image, so set the response type accordingly.
Pro tip: You can customize the QR code size by changing the size parameter. Common sizes: 150x150 for thumbnails, 300x300 for standard display, 500x500 for high-quality print.
Expected result: The API Connector is configured to generate QR codes from any text input.
Display QR codes dynamically in your app
Display QR codes dynamically in your app
Instead of using the API Connector for simple QR codes, you can use the QRServer URL directly as an Image source. Add an Image element and set its dynamic source to a constructed URL. Use the :append operator to build the URL dynamically: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=' :append with the value you want to encode. For product pages, encode the product URL. For event tickets, encode the ticket ID. The QR code image generates on the fly and displays in the Image element.
Expected result: QR codes display dynamically in your app, generated from any data in your database.
Add download and print functionality
Add download and print functionality
For downloading, add a Button labeled 'Download QR Code'. In the workflow, use the Open an external website action targeting the same QR API URL with a download parameter added. The user's browser will download the PNG file. For printing, add a 'Print QR Code' button. Use an HTML element with a JavaScript print function that opens a new window containing just the QR image and triggers window.print(). You can also use the Bubble PDF plugin to include the QR code in a printable document alongside other information.
Expected result: Users can download QR codes as PNG images and print them directly from the app.
Build a bulk QR code generator
Build a bulk QR code generator
For generating QR codes for many items (all products, all event tickets), create a page with a Repeating Group showing your items. In each cell, display the item name alongside its QR code image using the dynamic URL approach. Add a 'Generate All' button that opens a print-friendly page showing all QR codes in a grid layout suitable for label printing. Each QR code should include the item name below it for identification. Use a Repeating Group with a grid layout optimized for standard label sheet dimensions (like Avery labels).
Expected result: Users can view and print QR codes for multiple items at once in a label-ready format.
Customize QR code appearance
Customize QR code appearance
The QRServer API supports customization parameters. Add color parameters: &color=000000 for the QR code color and &bgcolor=ffffff for the background color (hex values without #). Add &format=png for PNG output or &format=svg for scalable vector format. For branding, use &qzone=2 to add quiet zone padding. To add a logo overlay, generate the QR code at a larger size, then overlay your logo image centered on top using Bubble's positioning — QR codes have built-in error correction that allows up to 30% of the code to be obscured.
Expected result: QR codes are customized with your brand colors and optional logo overlay.
Complete working example
1{2 "API_CONFIGURATION": {3 "name": "QR Code Generator",4 "base_url": "https://api.qrserver.com/v1/create-qr-code/",5 "auth": "None (free API)"6 },7 "PARAMETERS": {8 "size": "300x300",9 "data": "[dynamic_value_to_encode]",10 "color": "000000",11 "bgcolor": "ffffff",12 "format": "png",13 "qzone": "2"14 },15 "EXAMPLE_URLS": {16 "basic": "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://yourapp.com/product/123",17 "colored": "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=TICKET-001&color=1a56db&bgcolor=ffffff",18 "high_res": "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=https://yourapp.com&format=png"19 },20 "USE_CASES": {21 "product_pages": "Encode product URL for quick mobile access",22 "event_tickets": "Encode ticket ID for entry scanning",23 "restaurant_menus": "Encode menu page URL for table QR",24 "business_cards": "Encode vCard data with contact info",25 "wifi_sharing": "Encode WIFI:T:WPA;S:network;P:password;;"26 },27 "SIZE_GUIDE": {28 "thumbnail": "150x150",29 "standard": "300x300",30 "print_quality": "500x500",31 "poster": "1000x1000"32 }33}Common mistakes when adding a QR Code Generator in Bubble
Why it's a problem: Not URL-encoding the data parameter
How to avoid: Use Bubble's :encoded as URL format operator on the data before appending it to the API URL
Why it's a problem: Generating QR codes at too small a size for print
How to avoid: Use at least 300x300 for screen display and 500x500 or larger for printed materials
Why it's a problem: Encoding full page URLs that may change
How to avoid: Encode a permanent short URL or unique ID that you can redirect server-side if the destination changes
Best practices
- Use a stable URL or ID that will not change for printed QR codes
- URL-encode the data parameter to handle special characters
- Generate at 300x300 minimum for reliable scanning
- Add error correction redundancy for QR codes with logo overlays
- Test QR codes with multiple scanning apps before distribution
- Include a human-readable label alongside QR codes for identification
- Cache generated QR images to reduce API calls for frequently accessed codes
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a QR code generator to my Bubble.io app that creates QR codes from product URLs. How do I use a free QR API and display the codes dynamically?
Help me add QR codes to my product pages. Each product should display a QR code that links to the product URL, and users should be able to download or print the QR code.
Frequently asked questions
Is the QRServer API free?
Yes. The QRServer API is free for reasonable usage with no API key required. For high-volume applications, consider their paid plans or self-hosting a QR library.
What data can I encode in a QR code?
Any text, URL, email address, phone number, WiFi credentials, vCard contact data, or custom identifiers. Maximum data capacity is about 4,296 alphanumeric characters.
Can I customize the QR code colors?
Yes. The QRServer API accepts color and bgcolor parameters in hex format. Ensure sufficient contrast between colors for reliable scanning.
Do QR codes expire?
QR codes themselves do not expire — they encode static data. However, if the encoded URL points to a page that is removed, the QR code will lead to a broken link.
Can I add my logo to the QR code?
Yes. Generate the QR code at a larger size and overlay a small logo (max 30% of QR area) centered on top. QR error correction allows partial obstruction.
Can RapidDev help implement QR features?
Yes. RapidDev can build QR code generation and scanning systems for Bubble apps including ticketing, inventory management, and contactless experiences.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation