Age Verification Pop-up

There are laws that restrict the sale of certain products and services to underage people. If you run a Squarespace website to sell such products, you must prove that you took all reasonable steps to ensure that you didn't sell a product to anyone who is underage.

We're not going to cover that here, but a common first step is to display a warning to website visitors, explaining that the site is for people over the minimum legal age. Squarespace doesn't do this 'out of the box', so we've built a simple pop-up that you can customise and add to your Squarespace website. Here's an example of what it can look like:

Example Age Restricted Content Pop-Up

How does it work?

When someone visits your website for the first time, they'll see the pop-up. Your website will be displayed 'underneath' the pop-up, but a semi-transparent overlay will prevent them accessing the site until they click one of the buttons in the pop-up.

If they tap the Yes button, the pop-up will disappear (in an animated way) and they'll be allowed to access your site. A cookie will be created on their computer so that the pop-up doesn't reappear for a set period of time. You define the period in minutes!

If they click the No button, they'll see a message explaining that they cannot visit the website. A button in the pop-up allows them to return to the website they were viewing previously.

You can try it here, using the password 'demo'.

Message when user clicks no

Can it be customised?

Yes! You can customise everything about the pop-up. For example, you can modify the wording to make it suitable for your site or you can completely change the language. This includes the wording on the buttons (Yes, No and Go Back). You can also change the colours of everything - the text, the background and the border.

You could also resize the pop-up if you wanted to, but we think it's pretty flexible already. We've made it 400 pixels wide x 250 pixels high and centered it on the display and we've made it responsive so that on smaller mobile screens the width is reduced to 320 pixels.  

How can I add this to my Squarespace site?

It's quite straightforward to add this to your Squarespace website. If you're familiar with copying and pasting javascript into the Code Injection area and CSS into the Custom CSS Editor you can follow the instructions below.

If you're not confident about doing this, we're happy to help. Book us for an hour and we'll add it to your site. Paid customisation options are also available on request.

Installing the Pop-up

Log on to your website and go to Design > Custom CSS.

In the CSS Editor, paste the following style information:

/* CSS for soundfocus Age Verification Popup ---------- */
#verify-age {
  z-index: 5000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Website overlay before age is confirmed */
  background-color: rgba(0,0,0,0.3);
  transition: 500mS;
  .va-window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 250px;
    margin-left: -(400px/2);
    margin-top: -(250px/2);
    overflow: hidden;
    padding: 40px;
    background-color: #fff;
    border:6px solid #B40035;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transition: 700mS;
    /* Size settings for mobile */
    @media (max-width: 410px) {
    width: 320px;
    height: 276px;
    margin-left: -(320px/2);
    margin-top: -(276px/2);
    }
    span {
      display: block;
      text-align: center;
      margin-bottom: 10px;
      font-family: proxima-nova;
      &.title {
        /* Colour and size of title */
        color: #B40035;
        font-size: 24px;
      }
    }
    button {
      border: 0;
      margin: 0;
      padding: 0;
      width:48%;
      height:60px;
      color:#FFF;
      font-size: 18px;
      /* Color of buttons */
      background-color: #B40035;
      margin-top:20px;
      font-family: proxima-nova;
      transform:scale(1);
      transition: .2s;
      &.va-back {
        display:block;
        float:none;
        margin:auto;
        background-color: #fff;
        color:#B40035 !important;
        margin-top:20px;
      }
      &.yes {
        float:left;
      }
      &.no {
        float:right;
      }
      &:hover {
        transform:scale(1.1);
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        background-color: lighten(#B40035,10%);
      }
      /* Colour of 'Go Back' button on hover */
      &.va-back:hover {
        background-color: #E5C476;
      }
    }
    .va-underBox {
      position:absolute;
      width: 400px;
      height: 250px;
      padding: 40px;
      top:100%;
      left:0;
      right:0;
      /* Background of sorry message */
      background-color: #B40035;
      transition: 700mS;
      box-sizing:border-box;
      * {
        color:#fff !important;
      }
    }
  }
  &.va-hidden {
    opacity:0;
    visibility: hidden;
    .va-window {
      transform:scale(0.5);
    }
  }
  &.va-under {
    .va-window .va-underBox {
      top:0;
    }
  }
}
/* end of CSS for soundfocus Age Verification Popup ---------- */

