Cookies Pop Up Accept Button (Solved.. I think)

Ask the community
,
1

Hi,

I’m completely new to coding, so please excuse my ignorance.

I’m creating a Cookies pop up (as the app provided by Wix is not suitable for my needs). I have used the code provided in this article (although I’ve done it for local storage not session storage) in the Site tab:
https://support.wix.com/en/article/how-to-create-a-one-time-popup

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

$w.onReady(function () {
// flag is not found
if(!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);
// set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
}
} );

However I would like to make it so that the pop up keeps coming up until the user clicks the Accept button, then no longer shows again after they have done that (to be GDPR compliant I believe specific consent needs to be given so I don’t want the Cookies box to go away until they have actually clicked). Using the coding in the article above, the user simply needs to refresh the browser to prevent the Cookies pop up from coming back.

Please can anybody let me know what code I need to add/change to make the pop up come up automatically on the user’s first visit and subsequent visits until they click Accept, make the actual clicking of the Accept button set the flag on the users local storage, and then prevent the pop up from showing again on future visits once the Accept button has been clicked?

Many thanks in advance,
Jane

2

Hi Jane,

you would need to add the code bellow to the onClick handler of the accept button in the light box,
as now it immediately sets the value after it shows the popup.

local.setItem("firstTimePopupShown", "yes");

I hope this helps.

3

Hi Giedrius,

Thanks for getting back to me. Ok, I’ve added it (I think) using the onClick events handler in the Accept button properties window but pretty sure I’ve not done it right. The light box is now coming up every time I change page, and when I refresh, even after clicking the Accept button. Does the onClick handle need to be in the Page tab of the code window or the Site tab?

It now looks like this (in the Site tab). Where have I gone wrong?

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

export function AcceptCookies_click(event, $w) {
// set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
}

$w.onReady(function () {
// flag is not found
if(!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);

}
} );

Sorry, I really have no idea about coding and Google and the Wix guidance is only taking me so far. Thank you so much for your help and patience.

Jane

4

Could the problem be that the Accept Cookies button is also the close lightbox button? I’m still not managing to sort this.

5

Yep, that was the problem. I removed the ‘Close lightbox’ button and just added a normal button. Then I added an onClick event to that button (on the page tab, not site tab), with a function to set the flag and also added the lightbox.close function to the end of it. Now works fine.

6

Hi Jane

Are you able to show the code you added to the page tab to make this work please?

So far I’ve followed your instructions and have the following code on my ‘site’ tab and have deleted the ‘Close ligthbox’ buttom and just added a normal button (this has been given the defualt name #button1).

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

export function AcceptCookies_click(event, $w) {
// set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
}

$w.onReady(function () {
// flag is not found
if(!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);

}
} );

Your help would be greatly appreciated. Thanks, Paul.

7

Hi Paul,

This is the code I have used (my button is called AcceptCookies):

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;
import wixLocation from “wix-location”;

export function AcceptCookies_click(event, $w) {
// set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
wixWindow.lightbox.close();

}

My website is earthandairjewellery.com if you want to see it in action.

I have a new challenge I’m trying to figure out on it now though. I want the Learn more button to take me to my Cookies Information page, and close the lightbox (so people can read the cookies information without having to manually close the lightbox with the X button), but not set the flag, so when they visit any other page the lightbox comes back. I’ve tried using a similar code for the Learn more button, but putting a location function in place of the set flag function, but I’m only managing to get it to either close the lightbox or direct to the Cookies Information page and not do both together. I shall put more effort into figuring it out over the next week. I still don’t really have a clue what I’m doing with code.

Anyhow, hope this helps,

Jane

8

Just wanted to say thanks for your quick response. I’ll be having a look at this over the next few days. Your cookie banner looks really good and you’ve done extremely well for someone new to coding. I’ll report back on how I get on. As for your new issue - good luck. If I can help in anyway I will. Paul.

9

I’ve been contacted again about this so I guess there’s a need for the info to be put out there. I’ll do my best to describe what I did start to finish, I’m really not great at stuff like this though. In fact, I’ll use screenshots cos that’ll better explain it.

In the lightbox editor page I added this code to the site tab to check for a flag, and if not open the lightbox (I called the lightbox Cookies).

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

$w.onReady( function () {
// flag is not found
if (!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);

}
} );

960×999 174 KB

Then I opened the page tab and put all the import codes in.

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;
import wixLocation from “wix-location”;

Then I right clicked the I Accept button and chose View Properties.

960×999 184 KB

I changed the ID of the button to AcceptCookies. Then there is a list of events you can choose from. I chose to add an onClick event (which I assume means that whatever function you put in after happens when the button gets clicked, I got mainly this far through good luck cos I really don’t know what I’m doing). This added its own little bit of code.

960×999 184 KB

I added to this bit of code, so the whole code on the page tab for the Cookies page now reads:

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;
import wixLocation from “wix-location”;

export function AcceptCookies_click(event, $w) {
// set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
wixWindow.lightbox.close();

}

And that’s it. It seems to work so that the pop up will come up on whichever page somebody lands on first, across the whole site. It can be closed with the X button, but will come back when the page is refreshed or they go to another page, until they actually click I Accept. Again, here it is if anybody wants to see it in action earthandairjewellery.com

