Improving the Squarespace Cookies Banner [Updated]

In this guide, we'll take a look at options for improving the look of the Squarespace Cookies Banner via Custom CSS.

Update: A more up-to-date version of this guide—including changes to the Squarespace plans and the introduction of GDPR—is now available. Click here to read more.

TL;DR

Copy and paste this code into Settings > Advanced > Code Injection (HEADER):

<script type="text/javascript">
Static.EU_COOKIE_POLICY = "bottom-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="/privacy" target="_blank">Privacy Policy</a>. <a class="accept">Continue</a>';
</script>

Copy and paste this code into Design > Custom CSS (and tweak as you wish):

.cookie-notice {
  width: 100%;
  position: fixed !important;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 14px !important;
  text-align: center;
  border: none !important;
  color: white !important;
  background-color: black !important;
  padding: 5px !important;
}

.cookie-notice a {
  color: white !important;
  text-decoration: underline !important;
  cursor: pointer;
}

.cookie-notice button {
  display: none !important;
}

Introduction

European legislation requires that all website owners inform visitors of cookies placed by their website and to receive visitors' consent to use certain types of cookies. Therefore, for the time-being at least, websites run from the UK must include a "Cookies Banner".

Fortunately, Squarespace give us a helping hand with this, and you can read about how to add a Cookies Banner to your Squarespace website on this support page. However, simply adding the code snippet results in this:

This is what the default cookie banner looks like...

Not a great looking banner, placed in the corner of the screen that (unnecessarily) obscures too much of the page. And, by Squarespace standards, the styling is quite poor.

So let's see how we can improve it.

Step 1 of 3. Paste the Code

Copy the code from this support page (or just below).
Log in to Squarespace, then go to Settings > Advanced > Code Injection
In the section marked HEADER, paste the code snippet and click Save. It will look like this:

<script type="text/javascript">
    Static.EU_COOKIE_POLICY = "bottom-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 cookie policy.';
    Static.EU_COOKIE_BUTTON_LABEL = 'Continue';
</script>

This JavaScript actually places the following HTML code on your website (whichever page loads first) if the visitor has not been to the site before:

<div class="cookie-notice" style="z-index: 300000;padding: 20px; background: #eee; color: #333; font-size: 12px; border: 1px solid #ccc; position: absolute; bottom: 0px; left: 0px;" id="yui_1234567890">We use cookies to help us improve, promote, and protect our services. By continuing to use the site, you agree to our cookie policy.<br><button class="accept" style="padding: 5px; margin-top: 5px;">Continue</button></div>

Step 2 of 3. Adjust the Cookie Banner Code

There are a few issues with this code and the result, in my opinion:

CHANGE THE 'CONTINUE' BUTTON

Firstly, we don't need a button when we could just have an inline link to allow the visitor to "Continue" (i.e. dismiss the banner), which is what most people will do. So:

Delete the last line of the code snippet (EU_COOKIE_BUTTON_LABEL). We will need to do more to remove the button itself, but this code is superfluous.
Add to the end of the EU_COOKIE_TEXT, within the inverted commas, the following code:

<a class="accept">Continue</a>

Important: You must include the class "accept" so that the Squarespace system knows to dismiss the banner when it is clicked, and you must use double-quotation marks.

ADD A LINK TO YOUR POLICY

Secondly, we need to make sure there is a link to your Cookies Policy (usually part of a wider Privacy Policy). I will cover this in a separate guide. So, in the EU_COOKIE_TEXT, replace the words "cookie policy" with the following snippet of code:

<a href="/privacy" target="_blank">Privacy Policy</a>

This creates a link that will take the user to [your-domain]/privacy on your website. Obviously, you will need to create this page to host your actual policy. You could change this to /cookies, if you prefer a dedicated page, for example.

Step 3 of 3. Improving the Styling

The remainder of the work is to customise the CSS, so go to Design > Custom CSS. Then we'll take it step-by-step:

(a) Remove the unnecessary button

To do this, we have to override the built-in Squarespace behaviour, and make the button "not display", with this code:

.cookie-notice button {
  display: none !important;
}

(b) Make the banner full width

Most cookie banners go across the entire page, and remain fixed to the top or bottom until they are dismissed. To sort this out, add the following code:

.cookie-notice {
  width: 100%;
  position: fixed !important;
}

(c) Style Links

There are two links in our cookie banner: one to the Privacy Policy and one to "Continue" (dismiss the banner). They need styling to match each other, and to look like links. To do this, add the following code:

.cookie-notice a {
  text-decoration: underline !important;
  cursor: pointer;
}

(d) Style to Match your Site

The remaining additions are made to make the banner look a little nicer!

In the code below, I have styled the banner as a compact, black bar across the bottom of the page:

.cookie-notice {
  width: 100%;
  position: fixed !important;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 14px !important;
  text-align: center;
  border: none !important;
  color: white !important;
  background-color: black !important;
  padding: 5px !important;
}

.cookie-notice a {
  color: white !important;
  text-decoration: underline !important;
  cursor: pointer;
}

You can tweak these to make your banner look more "in keeping" with the rest of your website. The most obvious suggestions are to change the:

'background-color' and 'color' (font colour) to match your site's theme;
'font-family' to match the font you use for the body text on your website;
'padding' to make the banner taller or shorter.

I hope you find this Squarespace Guide helpful. If you're having any problems, I would be happy to help. You can leave a comment below, send me a message on Twitter or use the contact form here.

GuideDavid Hughes25 August 2017squarespace, cookies, banner, legislation17 Comments