All the settings for the colours and the font styles are contained in the code above. If you look through the code you'll see that we've used the Proxima Nova font for the pop-up as this is a popular font in Squarespace templates. If your site doesn't use the Proxima Nova font already, you'll need to change the font to one that you're using. 

When you've added the CSS above, it's time to add the script.

Go to Settings > Advanced > Code Injection.

Check the Header and Footer windows for existing code. Take care not to delete anything that already exists. 

Add the following code to the Footer window.

<!--- Age Verification Popup by soundfocus -------------------------------------------------->
<script>
var dropCookie = true;          // False disables cookie for testing
var cookieDuration = 5;         // Number of minutes before cookie expires
var cookieName = 'sfAgeConfirmed';  // Name of cookie
var cookieValue = 'Legal';  // Value of cookie when visitor is of legal age

function createDiv(){
    //Add div with ID of 
    var bodytag = document.getElementsByTagName('body')[0];
    var div = document.createElement('div');
    var html = '';
        html += '<div class="va-window">';
        html += '<span class="va-title">Age Restricted Content</span>';
        html += '<span>Please confirm you are above the legal drinking age in your country.</span>';
        html += '<button class="yes" onclick="overAge()">Yes</button>'; 
        html += '<button class="no" onclick="underAge()">No</button>';
        html += '<div class="va-underBox">';
        html += '<span class="va-title">Sorry!</span>';
        html += '<span>You need to be of legal drinking age to visit our website.</span>';
        html += '<button class="va-back" onclick="goBack()">Go Back</button>';
        html += '</div>';
        html += '</div>';

    div.setAttribute('id','verify-age');
    div.innerHTML = html;
    bodytag.insertBefore(div,bodytag.firstChild); // Add the popup just after the opening <body> tag
    document.getElementsByTagName('body')[0].className+=' confirmAge'; // Adds a class to the <body> tag when the age has not been confirmed
}   
  
function createCookie(name,value,minutes) {
    if (minutes) {
        var date = new Date();
        date.setTime(date.getTime()+(minutes*60*1000)); 
        var expires = "; expires="+date.toGMTString(); 
    }
    else var expires = "";
    if(window.dropCookie) { 
        document.cookie = name+"="+value+expires+"; path=/"; 
    }
} 

function checkCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
} 

//If visitor clicks over age button
overAge = function () {
  //Create a cookie to record this action   
  createCookie(window.cookieName,window.cookieValue, window.cookieDuration); // Create cookie
  //Hide the pop-up this time
  document.getElementById("verify-age").classList.add("va-hidden");
}
//If visitor clicks the under age button
underAge = function () {
  //Show them the Sorry message 
  document.getElementById("verify-age").classList.add("va-under");
}
//If visitor clicks the back button, send them to previous page in their history
goBack = function () {
    window.history.back();
}

//When this page is loaded
window.onload = function(){
    //Check if the cookie exists. If it doesn't
    if(checkCookie(window.cookieName) != window.cookieValue){
      //Show the age verification popup
      createDiv(); 
    }
}
</script>
<!--- End of Age Verification Popup script -------------------------------------------------->

Save the changes and test this code by refreshing the page. We recommend that you do this before you make any changes to the code. Once you are happy that it is working correctly, you can change the wording of the message or anything else.

To help you test the pop-up, we've set the cookie duration to just five minutes. If you click Yes and then refresh the page within five minutes, the message will not reappear. After five minutes, the pop-up will appear again. You can change the cookie duration in line 4 of the script (above).

We hope you found this pop-up useful for your Squarespace site.