My client just asked to verify the age of visitors, so I built a yes/no popup when people land on the site. They just got featured in Bloomberg which is cool! I was hoping someone might be able to help me with some custom code that:
if they answer yes, the popup does not show for 30 days
if they answer no, the popup shows for next visit
if they answer yes after previously selecting no on another visit, the popup does not show for 30 days
Congrats to you and your clients! The website is beautiful. Try the following code (paste it into the Page’s HEAD tag in Page Settings) on for size and let me know if it works:
Also, be sure to give your elements the following IDs, or this script won’t work.
Hope this helps. I’m sure someone can optimize my code, but it’s working so far on my end.
I used local storage instead of session storage, because session storage data gets deleted immediately once the browser closes – which wouldn’t be ideal for your use case.
Hey @mattvaru! Thanks so much for taking a look at this!
I added the script to the Homepage’s settings, and I changed the IDs as you instructed. Unfortunately, it looks like it is not remembering my answer.
Oh, apologies - I forgot the two most important IDs!
Add an ID of btnYes to your “Yes” button and an ID of btnNo to your “No” button and let me know if that works. (Try it in incognito or clear your local storage before trying it again, just to be safe.)
Haha, I was reading though the script after I sent that and noticed I needed to make that change - thanks! Looks like it is remembering my yes/no answers now, but only the red box is hidden when someone returns after a yes answer - not the entire black overlay the red box in contained in. Should I give the overlay container the ID of “modal” instead?
On second thought, let me modify my code ever so slightly and then ping you to make one change here in a minute. For now, just remove the ID of modal from the red box element that it’s located at.
EDIT: Can you re-visit the link with the custom code and re-copy the code itself? I removed one line so that your fade out interaction upon clicking yes should still run. Also, once you do that, apply the ID of modal to the parent element, which is (as you said) the overlay container. (Be sure to remove it from the red box as well.)
Yes of course - just added the updated script to the Homepage settings, and the “modal” ID has been removed from the red box and applied to the overlay container.
It looks like everything is working perfectly. I really appreciate the help on this!
Hey @mattvaru - was just retesting the site, and I found a small bug. Once the user clicks yes and the modal disappears, the user is still restricted from clicking on anything on the site. Any ideas to fix this? Thank you again!
EDIT: Sorry for the alarm, it was on my end with the interactions I had set on the Yes Button All good!
Guys, this topic has plagued me for some time. I actually had a client site that required this, but had to farm this out to a js programmer for the fix.
Im actually trying to recreate the age gate again, but for some reason, my site just renders blank. Nothing, nada.
I’ve created and named the same type of modal and ID’s as myonke did.
Hey @epicradness – apologies for the delay, didn’t see the notification here. Were you able to get this resolved? I went to your website and didn’t see the modal in the Navigator, so I figured you either found an alternate solution or are going to circle back to that piece later.
I was tinkering it on my personal site, but decided to just shift over to it’s own site for testing.
Updated that link above.
It’s really baffling to me. Although, a lot of these kinds of code workarounds seem to have a steep learning curve, esp as someone without a code background.
Thanks! And totally get it. When you don’t come from knowing how to code, it can seem like a little much at first, but I promise you get used to it over time. (Coming from someone who hated coding)
I took a look, and you have pretty much everything set up correctly, ID-wise (with one exception), but you the error lies in spacing issues in the code you pasted in (the code that I wrote.)
I recorded a video for you here:
If you delete your current code, paste in mine exactly as is, and adjust the ID accordingly (talked about it at the end of the vid), you should be good to go!
Hey @mattvaru thank you so much for posting this. I was trying to find a solution and it almost drove me mad. Haha.
Just one thing I’m trying to figure out: everything works like a charm on most devices and browsers. Only safari on Mac OS seems to ask for the age check every time a link within the site is clicked. Is this something that can be fixed or is safari blocking all cookies nowadays.
Hey @mattvaru, the page loads faster than the cookie, so when the cookie is activated I see the Age Verification for a few seconds before it disappear. Do you know how to solve this? Thanks for all the help!
Adding an attributes-based solution here.
I built this into Sygnal Attributes some time ago, essentially it lets you apply a timed-suppression to any elements you want- a popup, a modal, an alert, a special offer.
Just add the attriburtes to your containing element, and then inside of it, add an attribute to a close trigger, which will remove the element.
Advantage is the element is actually removed from the DOM, so you don’t have any costs of e.g. a video promo loading in the background. It’s also hidden at page load and only shown if it passes the suppression test.
All good!