Adding a Cookie Banner to Squarespace

This article has been updated to take account of the changes to Squarespace's own Cookie Banner in December 2016.

Building a website for use within the UK or the European Union? You may need to warn your users about cookies.

The Law

Within the European Union we must normally warn website visitors if our website uses cookies. All Squarespace sites use cookies and so this is an issue for anyone in UK and Europe who is building a website. 

The requirement for the warning is due to the Privacy and Electronic Communications (EC Directive) Regulations 2003 (PECR). Regulation 6 states that we must tell website visitors that we are setting cookies and clearly explain what the cookies do and why. We must get the user’s consent and whilst this can be implied, it must be obvious.

One way to do this is to display a simple banner that states we are using cookies and directs the visitor to a page on our website for full information. The usual way to do this is to create a Privacy or Cookie Policy page, and include the cookie information on this page. The banner must appear no matter which page of our site they land on, because they may arrive on a page other than the home page. Once the visitor has seen the message, we have implied consent. It can then be removed and only appear again after a period of time, for example two or four weeks. 

Note: This article shouldn't be taken as legal advice - we're not qualified to advise you on the law. If in doubt about the law in your country, contact your legal representative or the appropriate authorities.

The Squarespace Cookie Banner

Squarespace Cookie Notice

In December 2016, Squarespace updated their built-in cookie banner (see the image above). They changed the default message in the banner to “We use cookies to help us improve, promote, and protect our services. By continuing to use the site, you agree to our cookie policy.” It was previously “We would like to place cookies on your computer to make this website better.”

They also added an optional Restrict Squarespace Analytics setting that stops the site from sending analytics cookies to visitors until they accept your cookie policy. Best of all, the wording can be changed, and you can introduce a link to your own cookie policy page.

However, the design has remained largely unchanged and I'd still argue that it doesn't have the usual Squarespace finesse. It's grey and bland with ugly grey buttons. Worse still, it pre-dates the change in the law that says we only need implied consent - the banner appears over and over again until it is dismissed.

Two Alternatives

We've updated this article to offer you two alternatives. You can modify the standard Squarespace cookie banner so that it looks more like the one on their own site (squarespace.com):

or you can build your own custom solution like this:

We've used the best ideas we could find and we've built our own for use on Squarespace sites. To use this banner you'll need to add a little javascript (jQuery) and some CSS. It's very straightforward but if you are worried, it's best to ask for some help.

Using the Standard Squarespace Banner

1. Before adding the banner, create a page on your site for your Privacy Policy or Cookie Policy. In these instructions, I've assumed that you've called it Cookie Policy and it has the URL /cookie-policy.

Tip: To hide this page from your navigation menu, add it to the Not Linked section. 

2. To add the Squarespace banner to your site, click Settings, click Advanced, and then click Code Injection.

3. Add the following code to the Header Code Injection box: 

<script type="text/javascript">
 Static.EU_COOKIE_POLICY = "top-left";
 Static.EU_COOKIE_TEXT = 'We use cookies to help us improve, promote, and protect our services. By continuing to use the site, you agree to our <a href="/cookie-policy" target="_blank">cookie policy</a>.';
 Static.EU_COOKIE_BUTTON_LABEL = 'X';
</script>

4. If your policy page has a different URL, replace /cookie-policy with your URL.

5. Click Save to publish your changes.

Note that the banner will not appear whilst you are logged in to your Squarespace site. To preview it, we recommend that you open a second browser window using Private browsing or Incognito mode.

If you are previewing the changes in another window (as suggested above) you should now see the standard grey Squarespace banner, but with an ugly 'X' button.

The final step is to add some styling using CSS.

6. Return to the main menu. Click Design and then click Custom CSS.

7. Add the following code:

/* styling the default Squarespace cookie banner */
.cookie-notice {
    /* Fix to top of browser */
    position: fixed!important;
    /* dimensions of banner */
    width: 82vw;
    padding-right: 18vw!important;
    /* color of banner */
    background: #121212!important;
    border: none!important;
    /* font size and colour */
    font-size: 12px!important;
    color: #ccc!important;
    line-height: 1em;
}

.cookie-notice a {
    /* white underlined link to cookie policy */
    color: white;
    text-decoration: underline;
}

.cookie-notice button {
    /* Replace 'Continue' button with X */
    margin-top: 0!important;
    position: absolute;
    background: #121212;
    border: none;
    font-style: normal;
    font-family: "freight-sans-pro";  
    font-size: 27px; //Adjust for font used 
    top: 2px; //Adjust for font used  
    right: 36px;
    color: white;
}

