How to Integrate a QR Code Generator in Wix Using Velo
- Wix Crafters
- Apr 26
- 3 min read
🎯 Introduction
QR codes have become a vital tool for businesses in 2025. They offer a quick and easy way for customers to access information, products, or services with a simple scan. Whether you run a restaurant, an online store, or organize events, QR codes can enhance user experience and engagement. For example, restaurants use QR codes for digital menus, product pages link directly to detailed descriptions, business cards share contact info instantly, event tickets verify entry, and payment links speed up transactions.
This post will guide you through building a free, fully functional QR code generator inside your Wix website using Velo. You will learn how to let users type any text or URL, generate a QR code instantly, and download the image—all without needing paid APIs or complex setups.
📦 Step 1 — The Free API We Use
To generate QR codes, we use the QR Server API available at `api.qrserver.com`. This API is completely free and requires no signup or API key. You simply pass the text or URL as a parameter, and it returns a QR code image.
The API supports customization like size and format. For example, to generate a 300x300 QR code for the text "Hello World", the URL looks like this:
```
```
This simplicity makes it perfect for Wix Velo projects where you want quick results without extra costs.
💻 Step 2 — Add UI Elements in Wix Editor
Open your Wix Editor (Studio or Classic) with Dev Mode enabled. Add the following elements to your page and assign these IDs:
Text input field with ID `#qrInput` — where users type the text or URL.
Button with ID `#generateBtn` — triggers QR code generation.
Image element with ID `#qrImage` — displays the generated QR code.
Button with ID `#downloadBtn` — allows users to download the QR code image.
Text element with ID `#statusText` — shows messages like success or errors.
Arrange these elements clearly so users can easily interact with the generator.
🖥️ Step 3 — The Velo Code
Add this code to your page’s code section:
```javascript
$w.onReady(() => {
// Hide QR image and download button initially
$w('#qrImage').hide();
$w('#downloadBtn').hide();
$w('#statusText').text = '';
});
$w('#generateBtn').onClick(() => {
const userInput = $w('#qrInput').value.trim();
if (!userInput) {
$w('#statusText').text = 'Please enter text or URL to generate QR code.';
$w('#qrImage').hide();
$w('#downloadBtn').hide();
return;
}
// Encode user input for URL
const encodedInput = encodeURIComponent(userInput);
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodedInput}&size=300x300`;
// Show loading message
$w('#statusText').text = 'Generating QR code...';
// Set image source to API URL
$w('#qrImage').src = qrUrl;
// Show image and download button after image loads
$w('#qrImage').onLoad(() => {
$w('#qrImage').show();
$w('#downloadBtn').show();
$w('#statusText').text = 'QR code generated successfully!';
});
});
$w('#downloadBtn').onClick(async () => {
const imageUrl = $w('#qrImage').src;
try {
const response = await fetch(imageUrl);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
// Create a temporary link to trigger download
const a = document.createElement('a');
a.href = url;
a.download = 'qrcode.png';
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
} catch (error) {
$w('#statusText').text = 'Failed to download QR code. Please try again.';
}
});
```
This code handles user input validation, generates the QR code by calling the API, updates the UI, and manages the download process.
🎨 Step 4 — Style the QR Display
To ensure the QR code scans correctly and looks good on your site, apply these styling tips:
Add white padding around the QR image. This space helps scanners detect the code without interference.
Center the QR code on the page for a clean layout.
Use a subtle border and shadow around the image to make it stand out.
Show a loading state or message while the QR code image is loading to improve user experience.
You can add these styles in the Wix Editor or via Velo code using `$w('#qrImage').style`.
🐛 Common Issues
Empty input: Make sure users enter text or a URL before generating the QR code.
Slow loading: The QR Server API is fast but depends on internet speed. Show loading messages to keep users informed.
Download errors: Browsers may block downloads triggered by scripts. Ensure your site is served over HTTPS and test in multiple browsers.
Image not showing: Check element IDs match the code and that Dev Mode is enabled.
Comments