How to Use Special Characters For Your Password-Protected Page in Wix, Using Velo

Who is our customer and what problem did they want to solve?

Our customer created a wedding site on Wix that needed to be password protected.

They emailed the password to all the invited guests but used an ampersand in the password they sent out before checking if Wix's Password Protected pages allowed for special characters in the password. It does not.

They reached out to us to ask if we could implement a way to use the password they had already sent out and prevent access to the site in another way since Wix's Password Protected pages would not work with the password they chose.

What solution did we provide?

We deemed that a lightbox that could only be closed by entering the correct password would be the most appropriate solution.

To implement this, we created a Lightbox in the editor with their wedding logo, a field for typing in a password, and a submit button. We set this up to trigger on every page.

Once the submit button is clicked and the password is matched with their previous password, the lightbox closes and we use Wix's Local Storage module to set a flag that the user is authenticated. This way when they reload the site, if they have been authenticated, the lightbox automatically is closed so the guests do not have to reenter the password.

What is Velo (Wix's Custom Development Platform)?

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web applications through Wix. Click to learn more about Velo.

Below is the code used. Check it out!

import wixWindow from "wix-window";
import wixStorage from "wix-storage";

const PASSWORD = "password&";

$w.onReady(function () {
  $w("#submit").onClick(() => {
    const password = $w("#password").value;
    if (password === PASSWORD) {
      wixStorage.local.setItem("isAuthenticated", "true");
      $w("#errorText").hide();
      wixWindow.lightbox.close();
    } else {
      $w("#errorText").show();
    }
  });
});

Have any questions? Contact us at 225-250-1888!

About our company

RHM specializes in helping businesses of all sizes and across all industries achieve their digital and web marketing needs. Whether it's designing a new website, building an app, performing custom development, or running Google Ads, our goal is to showcase how you are the best at what you do and help people connect with you. Contact us at 225-250-1888 to get started!