Age Verification popup?

Can anyone help with adding an age verificiation pop up to my site? I only need it when people first log-in

Hi Jackie,

There's more than one way of doing this. 2 that I can think of:

1. Create an age verification page using Squarespace. On each page test a cookie to see whether age verification has been passed. If it has not been passed the user should be redirected to the age verification page.

2. Create a piece of code that is in the sitewide code injection point. This code would similarly check for presence of an age verification cookie value and, if age verification has not been provided a layer would obscure the screen and ask for age verification.

Hey! I am sorry I don't understand. Is there a certain area for creating an age verification page - I am confused.

Hey! No, it's not an out-of-the-box feature, but it could be implemented using custom scripting.

The caveat is that if a person disables scripting in their browser then they would bypass the verification process, but this is true of all verification processes, I think.

@silvabokis made it clear, it’s not available as “core functionality” of the platform, so if you want to add this, you need to have a developer cook something up for you.

I just faced this problem myself (although I needed a verification page, not a pop-up). I couldn’t find a solution that satisfied my requirements, so I had to came up with my own.

You can get my code at octli – GitHub

It has the JavaScript necessary, as well as other files that serve as example demonstrating how to use the JavaScript. It is explained how to do it in Squarespace without activating developer mode (a requirement of my client).

Here's how I accomplished it. It's a little cumbersome, but works perfectly for my needs. This approach requires the jQuery Cookie plugin – you can either host it externally, or just paste the code into your Code Injection as explained below. (Get the plugin here.)

First, paste the contents of jquery.cookie.js between two script tags in your Code Injection:

<script>
// contents of jquery.cookie.js go here
</script>

Followed by some HTML:

<div id="ageWrapper">
 <div id="agePopUp">
   <h2>Are you at least 21?</h2>
   <a href="#" id="ageOkay">Yes</a>
   <a href="#" id="ageBad">No</a>
 </div>
</div>

And then some jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 // put the popup at the start of the body
 $('#ageWrapper').prependTo($('body'));

 // check if the age has already been verified
 if (($.cookie('age')) !== 'true') { $('#ageWrapper').addClass('ageUnknown'); }

 // if the "yes" button is clicked, add a cookie and hide the popup
 $('#ageOkay').click(function() {
   $.cookie('age', 'true', { expires: 1, path: '/' });
   $('#ageWrapper').removeClass('ageUnknown');
 });

 // if the "no" button is clicked, take the user elsewhere
 $('#ageBad').click(function() {
   window.location.href='http://www.hasbro.com/mylittlepony/en_US/';
 });
});
</script>

Finally, some styles for the Custom CSS:

#ageWrapper {
 visibility: hidden;
 opacity: 0;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9000;
 background-color: rgba(32,23,19,.7);
 transition: visibility 0s ease-in-out .5s, opacity .5s ease-in-out;
}

#ageWrapper.ageUnknown {
 visibility: visible;
 opacity: 1;
}

#agePopUp {
 position: fixed;
 top: 50%;
 left: 50%;
 background-color: #fff;
 text-align: center;
 padding: 30px;
 width: 360px;
 height: 150px;
 margin-top: -105px;
 margin-left: -185px;
 box-sizing: border-box;
}

#agePopUp a {
 background-color: black;
 color: white;
 padding: 10px 20px;
 margin-top: 10px;
 display: inline-block;
}

Nice solution.

I tried adding your code as instructed but it doesn't seem to work. Is there anything I need to change? Thank you

Code seems to be working (at least to view the popup), however the I am unable to click through Yes and No. The popup is static and unresponsive. Any thoughts?

Thanks!

Cool! Because I need one of these too. :)

One very basic way of doing this without any code is by using the cover page feature. Create a cover page, set it as your home page and have one of the two buttons be "enter" with the age restriction text posted above and you're set, unless someone enters your site indirectly through a search engine or via social media.

Brilliantly simple @Zero !

I cannot get your code to work with my Squarespace site, please help!

I could not get this to work. Please help!

Thank you Cotupha, I've used your Octli js and it works like a charm!

This is a slightly modified version of Cotupha's solution:

Add this code globally: Settings > Advanced > Code Injection. Your "Age Gate" page needs the slug of "age-gate", or you need to edit that in the code (2 places).https://gist.github.com/jupitercow/721bce60317e4c87c977916244d2ecc0

Add this code just to the Age Gate page. This is usually a "Cover Page" under Pages > Not Linked. Click the gear icon, go to Advanced tab in the popup, paste this code. This sets the cookie and handles the redirect back to the requested content.https://gist.github.com/jupitercow/d890d8f68d5e54160e06ed7ccc1ef87d

Jcow, I am very interested in your cover page scenario, but I am a little confused on how to implement. Should I be using part of Cotupha's solution and part of yours? Or can I just create a cover page at /age-gate, inject your code in the appropriate places (headers?), and expect that it works? Right now, I have a cover page set up with the "Are you at least 18?" question and two buttons (yes and no). I also set it to home page since I wasn't sure if the javascript would make it load first or if I needed to set that in Squarespace. Thanks in advance for your help.

Any solutions that trigger a pop up on site enter instead of a cover page?

after struggling with this for a while i decided to go with https://agechecker.co/squarespace-age-verification

we really like using https://agechecker.co/ on our site - it shows up when people first open the site. we've set it to expire after a day so it won't show up again for a whole day for the same user. i guess you could set your expiry time to something really high?

got my developer to set it up with the code below and make it look nice - it's jake from https://developer30.com/ if anyone needs help with that.

copy the link for the github plugin. Add an "s" to the end of it. It should be ".js" not ".j"

we just did an agechecker age gate

I built an easy to install age-gate solution specifically for Squarespace. It's available here:

https://sf.digital/squarespace-age-popup

It's available for simple DIY installation, but we offer a full installation and customisation service (at additional cost) where we can brand the popup and the overlay to suit your needs.

Our product differs from other solutions in some important ways:

• It won’t affect your site’s SEO. Popups should only consume 15%-or-less of the page, otherwise your site may be penalised by search engines.
• The low purchase cost is a one-off payment. There are no monthly fees. 
• There are no limits on the number of visitors to your site. It will always work!
• We do not insert adverts or our own branding on this product.
• The popup will block content when a visitor first appears on your site, regardless of which page they view first. (If required it can appear on a single page.)
• This product is purpose built for Squarespace. We did not convert it from other platforms.
• Choose the URL where underage visitors are sent, or send them back to the site they came from.