Ability to add cookie/session management for interactions/windows

I am trying to create an overlay window that covers the entire screen the first time a visitor comes to the site and it simply asks them if they are over the age of 21. If they click the button that says ‘yes - I am over 21’ then the overlay goes away. If they click ‘no - I am younger than 21’ then it redirects to a page saying they are too young for the content of this site.

This overlay needs to pop up no matter what page they enter the site from and should only ever popup once per session.

Is there a solution that works well with Webflow? I created a page (the one titled Age Gate) that has the layout on it so I could see what I wanted it to look like. Initially I had thought of just setting it as the home page but that only works if the user enters from the base url.

Thanks for any help!


Here is my public share link: https://preview.webflow.com/preview/creekside-cannabis?preview=99d2d362e8970bd7ed3267e7d376ca98

Hi Shawn,

This can easily be done within Webflow with interactions and without any custom code. However, for the website to remember the option the user clicked it would require custom code.

Here is a tutorial how to create such a pop up modal:

Tell me if you get stuck.

@shawnmcgaff

I used a little script to show an intro/overlay once per browser session for a client. It works like a charm :wink:

In use example: http://www.highlandseng.com/

This script is working by saying "if the thing with an ID of “splash” is not here, then show the thing with a class of “splash_section”, then it sets the thing with an ID of “splash” as “true” in session storage, so the next time the script runs (you’ll put it in your sitewide “footer code” section within the site settings) it won’t won’t run beyond the first line because it has been set to “true”, (until the next time the person closes out their browser and comes back)…

How to use it:

  1. Create your overlay, pop-up, or whatever the thing is. Put it in its own wrapper at the very top of your site structure - I’ve included a quick screenshot below to illustrate what I mean. You’ll give it BOTH a class of splash_section AND an ID of splash. Or… you can modify the class/ID setup in the script below to suit your class/ID names.

  2. In your case, make it a Webflow symbol so you only have to make changes on one page if needed, and put it at the top of every page of your site that you are worried somebody might sneak into as a minor :wink:

  3. Put this script in the footer section of your Custom Code section, within your site settings. Don’t forget to wrap it in script tags…

     jQuery(document).ready(function($){
         
     if (sessionStorage.getItem('splash') !== 'true') {
     $('.splash_section').show()
     sessionStorage.setItem('splash','true');
     }
    
     });
    

Disclaimer: I’m not proficent in javascript or jquery… this is just a modified script from a solution of found somewhere on the internet… I have no more info or knowledge to offer beyond this.

Link to the original/source article below:
https://www.html5andbeyond.com/session-storage-display-popup-advert/

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.