Wix Velo code to generate QR Code for a text / URL / Image

Wix Crafters
Jun 8
2 min read

Hi there,

We’re Wix Crafters — a newly launched development company specializing in Wix Velo. Our mission is to empower the Wix community by providing ready-to-use code snippets and custom Velo solutions that save time, eliminate guesswork, and help bring ideas to life faster.

Whether you're a business owner, designer, or fellow developer, we’re here to simplify your workflow with clean, efficient code for the features you need most — from dynamic content and custom interactions to advanced integrations and backend logic.

Let us help you build smarter, not harder.

Wix Velo code to generate QR Code for a text / URL

Live Example - https://www.wixcrafters.com/qr-code-generator

Step 1 - Backend Setup

Turn on Velo Code (Dev Mode) and go to Backend & Public.
Add a new .jsw file and name it qrCode (final name - qrCode.jsw)
Copy the following code and paste it as it is

// backend/qrCode.jsw
import { fetch } from 'wix-fetch';

export async function generateQRCodeWithImage(text, imageUrl) {
    try {

    let apiUrl = `https://quickchart.io/qr?text=${encodeURIComponent(text)}&size=200`;
    
    if (imageUrl) {
        console.log('Image url received - ', imageUrl);
        apiUrl += `&centerImageUrl=${encodeURIComponent(imageUrl)}&centerImageSize=0.3`;
    }
    
    return apiUrl; // Returns the QR code URL with image
    } catch (error) {
        return console.error('Error with logo - ', error);
    }
}

export async function generateQRCode(text) {
    const apiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(text)}`;
    return apiUrl; // Returns the QR Code URL
}

Step 2 - Frontend Setup

Add the elements on the page -
1. Button - Name it #generateQRButton as id in velo
2. Text Input - For accepting the text / URL you want the QR Code for. Name it #textInput
3. Image - Image to display the generated QR Code. Name it #qrCodeImage
4. Loader gif (optional) - For a better UI. Name it #loader
5. Upload Button - If you want to add the image inside the QR Code. Name it #uploadImage
6. Copy the following code and paste it as it is on the page's code.

import { generateQRCode, generateQRCodeWithImage } from 'backend/qrCode';
import wixData from 'wix-data';
import wixLocationFrontend from 'wix-location-frontend';

const generateQRButton = $w('#generateQRButton');
const input = $w('#textInput');
const qrCodeImage = $w('#qrImage');
const loader = $w('#loader');
const uploadImage = $w('#uploadImage');


let qrUrl;
let url;

$w.onReady(function () {

    uploadImage.onChange(async () => {
        url = await imageUpload();
        console.log('Image Static URL:', url);
    });

    input.onInput(() => {
        input.value ? generateQRButton.enable() : generateQRButton.disable();
    })

    generateQRButton.onClick(async () => {
        let text = input.value;
        let imageUrl = url; // Use uploaded image

        console.log('Using image URL - ', imageUrl);

        if (text) {
            qrCodeImage.hide();
            loader.show();

            imageUrl ? qrUrl = await generateQRCodeWithImage(text, imageUrl) : qrUrl = await generateQRCode(text);

            qrCodeImage.src = qrUrl;
            qrCodeImage.show();
            loader.hide();
        } else {
            console.log("Please enter a valid text.");
        }
    });
});

// ✅ Convert wix:image:// to static.wixstatic.com/media URL
async function imageUpload() {
    const uploadedFiles = await uploadImage.uploadFiles();
    if (uploadedFiles.length > 0) {
        const wixUrl = uploadedFiles[0].fileUrl;
        const mediaId = extractMediaId(wixUrl);
        const staticUrl = `https://static.wixstatic.com/media/${mediaId}`;
        return staticUrl;
    }
    return null;
}

// ✅ Extract media ID from wix:image:// URL
function extractMediaId(wixUrl) {
    const regex = /wix:image:\/\/v1\/([^/]+)/;
    const match = wixUrl.match(regex);
    return match ? match[1] : '';
}