Improving the Squarespace Cookies Banner for GDPR

The following guide is an update to my original post on improving the Squarespace cookies banner, this time taking into consideration GDPR and changes to the Squarespace plans.

In May 2018, the EU introduced the General Data Protection Regulations (GDPR), which regulates how individuals and organisations may collect, use and retain personal data. This includes the use of cookies on websites.

As such, when developing a Squarespace site, it is advisable to either restrict all cookies or include a cookies banner with a link to a "Cookies Policy" or "Privacy Policy" that explains the use of cookies on your website.

Unfortunately, the built-in Squarespace cookies banner is rather ugly! This guide will help you to improve things...

Requirements: This guide will not work on the "Personal" Squarespace plan, as it requires the use of Code Injection and Custom CSS only available on the "Business" plan and e-commerce plans.

Disclaimer: I am not a legal advisor, and this guide should not be considered legal advice. You should always consult a legal expert about your specific requirements.

Step 1 of 3. Turn on the Cookies Banner and Restrict Cookies

  • Firstly, log in to Squarespace, then go to Settings > Cookies & Visitor Data
  • Select Enable Cookie Banner
  • In the text area, write a message, preferably with a link to your Cookies or Privacy Policy

My text reads: "By continuing to browse or by clicking “Accept Cookies,” you agree to the storing of cookies on your device to analyse site usage. See our Privacy Policy for details."

  • You could also click on Use the Default Cookie Message
  • Scroll down and also select Disable Squarespace Analytics Cookies. This stops Squarespace from applying cookies until the user accepts their use.

Step 2 of 3. Paste the JavaScript Code

  • Copy the following code.
  • Then go to Settings > Advanced > Code Injection
  • In the section marked HEADER, paste the code snippet and click Save.
(function cookieNotice(){
  Static.EU_COOKIE_BUTTON_LABEL = "Accept Cookies";
  Y.on("available", function(){
    var cookie = this.getDOMNode();
    document.body.insertBefore(cookie, document.body.children[0]);
    cookie.addEventListener("click", function(e){
      if (e.target.matches(".accept")) window.dispatchEvent(new Event("resize"));
    }); 
  }, ".cookie-notice");
})();

Basically, this code changes the button label to "Accept Cookies", rather than the default "Continue", providing a more positive acceptance of the use of cookies. The code then changes the location of the cookies banner, moving it to the very top of the page.

Step 3 of 3. Improve the Styling

  • Copy the following code.
  • The go to Design > Custom CSS
  • Paste the code into the text area
@bg-color: #191607;
@fg-color: #fff;

.cookie-notice {
  padding: 10px !important;
  position: relative !important;
  border: none !important;
  background: @bg-color !important;
  color: @fg-color !important;
  font-size: 14px;
}

.cookie-notice p {
  margin-bottom: 0;
  padding-right: 50%;
  line-height: 1.5;
}

.cookie-notice br {
  display: none;
}

.cookie-notice .accept {
  margin: 0 !important;
  padding: 2px 8px !important;
  background: none;
  border: 1px solid @fg-color;
  position: absolute;
  top: 49%;
  right: 10px;
  transform: translateY(-50%);
}

The two variables on the first lines allow you to set the background colour ("bg-color") and foreground colour ("fg-color") once. The remaining code simply styles the banner to be full width and clear across the top of the page, placing the "Accept Cookies" button off the right.

Obviously, feel free to adapt these settings to suit your site's style.

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 Hughescookies, squarespace, gdprComment