Jump to content

Age Verification popup?

Recommended Posts

  • Replies 24
  • Created
  • Last Reply

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.

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

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.

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 7 months later...

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).

Link to comment
  • 9 months later...

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;
}

Link to comment
  • 2 months later...
  • 1 month later...

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.

Link to comment
  • 5 months later...
  • 8 months later...
  • 7 months later...

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

Link to comment
  • 2 weeks later...

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.

Link to comment
  • 1 month later...
  • 2 weeks later...
  • 3 months later...
  • 6 months later...
  • 9 months later...
  • 1 month later...

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

age-verification-extension-tile.thumb.png.9c7298fcca488258257ae85497a03817.png

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.