Wix Velo QR Code Generator Sample Code and Tutorial

QR codes are one of the easiest ways to redirect users somewhere. Wix Velo QR code generator example gives you a quick introduction about this.

How to Create a QR Code Generator by Wix Velo Without External Source?

QR code generator example does not need an external package or source, it relies simple Wix Velo and JS commands.

Step 1: Create a backend JSW module and name it what you wish to, I have named mine functions.jsw.

Step 2: Remove all information currently within the created module and import the following at the top line:

import wixData from 'wix-data';
import wixUsers from 'wix-users-backend';
import QRCode from 'qrcode';

Step 3: Insert the below backend code making adjustments for your data collection and item data. Backend Module Code placed below import QRCode:

export function generateQRcode () {

return createQRCode();

}

async function createQRcode() {
 return wixData.get("Your Data Collection", wixUsers.currentUser.id)
        .then((results) => {
 let item = results;
 let text = "Choose the item.string to make a QRCode";
 let opts = {
                errorCorrectionLevel: 'H',
                type: 'svg', // I have chosen svg as it provides a string
                rendererOpts: {
                    quality: 0.3
                }
            }
            QRCode.toString(text, opts, function (err, string) {
 if (err) throw err;
                item.QRCode = string; // This is the item you wish to update with the QRCode String
                wixData.update("Your Data Collection", item);
            })
        })
}

Step 4: On the client side place a vector image on your site these are svg graphics and can use the .src of the graphic with the QRCode string.

Call the backend code from the client side, I have chose to use a button to call the function and then display the result:

Client side code:

import {getQRCode} from 'backend.functions.jsw';

export function button90_click(event) {
    getQRCode()
        .then(result => {
 // Check if we did not get any results frist!
 if (result === "NORESULTS") {
                console.log("BAD DATA OR NO DATA BACK!");
            } else {
 let svg = result;
                $w("#vectorImage1").src = svg;
                $w("#vectorImage1").show();
                console.log(result);
            }
        })
}

Step 5: On the click of the button you should have the generated svg string saved in your data collection and the visual representation of this on your screen.

Credit: This tutorial was developed from a post published in Velo Forum.

Wix Velo Partner Program Experts to Get More Help

We are ready to take care of your project as best as you wish to be like. Contact us for more details or directly book a call below.

Wix Velo Services We Offer

Have a good day,

Bizim Muhit Team.