Age Gate for Yes/No Button w/Session Cookie

Design help Custom code
1

Hello everyone!

I am on deadline to implement an age gate with a simple yes/no button by EOD tomorrow.

The age gate should appear on any page the user lands on, while visiting the site for the first time. After they select “Yes”, they no longer see the age gate appear as it is stored that the user selected “Yes”. The “No” button will just link out to an external link, so nothing needs to be worked on there.

I was doing research and I found this video by Finsweet - #21 - Create an age gate to confirm the user's age - YouTube However it includes a date element that I do not need. It appears that a code needs to be set in the Custom Code area of the project settings to have it appear on any page, I just don’t know what that code is.

Right now, I have the element on the home page that hides once a user selects “Yes”. I am wondering if the Age Gate needs to be on its own page? Should it be an element that lives on every page of the site? I’m at a dead end here ):

I would appreciate any help on this matter as I am still fresh to javascript. Thank you for your time and support!

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

2

That Finsweet example is not really a good one.
(bad for SEO since it links to another page If I remember it correctly )

You can achieve age-gate easily with custom code.
1). Create an Age-gate Element. NOT page. you can create it as pop up, or whatever
2). Prepare JsCookie library
3). When loading the page. Check if the cookie already exists with JS. if not show the age-gate.

function checkAgeValidCookie() {
                        const ageValid = Cookies.get('ageValid')
                        if (ageValid) {
                              // user already pass age-gate, hide age-gate
                              $('.AGE_GATE').hide()
                        }else{
                             // show age-gate or whatever logic you use to show age-gate
                        }
                  }

4). When the user clicks the “yes” button on age-gate. Just set a cookie.

$('.YES_BUTTON').on('click', () => {
                        Cookies.set('ageValid', true, {expires: 7})
                        $('.AGE_GATE').hide()
            })

If you have any questions just ask me. I’ll try to come here and check.

My example I did a while ago:
https://webflow.com/website/Age-gate-with-cookie-and-form-validation

Shameless plug:
If you need me to do it for you. Just contact me on Upwork. I can do it in just a few bucks.
https://www.upwork.com/freelancers/~01993b9a585a347664

3

Thank you for your time on this! I’ve tried to implement this, and the cookie seems to be working however when I refresh the age gate is showing again. I’ve went ahead and contacted you on Upwork!