Streaming live at 10am (PST)

Help adding session storage to this popup question

Hey friends,

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

Here is my share link and the live staging site if anyone is able to help. I would really appreciate it. Thank you!

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.

id


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.

Cheers!

EDIT: One other thing — I built a staging site, accessible at verifyage.webflow.io. Read-only link is https://preview.webflow.com/preview/verifyage?utm_source=verifyage&preview=44d8351759a187dfbe195183220b23c1.

1 Like

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.

Here my new share link if you have time to see what I messed up.

Thank you again!

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.)

1 Like

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?

1 Like

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.)

1 Like

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!

1 Like

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 :slight_smile: All good!

1 Like

Glad you got it resolved! I’m assuming the opacity got reduced to 0 instead of Display: None within the “Yes” interaction?

1 Like

Exactly haha; I knew it right after I pressed send!

1 Like

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.

Here’s the project link: https://preview.webflow.com/preview/age-verification-gate?utm_medium=preview_link&utm_source=designer&utm_content=age-verification-gate&preview=5903c3d8c80a2744a6b3e2dded155364&mode=preview

If anyone has a moment to peek at it, can you tell me what I’m doing wrong?

Thanks

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.

Let me know! Happy to help. :slight_smile:

1 Like

Sorry about that!

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.

Much thanks on this issue.

1 Like

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!

2 Likes

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.

link: https://preview.webflow.com/preview/amsterdam-brewboys?utm_medium=preview_link&utm_source=dashboard&utm_content=amsterdam-brewboys&preview=ec0011ffd2c9ccd0e56817c2f7c731fb&mode=preview

Appreciate the help and have a great day!

hey @mattvaru I am having a small problemthe thing is i have apreloader bg also witht the modal so what is happpening is the preloader is not getting removed by the js and only themodal is getting removed. so can u suggest me what should i do? Webflow - Copy of LP3

Hey got it figured out thank youu!