Adding a Cookie Banner to Squarespace

This is an old guide written in 2016. I've written a new guide to the Squarespace Cookie Banner that was released on 2 August 2018. The newer guide explains how to style the new GDPR-ready cookie banner. Click the link above to read the newer guide.

The Law

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

This has been the case since 2011 when the Privacy and Electronic Communications (EC Directive) Regulations 2003 (PECR) were amended and it became law to tell your website visitors is you set non-essential cookies and obtain their consent. Regulation 6 states that we must tell website visitors that we are setting non-essential cookies and clearly explain what the cookies do and why, unless they are essential to the running of the site.

So what's essential? Essential means that the cookie is strictly necessary to the visitor to allow them to complete their online request. For example, remembering what is in their basket during online shopping or ensuring their security during a banking or payment transaction. Cookies that are helpful or convenient but not essential to the visitor, or that are only essential for your own purposes as the website operator, still require consent. Analytics are not essential.

GDPR

Under GDPR, cookies must be treated as personal data if they collect any personal data, which, under GDPR, includes IP addresses. It's also important to remember that although third-party cookies are not owned by the sites they are dropped on, organisations that allow these cookies can still be held liable if they collect personal data.

How to Comply

One way to comply 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.

Want to display it at the bottom?

We've received a number of enquiries asking how you can display it at the bottom. To do this, you can add some CSS like this:

.cookie-notice {
position: fixed !important;
top: auto !important;
bottom: 30px !important;
left: 30px !important;
right: auto !important;
}

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