EU Cookies alert

Ask the community
1

Please could we urgently have an EU cookies alert app. I notice there is a lightbox template that could be used for this, but I can’t get it to work when I also have another lightbox on the page.

6 Likes
2

I’ve just installed the Wix Cookie Alert, which works OK on the classic editor. However I can’t open but it on Editor X, while it does show installed. Neither can I delete the cookie app.

3

In addition to above, I’ve also tried to install the cookie Lightbox, but I also can’t get it to work. I don’t have another lightbox on the page but do have a section banner which appears after 3 seconds.

4

I’ve got the cookies lightbox working now with the below adapted code, but I also have another lightbox that I want to popup to show a signup option. I can’t get both to work together. So I changed the signup lightbox to appear when scrolled to a particular section, but it’s not ideal.

In this code, “Lightbox_cookies” is the name of my lightbox. And you need to set the lightbox to not open automatically.

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

$w.onReady(function () {
if (!local.getItem("cookiesPopupShown")) {
// open popup
wixWindow.openLightbox("Lightbox_cookies");
// set flag for future visits
local.setItem("cookiesPopupShown", "yes");
});
5

Thanks, I’ve also got the custom cookie acceptance to work in Editor X. I have added a custom ‘Accept’ button to the lightbox, on the click event of the button the local flag is set and the lightbox is closed.

6

I’ve ditched the lightbox in the end as I don’t like the overlay. Visitors should be able to first have a look at the website and be able to navigate. I have replaced the lightbox with an container that is collapsed on load and use code the expand. I created a separate section for this container which I set as a master so I can use it on all pages. I set the section to fixed position with a height of 0 pixels, so the container floats over the content if expanded, while you can still navigate the website.

7

I agree about the lightbox. I wondered about a solution like a container, but are you able to set cookies with it so that it can be dismissed?

8

Yes, it works very clean now, see below code. When the button on the container is clicked the local cookie flag is set and the container is collapsed. On the onReady event the container is expanded if there is no local cookie flag. I just needed to check on if the onReady event is for browser and not the server to avoid flickering.

To recap:

  1. I created a new section with 0 height and this on top of the page above the header
  2. I made the section a master so it can be used on all pages
  3. I added a container with the cookie notification and docked it with a negative offset below the (zero height) section
  4. Both the section and container are fixed (scroll effect). In the Layers Panel you can see the section is pinned.
    5)The container is collapsed on load.
  5. I have added a fade in effect and delay to the container so it does not appear immediately

The result is cookie box that shows up in the upper right corner (or for mobile full screen width) that floats on top op the pages. You can navigate on the website and even go to another page but as long as the cookies are not accepted the box is shown. A nice balance between forcing cookie acceptance but still allow the visitor first to check out the page.

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

$w.onReady(function () {
 // onReady event occurs twice during load, on server side and browser side. To avoid flickering check on browser on Ready event. 
 if (wixWindow.rendering.env === "browser") {
 if (!local.getItem("AkkoordCookies")) {
 // if local cookie flag is not set expand the CookieBox
            $w('#CookieBox').expand();

        }
    }
});

export function CookieButton_click(event) {
 // When Cookie is accepted set local flag for future visits and collapse CookieBox
    local.setItem("AkkoordCookies", "yes");
    $w('#CookieBox').collapse()

}
9

Brilliant. Thanks for that. I’ve done something similar to yours, with your help, but added a section to the bottom below the footer.

I adapted your code slightly and added a fixed master section named #cookieNotice, below the footer. Then added the text and button. I gave the section a height of 100px, and set it to be hidden on load.

Unless I’m missing something, I found I didn’t need to set the height to 0px or add a negative offset.

Then I adapted your code slightly and it seems to work great. Before your post, I’d got something similar working but the section flashed on page load. I didn’t know about the rendering environment check until your post, and that’s fixed the flicker, as you said.

Here’s my code, in case you’re interested:

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

let fxOptionsIn = {
 "duration": 1000,
 "delay": 1000,
};

let fxOptionsOut = {
 "duration": 1000,
};

$w.onReady(function () {
 // onReady event occurs twice during load, on server side and browser side. To avoid flickering check on browser on Ready event. 
 if (wixWindow.rendering.env === "browser") {
  if (!local.getItem("cookiesAlert")) {
  // if local cookie flag is not set show cookieNotice
  $w("#cookieNotice").show("slide",fxOptionsIn);
  }
 }
});

export function cookiesButton_click(event) {
 // When Cookie is accepted set local flag for future visits and hide cookieNotice
 local.setItem("cookiesAlert", "yes");
 $w("#cookieNotice").hide("slide", fxOptionsOut);
}
10

I needed my cookie notice to float over existing sections and didn’t want a gap once the notice is shown. If you put the cookie section above the footer you don’t have this issue and indeed can keep the section on 100px height.

11

Also ask URGENTLY for a cookie alert, because right now NO ONE of Editor X sites can be done accordingly right to European law!!!

12

There is now a cookie alert available, which works great; much better than the old app version. Go to Settings > Privacy & Cookies.

13

I have tested the new cookie app in the Privacy Center. It has great functionality and is indeed lightyears away from the old ap. However at this stage it cannot be format (except black or white background) . According to Wix formatting is Phase 2, so I wait a little longer to have a nice looking cookie notice and something that scares you off.