8. Save the changes.

9. If you have a preview window open, refresh it. You should now see a black banner that resembles the banner used on Squarespace's own site.

10. Depending on the template you are using and the fonts you've chosen, the 'X' may be badly placed or look too large. You can change the position and size by amending the last few lines of the code above (marked "adjust for font used"). You can also modify colours and fonts to suit your requirements.


Building Your Own Bespoke Cookie Banner

There are five steps to building your own cookie banner to replace the Squarespace banner:

  1. Add a link to jQuery library
  2. Add the javascript
  3. Add the CSS
  4. Style the banner 
  5. Enable the cookies

1. Add a link to the jQuery library

Log on to your Squarespace site and then navigate to the SETTINGS menu.

Under the WEBSITE section, click on Advanced.

Click on Code Injection.

You'll now see two boxes labelled HEADER and FOOTER. They may be empty or they may already contain code. If the header contains code like this (see below) that mentions jquery.min.js then you can leave it there.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>

If this code is not already in the box labelled HEADER then paste it in as the first two lines of code. This code allows your site to access the jQuery library hosted on Google. Without it, some of the code will not work.


2. Add the javascript

Add this code to the HEADER box below any existing code.

<!--- Cookie warning message --------------------------------------------------------------->
<script>
var dropCookie = false;                  // False disables Cookie for testing
var cookieDuration = 14;                // Number of days before cookie expires
var cookieName = 'ssAcceptedCookies';
var cookieValue = 'on';
 
function createDiv(){
    var bodytag = document.getElementsByTagName('body')[0];
    var div = document.createElement('div');
    div.setAttribute('id','cookie-banner');
    // Change href below if your cookie policy page link is not /cookies/
    div.innerHTML = '<p>We use cookies to give you the best experience on our website. By continuing, you agree to our <a href="/cookies/" rel="nofollow" title="Cookie Policy">Cookie Policy</a>. <a class="close-cookie-banner" href="javascript:void(0);" onclick="removeMe();"><span>X</span></a></p>';    
    bodytag.insertBefore(div,bodytag.firstChild); // Add the banner just after the opening <body> tag
    document.getElementsByTagName('body')[0].className+=' cookiebanner'; // Adds a class to the <body> tag when the banner is visible
    createCookie(window.cookieName,window.cookieValue, window.cookieDuration); // Create the cookie
}  
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*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;
} 
function eraseCookie(name) {
    createCookie(name,"",-1);
} 
window.onload = function(){
    if(checkCookie(window.cookieName) != window.cookieValue){
        createDiv(); 
    }
}
function removeMe(){
    var element = document.getElementById('cookie-banner');
    element.parentNode.removeChild(element);
}
</script>
<!--- End of Cookie script ----------------------------------------------------------------->

This javascript assumes that your cookie policy is on a page of your website with the url /cookies. If your cookie policy is called something else, change line 13 above.

Once you've added the javascript above you should see the banner appear at the top of your website, but it won't be formatted how you want it.

3. Add the CSS

Now we can add the CSS code to style the cookie banner. Click on Design then Custom CSS. Add the following code to the CSS editor.

/* Format the cookie banner --------- */
#cookie-banner { 
  max-width:100%;
  background:#000; /*change background color*/
}
#cookie-banner p { 
  padding:12px;
  padding-left: 20px;
  padding-right: 70px;
  font-size:1em;
  line-height:1.2em;
  text-align:left; 
  color:#ddd; /*change font color*/
  margin:0;
}
#cookie-banner a { 
  text-align:center; 
  color:#fff; /*change cookie policy link color*/
  font-weight:bold;
}
.close-cookie-banner {
  position: absolute;
  padding:10px; 
  top:0;
  right:0;
  text-align: right;
}
/*------------------------------------*/

4. Style the banner

When you have added this CSS you can format the banner to match your site. I've highlighted the areas where you can change the colours. 

5. Enable the cookies

When you've finished styling the banner we can enable the cookie that will hide the banner and keep it hidden for 14 days. When the user clicks on the 'X' the banner will be removed and a cookie will be dropped. The purpose of this cookie is to prevent the banner from reappearing within a period of time. By default this is set to 14 days but you can change this in the javascript (line 4).

To enable the cookie, go to the javascript you added earlier (Settings > Advanced > Code Injection). Change the third line to read:

var dropCookie = true;      // False disables Cookie for testing