I have a wix web site where people could register. What I would like to add is a module which creates for every person who is registered in the web site, his personal ID or QR code. Could you help with this.
2 Likes
Item id or _id is generated by the Wix Database for each item. Every user, registered or not has his own userId too.
You will need an API for QR Code something like QR Code Monkey
Check out the Wix Users API
You can install the qrcode library from the Wix Package Manager :
What do we do after we instal the package?
@dukemoore It depends on what you want to happen. Do you want to present a qr code image on the webpage, to save an qr code image to your database? something else?
@jonatandor35 To save to database
@dukemoore basically you create a file on your backend with a function to create a qr code.
If you plan to call this function from your from end, the file has to be jsw, otherwise it can be js.
backend/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;
})
}
Code for calling the function (from the front end or wherever you want:
import {generateQRcode} from 'backend/qrCode.jsw';
import wixData from 'wix-data';
generateQRcode(dataToEncode)
.then(res => {
//code to update your data base with the result
})
@dukemoore
Why ask in new question when details already here in this previous post?
https://www.wix.com/corvid/forum/community-discussion/what-s-next-qrcode-node-js
@jonatandor35 Thank you sir
@jonatandor35 If I wanted to display the QR Code as an image on the webpage, what is the best approach. I am new to coding, and lost.
This is what I have in the backend:
Front end:
The Client HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>client side test for node-qrcode</title>
<!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]-->
<script src="qrcode.js"></script> <!-- This doesn't exist in the examples, you'll need to supply this. -->
<script src="qrcode.tosjis.js"></script> <!-- This doesn't exist in the examples, you'll need to supply. -->
<style>
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html,
body {
margin: 0;
background-color: ghostwhite;
}
input,
textarea {
font-size: 14px;
padding: 2px;
}
textarea {
resize: none;
}
.container {
display: flex;
margin: 0 auto;
padding: 16px;
justify-content: center;
}
.controls {
flex: 2;
display: flex;
flex-direction: column;
min-width: 400px;
max-width: 400px;
}
.qrcode-container {
display: flex;
justify-content: center;
align-items: center;
}
.qrcode-image {
border: 1px solid #ccc;
}
.container>*+* {
margin-left: 40px;
}
.title {
text-align: center;
}
.control-group {
display: flex;
}
.control-group+.control-group {
margin-top: 16px;
}
.control {
flex: 1;
display: flex;
flex-direction: column;
}
.control+.control {
margin-left: 16px;
}
.control>input {
width: 100%;
}
.control>textarea {
width: 100%;
flex-grow: 1;
}
.expand {
flex-grow: 1;
}
</style>
</head>
<body>
<h1 class="title">node-qrcode</h1>
<div class="container">
<div class="controls">
<div class="control-group">
<div class="control">
<label for="version">Version:</label>
<select id="version" name="version">
<option>Auto</option>
</select>
</div>
<div class="control">
<label for="mode">Mode:</label>
<select id="mode" name="mode">
<option>Auto</option>
<option>Numeric</option>
<option>Alphanumeric</option>
<option>Byte</option>
<option>Kanji</option>
</select>
</div>
</div>
<div class="control-group">
<div class="control">
<label for="margin">Margin:</label>
<input id="margin" type="number" name="margin" min="4" value="4" />
</div>
<div class="control">
<label for="errorLevel">Error Correction:</label>
<select id="errorLevel" name="errorLevel">
<option>Default (Medium)</option>
<option>Low</option>
<option>Medium</option>
<option>Quartile</option>
<option>High</option>
</select>
</div>
</div>
<div class="control-group">
<div class="control color-control">
<label for="lightColor">Light color:</label>
<input id="lightColor" type="color" name="light" value="#ffffff" />
</div>
<div class="control color-control">
<label for="darkColor">Dark color:</label>
<input id="darkColor" type="color" name="dark" value="#000000" />
</div>
</div>
<div class="control-group expand">
<div class="control">
<label for="input-text">Text:</label>
<textarea id="input-text">https://github.com/soldair/node-qrcode</textarea>
</div>
</div>
</div>
<div class="qrcode-container">
<p id="error" class="error"></p>
<canvas id="canvas" class="qrcode-image"></canvas>
</div>
</div>
<script>
var errorEl = document.getElementById('error')
var versionEl = document.getElementById('version')
var errorLevelEl = document.getElementById('errorLevel')
var modeEl = document.getElementById('mode')
var marginEl = document.getElementById('margin')
var lightColorEl = document.getElementById('lightColor')
var darkColorEl = document.getElementById('darkColor')
var canvasEl = document.getElementById('canvas')
var textEl = document.getElementById('input-text')
function debounce(func, wait, immediate) {
var timeout
return function () {
var context = this
var args = arguments
var later = function () {
timeout = null
if (!immediate) func.apply(context, args)
}
var callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func.apply(context, args)
}
}
function drawQR(text) {
errorEl.style.display = 'none'
canvasEl.style.display = 'block'
QRCode.toCanvas(canvasEl, text, {
version: versionEl.value,
errorCorrectionLevel: errorLevelEl.options[errorLevelEl.selectedIndex].text,
margin: marginEl.value,
color: {
light: lightColorEl.value,
dark: darkColorEl.value
},
toSJISFunc: QRCode.toSJIS
}, function (error, canvas) {
if (error) {
canvasEl.style.display = 'none'
errorEl.style.display = 'inline'
errorEl.textContent = error
}
})
}
var updateQR = debounce(function () {
var mode = modeEl.options[modeEl.selectedIndex].text
if (mode !== 'Auto') {
drawQR([{ data: textEl.value, mode: mode }])
} else {
drawQR(textEl.value)
}
}, 250)
versionEl.addEventListener('change', updateQR, false)
errorLevelEl.addEventListener('change', updateQR, false)
modeEl.addEventListener('change', updateQR, false)
marginEl.addEventListener('change', updateQR, false)
lightColorEl.addEventListener('change', updateQR, false)
darkColorEl.addEventListener('change', updateQR, false)
textEl.addEventListener('keyup', updateQR, false)
for (var i = 1; i <= 40; i++) {
versionEl.options[versionEl.options.length] = new Option(i.toString(), i)
}
drawQR(textEl.value)
</script>
</body>
</html>
@dukemoore The client-side code is not Corvid. It’s for an html component. And if you use it, you’ll need to post the qrCode svg string to the iframe.
@jonatandor35 @J. D. I put Below Code on my site , so i didn’t get output . i would like to change my qr code image using id on dynamic pages , as you can see below image i put one image for Qr Code and this image will be change with different id and i also facing one error
is there any point i forgot ? and which code i need to put instead of //code to update your data base with the result , please let me know , get rid of this issue
import {generateQRcode} from ‘backend/qrCode.jsw’;
import wixData from ‘wix-data’;
generateQRcode(dataToEncode)
.then(res => {
//code to update your data base with the result
})
@devmxpertz The error message on your screenshot is too tiny, and I can’t read it.
Anyway, inside the .then(), you should put:
$w("#vectorImage1").src = res; //use your vector image property id.
@jonatandor35 Thank you 
@devmxpertz you’re welcome
Great thread. Wondering if anyone can guide me with what I need to do. I’m building a website using Wix. On the website, there will be a member application. Once they apply, I’d like them to have a QR code assigned to them. So when they enter the club, they can just scan the qr code to enter. Is this possible? I would reallyyyyy love if they could make a reservation, then a QR code gets texted to them. That would be ideal! Any ideas how I can do this?