Has anyone built an age gate using cookies in Webflow?

Community resources General
1

Looking for some advice on the best way to code up an age gate (similar to this https://driftlessglen.com/ )

I am looking to store a variable in sessionStorage that will be set on click and remove the overlay that houses the age verification content. Allowing viewers to interact with the website. Once they return the sessionStorage would be cleared and they would be asked to verify age again.

thanks in advance.

-m

2

Hey @osully93! Hope you’re well. Welcome to the community!

I actually assisted @myonke with this (almost) exact task a few weeks back!

The difference is that I used Local Storage, as Michael wanted the user to have to re-confirm after 1 month. However, your approach is easier and you can modify the gist of code linked in the post to match what you need. (Replace every instance of localStorage in my code with SessionStorage - everything else will be the same.)

Hope that helps! :slight_smile:

1 Like
3

Also, you can remove any instance of “moment”, “expire”, or anything else that has to do with time in that snippet of code. (Including the very first line of my script where I reference the moment.js library - a library that makes dealing with time easier)

Those were solely for the purpose of expiration after 1 month. You only need the WF Permission lines.

4

@ mattvaru thanks a ton for this!!! So If I am uunderstanding you correctly the following edited script should do the job:

<script>

var Webflow = Webflow || [];

Webflow.push(function () {

let permission = localStorage.getItem('wfPermission');
if (permission == 'TRUE' && comparison == true) {
    $("#modal").hide();
}
else {
    $("#modal").show();
}

$("#btnYes").click(function () {
    localStorage.setItem('wfPermission', 'TRUE');

});

$("#btnNo").click(function () {
    localStorage.setItem('wfPermission', 'FALSE');

    $("#ageInfo").hide();
    $("#ageRestrict").show();
});

});

</script>
1 Like
5

I edited your script to remove some unnecessary values (time related things), but yes, it should work!

You should note that the script references IDs, so you’ll have to give your elements the same IDs (Like a “yes I am 21” button an ID of “btnYes”) OR change the script to match your existing IDs.

6

Hi guys,

I need a similar functionality for my website.

Where do I insert this code? :smiley: I already created the pop up with a Yes/No box but I’m stuck here as I’m not a tech guy.

Many thanks all!