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