Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jackierubbo

Age Verification popup?

Question

24 answers to this question

Recommended Posts

  • 0

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

https://www.soundfocus.co.uk/squarespace-age-popup

It's available for you to install yourself but for an additional charge we can install it and customise it for you to meet your brand requirements.

Edited by Paul2009
Initial Revision

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 2

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.

Share this post


Link to post
  • 1

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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

Edited by alanhouser

Share this post


Link to post
  • 1

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

Edited by john_blkltr

Share this post


Link to post
  • 1

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?

Share this post


Link to post
  • 0

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Edited by cotupha

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...