This code will help you add a custom Cookie Banner in the Wix Studio or Wix Editor website. Wix has removed the feature of the cookie banner and is now using Usercentric. While it has better features, it is a premium app that requires payment to remove the watermark and unlock all its features. That’s not good for the brand image of your website(Usercentric is still a great Cookie Banner, though). 

We are going to use Wix’s “Wix Window Frontend” API with local storage. While the Windows Frontend API sets the Cookie settings of your website visitors, the local storage remembers their choice next time they visit your website. Local Storage also makes sure that the cookie banner does not show up every time the website visitor browses your website.

The Lightbox Code

import { consentPolicy } from 'wix-window-frontend';
import wixWindow from 'wix-window';
import { local } from 'wix-storage-frontend';

const defaultPolicy = {
    essential: true,
    functional: false,
    analytics: false,
    advertising: false,
    dataToThirdParty: false
};

const acceptAllPolicy = {
    essential: true,
    functional: true,
    analytics: true,
    advertising: true,
    dataToThirdParty: true
};

const rejectPolicy = {
    essential: true,
    functional: false,
    analytics: false,
    advertising: false,
    dataToThirdParty: false
};

$w.onReady(function () {
    try {
        const savedPreferences = local.getItem('cookiePreferences');
        if (savedPreferences) {
            const preferences = JSON.parse(savedPreferences);
            $w('#toggleAnalytics').checked = preferences.analytics || false;
            $w('#toggleFunctional').checked = preferences.functional || false;
            $w('#toggleAdvertising').checked = preferences.advertising || false;
            $w('#toggleThirdParty').checked = preferences.dataToThirdParty || false;
        } else {
            $w('#toggleAnalytics').checked = false;
            $w('#toggleFunctional').checked = false;
            $w('#toggleAdvertising').checked = false;
            $w('#toggleThirdParty').checked = false;
            consentPolicy.setConsentPolicy(defaultPolicy);
            local.setItem('cookiePreferences', JSON.stringify(defaultPolicy));
            console.log("Default policy applied:", defaultPolicy);
        }

        $w('#buttonAcceptAll').onClick(() => {
            acceptAndClose(acceptAllPolicy);
        });

        $w('#buttonAcceptSelection').onClick(() => {
            const customPolicy = {
                essential: true,
                analytics: $w('#toggleAnalytics').checked,
                functional: $w('#toggleFunctional').checked,
                advertising: $w('#toggleAdvertising').checked,
                dataToThirdParty: $w('#toggleThirdParty').checked
            };
            acceptAndClose(customPolicy);
        });

        $w('#buttonRejectCookies').onClick(() => {
            acceptAndClose(rejectPolicy);
        });
    } catch (error) {
        console.error("Error initializing lightbox:", error);
    }
});

function acceptAndClose(policy) {
    try {
        consentPolicy.setConsentPolicy(policy);
        local.setItem('cookiePreferences', JSON.stringify(policy));
        console.log("Policy set and saved:", policy);
        wixWindow.lightbox.close();
    } catch (error) {
        console.error("Error setting policy or saving preferences:", error);
    }
}

Global Code

Paste this code in Masterpage.js file

import { local } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(function () {
  const popupShownKey = "firstTimePopupShown";

  if (!local.getItem(popupShownKey)) {
    wixWindowFrontend.openLightbox("CookieConsentLightbox");
    local.setItem(popupShownKey, "yes");
  }

  $w("#cookieBanner").onClick(() => {
    wixWindowFrontend.openLightbox("CookieConsentLightbox");
  });
});