Hey there, tech heroes! I'm Eitan, from the Wix Wiz, welcoming you back for another magical journey in website customization. Today's spellbinding topic will transform the way you link your users to your site: QR Codes!
📺 Intro to QR Codes
We're diving deep into QR codes and how you can generate them for your Wix website or Wix Studio website using embeddable HTML elements. Ready to make your site scannable? Let's go!
🛠 What You’ll Need
Before we dive headfirst into the ocean of code:
Wix Studio Editor or the classic Wix Editor, no biases here.
A Library or Respository for generating QR Codes for some ready-to-use QR code script. (I used this one - https://github.com/davidshimjs/qrcodejs)
CodePen (Recommended), a lovable online IDE to play around with our custom QR code code. (https://codepen.io/)
🖥 Setting Up
We'll start by opening up Wix Studio (or Wix Classic) and hopping over to a GitHub repository with some pre-fab QR code scripts. We'll use a content delivery network (CDN) link to pull in this magic potion without copy-pasting everything. Ready? Let’s get coding!
✍️ Step-by-Step: Generate Your QR Code in CodePen
CodePen Setup: Copy the script tag from the CDN and paste it into a new pen on CodePen.
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>HTML Basics:
Create a div with an ID of qr-code. This will be our QR code's cozy home.
<div id="qr-code"></div>JavaScript Basics:
Import the script and initialize a QR code within a script tag.
<script>
const qrCodeWrapper = document.getElementById('qr-code');
const qrCodeURL = 'https://www.thewixwiz.com';
new QRCode(qrCodeWrapper, qrCodeURL);
</script>3. Testing:
Scan your created QR code with your phone to ensure it leads to the intended URL. If it brings you to thewixwiz.com, magic is happening!
🌈 Adding Some Spice: Customizing Your QR Code
Want to up your QR code game? Add options like custom sizes and colors:
const qrCodeURL = 'https://www.thewixwiz.com';
const options = {
text: qrCodeURL,
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff"
};
new QRCode(qrCodeWrapper, options);🔄 Making It Dynamic
Because we love dynamic websites, let's dynamically pass URLs into our QR code. First we will set up an event listener for the window that will listen for messages sent to the iFrame from the parent (using Velo code):
window.onmessage = (event) => {
if (event?.data?.url) {
console.log("url", event.data.url);
//here is where we will generate the QR Code
}
}Then we will move all of the previous code into a function and call it in the message handler.
function generateQRCode(url) {
const qrcodeWrapper = document.getElementById('qrcode');
const options = {
text: url,
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
}
const qrcode = new QRCode(qrcodeWrapper, options);
}
Your final code should look something like this:
Don't worry if you don't see the QR code anymore! Since it needs to be passed dynamically it won't show until we embed this in our Wix Website.
🛌Embedding in Our Wix Site
In the Wix Classic or Wix Studio Editor go to Elements > Embed > Embed Code or Embed HTML.
Copy the code from CodePen and paste it in the mini code panel of the embed element. (Click on the element > click on "Edit Code" > paste under "Add your code here").
🔡Set up the Velo Code
In the IDE open up the page code for the page you added the embed element to. (If you haven't done so yet - turn on "Code Mode" or "Dev Mode".)
In the IDE add the following code to send a message from Velo to your iFrame:
$w.onReady(function () {
const url = 'https://www.thewixwiz.com';
$w('#htmlElement').postMessage({ url: url });
});(This assumes the ID of your embed element is 'htmlElement'. You can change that in the "Properties & Events" panel in the IDE).
You should now see a QR code inside of the embedElement in preview mode and on your live site! 🥳
🌟 Advanced Use Case: Multiple Dynamic QR Codes
Want to generate multiple QR codes dynamically for different pages? Maybe you’re linking to various resources or products. Follow along:
Setup Collection:
Create a CMS collection in Wix called Cartoons.
Add fields and data for your dynamic pages.
Velo Code for Multiple QR Codes:
Use WixData.query to fetch URLs from your collection.
Use WixLocationFrontend to get the base url of your website.
import wixData from 'wix-data';
import wixLocationFrontend from 'wix-location-frontend';
$w.onReady(async function () {
let urls = await getCartoonUrls();
$w('#htmlElement').postMessage({ urls: urls });
});
async function getCartoonUrls() {
const cartoonsQueryResult = await wixData.query("Cartoons").find();
const cartoons = cartoonsQueryResult.items;
const urls = cartoons.map((cartoon)=> wixLocationFrontend.baseUrl + cartoon['link-cartoons-cartoonName']);
return urls;
}Adjust CodePen Embed:
Modify CodePen to handle multiple QR codes dynamically.
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="qrcodesWrapper"></div>
<style>
#qrcodesWrapper{
display: flex;
flexWrap: wrap;
height: 100%;
width: 100%;
gap: 15px;
}
</style>
<script>
const QRCodesWrapper = document.getElementById('qrcodesWrapper');
window.onmessage = (event) => {
if (event?.data?.urls) {
console.log("url", event.data.urls);
event.data.urls.forEach((url)=>{
generateQRCode(url);
})
}
}
function generateQRCode(url) {
const qrcodeElement = document.createElement('div');
const options = {
text: url,
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
}
const qrcode = new QRCode(qrcodeElement, options);
QRCodesWrapper.append(qrcodeElement)
}
</script>🎉 Wrapping It Up
Phew, what a journey! We:
Generated simple QR codes.
Customised them with options.
Implemented dynamic QR code generation.
Created multiple QR codes for various URLs.
For your convenience, I'm also attaching the YouTube Video from our channel that walks through this. Give it a thumbs up, subscribe, and leave your questions in the comments or on our forum.
Happy coding, fellow wizards!
Need help with this or any other custom code on your Wix Website? The Wix Wiz Team is at your service - check out our plans.
Comments