Hello Corvid! how can i add QR code generator API to my website?

Ask the community
,
1

i want to embed or add this api " https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example " (we can change the “example” to any word itll generate a QR code for it" how can i add this to my web site and and after the QR is generated i want it on the same page and save it to my dataset aka database.

please help thanks

2

Hi Ehsan,
Although Wix doesn’t have a built-in QR reader widget you can look for an online qr reader and embed it into your site Wix using the html iframe component.
Check out few helpful links on this thread suggested by our community member givemeawhisky
To learn more how to add an iFrame to your site check out the article: Using iFrames to Display Visible Content on Your Site .
Cheers,
Noam.

3

One way to generate a qr code (not to scan a qr code) is to install the qrCode npm (on your backend) and to use it.

4

thanks Noam i will see :slight_smile:

5

yes i want to generate a QR code and make it show on my page can u help me with that itll be a great favor

6

@xpuehsan
First install the npm
Then create a jsw file on your backend and put this code inside:

// qrCode.jsw 
import QRCode from 'qrcode';
export function generateQRcode(toEncode) {
 let opts = {
        errorCorrectionLevel: 'H',
        type: 'svg',
        rendererOpts: {
            quality: 0.3
        }
    };
 return QRCode.toString(toEncode, opts, function (err, string) {
 if (err) throw err;
 return string;
    })
}

On the client side:

// ELEMENTS: a square shape as placeholder for the QR code
import {generateQRcode} from 'backend/qrCode.jsw';
let codeToEncode = "MY-CODE"; //use your own code
$w.onReady(() => {
generateQRcode(codeToEncode)
.then(qr => {
$w("#vectorImage1").src = qr;
})
})
7

@jonatandor35 thanks bro i will do this and btw how to download and install QR generator NPM sorry im new to coding stuff

8

@xpuehsan see:
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager

9

@jonatandor35 THANKS BRO I finally installed it the problem is how can i put my text in “MY-CODE” without editing it menually for like how can i connect it to a UserInput field?

10

@jonatandor35 OMG bro Thank your very very much !! i did it my self thanks bro!

11

Is there anyway to replace svg to png or jpg format?

12

man you dunno how long i was looking for a straight forward Answer,

the issue is alot of the wix feature i need needs to be used through (NPM), do you know any tutorials on how to implement NPM packages on wix as these basic tutorials are very hard to find…