My challenge now is that I want the Learn more button to take them to the Cookies Information page and close the lightbox, so that they can read the info without having to manually close it with the X button, but not set the flag so that when they click onto any other page the pop up comes back. I would have thought the code would be something similar to that in the page tab above, but having it send to a new location instead of setting a flag. But for some reason I can either get it to close the box or go to the Cookies Information page, but not both together. I’m pretty tenacious so I’m sure I’ll get there, but if anyone can give me a quick fix I’d be very grateful.

10

Hi Jane, thanks for all the steps you mentioned here! It helped a lot and it’s finally working on my website. The only thing I need to know is how to do this: if you click X button and close the window, how to make it pop up when you click on some other page?

Please help! Thanks…
Here is my code

PAGE:

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;
import wixLocation from “wix-location”;

export function button1_click(event, $w) {
local.setItem(“firstTimePopupShown”, “yes”);
wixWindow.lightbox.close();
//Add your code for this event here:
}

SITE:

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

$w.onReady( function () {
// flag is not found
if (!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);

}
} );

660×888 65.9 KB

11

Hi Lucie,
Just place this code in an onClick event function:

wixWindow.openLightbox("Cookies");

Roi.

12

Hi Lucie,

On mine the pop up does come back after you’ve clicked the ‘X’, when you go onto a new page, whichever page on the site you go on to. Until somebody clicks the ‘I Accept’ button, which sets the flag, the pop up keeps returning no matter how many times they close it using the X button.

I didn’t even want to have an ‘X’ button but I can’t work out how to make the lightbox close when they click to ‘Learn more’ so they can read my cookies notice without one so it was the only way.

Also, at the bottom of my cookies notice I have a little sentence saying ‘If you would like to accept cookies and continue browsing you can do so now by clicking here .’ and for ’ here ’ I put in a link to the Cookies lightbox, so it brings it back up, allowing them to click ‘I Accept’ and set the flag so the pop up will stop popping up anymore.

I wish I could give better advice on this one, but I mainly arrived where I did through trial and error, with a certain about of informed guesswork.

13

Thank you so much for quick response! I added the code, but it still doesn’t work!

PAGE

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;
import wixLocation from “wix-location”;

export function button1_click(event, $w) {
local.setItem(“firstTimePopupShown”, “yes”);
wixWindow.lightbox.close();
wixWindow.openLightbox(“Cookies”);
//Add your code for this event here:
}

SITE

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

$w.onReady( function () {
// flag is not found
if (!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);

}
} );

Any suggestions please?
Thanks a lot!

14

Hi Lucie,

I’m assuming your pop up is called Cookies and your accept button (that sets the flag) is button1? If not then that may explain it. Other than that, I can’t really help as I don’t know enough about it, sorry. Do you want to send me the link to your site and I can see how it looks on my end as a user?

15

Hi Jane,

thank you so much! I just figure it out! The problem was that the name wasn’t Cookies, so I just changed the name and finally it works. I would never make it work without your help! Thank you so much.

The only problem is that the website is loading so long now! I think you have the same problem, don’t you? My website is https://www.iksimafilms.com.au

Thanks again!

16

One more thing. I have a page, where I have detailed information about cookies and privacy policy. So when users clicks on -read more about cookies- button (before they agree with using cookies), I want them to read it first. How to close the Cookies Lightbox only on this page? Thank a lot!

17

Hi Jane and everyone else, thank you so far what you have provided as really helped me. Like yourselves this coding thing is new to me so very much trial and error. I have noticed my Pop works fine the only issue i have is the pop up is shown even when someone has already clicked the accept button on a previous visit www.ephyprivacy.com. This doesnt seem to be the case on your site Jane but i did try Lucie site and it is doing the same thing. (You may want to check that out Lucie). My code and button name…etc is exactly the same as Jane’s but not matter what i do i cannot remember if i have been there before and always shows pop-up

Page tab

import {local} from ‘wix-storage’;
import wixWindow from ‘wix-window’;
import wixLocation from “wix-location”;

export function Acceptcookies_click(event, $w) {
//set flag for future visits
local.setItem(“firstTimePopupShown”, “yes”);
wixWindow.lightbox.close();

}

Site tab

import {local} from ‘wix-storage’;
import wixWindow from “wix-window”;

$w.onReady( function () {
// flag is not found
if (!local.getItem(“firstTimePopupShown”)) {
// open popup
wixWindow.openLightbox(“Cookies”);

}
} );

18

Jane, in the windows of your lightbox proprieties, you can manage “automatic display windows” and select “YES” or “NO”
When you select “YES”, you can choose the page(s) where appear your advert.
You can also select (at the top) “first page open by the visitor”.
Then, your advert about cookies appear just the first time your visitor open your website (and not in all pages during his surfing session)
Sorry for my bad english.
I love your website and your works.

613×596 76.9 KB

19

Thank you, so glad you like my website.

I initially had followed that route for my cookies pop up, but with the advent of GDPR, I now have to get the website user to take a positive action to allow cookies and continue using the site. Unfortunately just having the lightbox pop up on their first visit doesn’t do this, as they can click away without accepting cookies, yet the cookie will be set anyhow. Hence having to go a long winded way about doing it. It isn’t perfect, but it does do the job.

PS. your English is fine, better than most of the English people I speak to :wink:

20

Jane,
This was incredibly helpful because I needed to create a popup for my clients as I am based in Europe. Thank you so much for laying this out step by step!
-Lauren