3 min read

Age Verification

How to Implement an Optimized Age Verification Popup with Wix Velo

As a website owner, ensuring that your content is accessed by an appropriate audience is crucial, especially if you're dealing with age-restricted material. Wix Velo offers a powerful and flexible way to incorporate an age verification system into your site. In this post, we'll walk you through creating a seamless age verification popup that loads quickly and efficiently on every page of your Wix site.

Essential Features of Our Age Verification Popup

Before we dive into the implementation, here are the key features of the age verification system we'll create:

Ubiquity: The popup appears on every page of the site, ensuring comprehensive coverage.
Security: The system is designed to prevent bypassing or skipping, ensuring all users must interact with the popup.
Session Memory: Upon clicking the “+21” button, the user’s age confirmation is saved in the browser’s session storage, preventing the popup from reappearing during the session.
Priority Loading: The verification code executes before other page elements and scripts, ensuring it loads first.

Step 1: Setting Up the Lightbox

First, let's create a lightbox that will serve as our age verification popup:

Open your Wix Editor and go to Add > Interactive > Lightbox.
Design your Popup:

Name the lightbox age21alert
Add two buttons: one labeled "Yes, I'm over 21" with the ID yesButton, and another labeled "No, I'm under 21" with the ID noButton.
Include text asking if the user is over or under 21 years old.
Ensure the design includes a dark overlay to obscure the webpage content behind the popup.

Step 2: Coding with Velo

Enable Velo by clicking on Dev Mode and selecting Turn on Dev Mode. Then, you'll add code in two parts: one in your Lightbox and the other in your MasterPage.

Lightbox Code

Navigate to your Lightbox in the editor and insert the following Velo script to handle user interactions:

import wixWindow from 'wix-window';
import { session } from 'wix-storage';

$w.onReady(function () {
    $w('#yesButton').onClick(() => {
        session.setItem("isOver21", "true");
        wixWindow.lightbox.close();
    });
    $w('#noButton').onClick(() => {
        wixLocation.to("https://www.google.com"); // Redirect under-age users
    });
});

Explanation:

Session Storage: Uses session storage to remember the user’s age verification across pages during a session.
Button Actions: Defines actions for each button: confirming age or redirecting.
Redirect: wixLocation.to("https://www.google.com"); is used here to navigate to an external site, which is useful if you want to direct underage users away from your site.

MasterPage Code

The MasterPage will handle the session check and determine if the lightbox should appear:

import wixWindow from 'wix-window';
import { session } from 'wix-storage';

$w.onReady(function () {
    if (session.getItem("isOver21") !== "true") {
        wixWindow.openLightbox('age21alert');
    }
});

Explanation:

Session Check: Before any page loads, it checks if the user has confirmed their age. If not, it displays the lightbox.

Additional Considerations

Compliance and Ethics: Make sure your implementation of age verification complies with local laws and industry standards. Redirecting users without their explicit consent or proper notification might not be the best practice.
User Experience: Ensure that the flow is smooth and clearly communicates why a user is being redirected or why access is denied.

Conclusion

By following these steps, you can implement a secure, compliant, and user-friendly age verification system on your Wix site using Velo. This system not only adheres to legal requirements but also ensures that it does not detract from the user experience. Implementing this feature effectively can be crucial for maintaining both legal compliance and user trust.

For a real-world example of this feature in action, visit SlapHappy Hemp, where we successfully implemented an optimized age verification system. This ensures that all visitors meet the age requirements for accessing CBD products, demonstrating our commitment to responsible web design and compliance with regulations.

If you're looking to enhance your website further or need personalized assistance with setting up advanced features like this one, WixCreate is here to help. As a professional website design company, WixCreate specializes in creating custom Wix websites that meet unique business needs and comply with all necessary regulations. Contact us today to see how we can elevate your online presence and ensure your site performs at its best.