The Squarespace Cookie Banner

Instructions for the Squarespace Cookie Banner, by Less Stress Design.

so what is a cookie banner anyway?

What’s a cookie banner? It’s shop talk for those of us who thrive online for a living. It’s not, however, on the tip of everyone else’s tongue. Thus, I get this question a lot from my website design clients. And you may be wondering why cookie banners are more prevalent now?

Due to the 2017 and 2018 data breach events by Facebook, more people are aware and concerned with what data is being collected about them during their time online and how this information collected is used. I get it, that’s a reasonable request. I want to know too.

In Spring 2018, the EU mandated a set of regulations for the world to follow in order to protect their citizens concerning data collection and use. This set of regulations is called the GDPR, General Data Protection Regulation. It is in effect for all websites that people from the EU may access. So, basically, all of them.

The reality is, the EU was first, but more regulation is most likely coming from other countries as well. It makes sense to get in compliance now.

cookie banner vs cookie policy

So what’s a cookie banner? A cookie banner is what Squarespace calls the notice that appears on websites informing visitors of that website’s cookie policy. It’s not mandatory to have this message displayed, yet. However, if there’s a possibility of having European Union visitors on your site then you want to display it, rather than expose yourself to fines.

Your cookie policy is the section of your privacy policy that explains in clear language what information is collected on website visitors and how you use that information. Websites usually have analytics that capture visitor data such as ip addresses, how long they stay on a page or site, and will record information that a visitor readily submits such as an email address captured when a visitor signs up for a newsletter or other freebie, or information collected during check out when purchasing a product.

The visitor has a right to know and to opt out of having data collected on them unless it’s required for purchases. The cookie policy informs visitors what is collected and how it’s used, with instructions on how to opt out or have information about them removed.

The cookie banner is there to get their permission that you may be collecting data on them during their visit.

The styling options for this box or bar on Squarespace is rather limited. At first, it was really limited, and rather unattractive. So other Squarespace experts wrote some code and posted it online so us other designers who don’t write code had better options. Awesome!

Squarespace quickly responded with a few more styling options and I’m confident in their responses to feedback and expect more to come.

Since I mainly write this blog to help out my design clients, giving them instructions for their sites that I teach them to manage on their own, this post will cover how to access the settings for the cookie banner, change style of banner, change wording, and change the location of the Squarespace cookie banner on their pages.

how to create and/or change a squarespace cookie banner

How to set up a cookie banner on a Squarespace website.

Once you log into your Squarespace account, click on your website thumbnail, and you will see the website main dashboard appear as pictured above. (I created these graphics in Canva, which is very versatile and easy to use! I teach you the basics for free in another blog post you can access here.)

Scroll down to “Settings” and click the > arrow next to it.

Navigate to Cookies & Visitor Data in Squarespace dashboard to set up the cookie banner.

Now you will see the Settings Dashboard. Scroll down to “Cookies & Visitor Data” and click the > arrow next to that. Now you will see the settings for creating a cookie banner on your Squarespace website. There will be 8 possible actions for you to take to style your cookie banner. I split this dashboard into 2 separate graphics below to walk you through the instructions.

  1. Enable Cookie Banner: Click on “Enable Cookie Banner” circle, a check mark will appear and other styling options will appear that were hidden before enabling.

  2. A text box is shown where you type in whatever you want your message to read on your cookie banner. Not sure how to start? There’s a bar under this text box that says “RESTORE DEFAULT COOKIE MESSAGE”. When you click that, the default message populates itself into the text box. If this satisfies you, then this step is done. If you find the default message too sterile for your brand, then jazz it up using your unique voice and style. Delete the default message from the box and use your best copy writing skills to convey your cookie message. You can use the link icon to create a link for visitors to view your cookie/privacy policy. To do that, highlight the word(s) you desire and click the link icon. A box will open where you can select a page in your content, like Privacy Policy, or you can enter an external link or upload a file.

  3. Cookie Banner Type: Squarespace lets you choose either to have a full width bar that extends across your website, and you can choose if you want it to appear at the top of your website or the bottom, below the footer. Or you can choose a pop-up style.

  4. Cookie Banner Position: Whichever you choose, when you click the circle your styling options will appear for that choice. Choose a bar, and it will ask you top or bottom? Choose pop-up, and it will ask you to pick a corner where you want it to appear: top left, top right, bottom left, bottom right?

How to enter the cookie banner message in Squarespace.

Squarespace clearly states this is not intended as legal advice, and so do I. The responsibility of data collection, privacy policies and cookie policies rests solely with the website owner. I advise each of my clients to research and write or purchase their own policies and I will install what they give me. Everyone’s business is unique to their offerings, calls to action on their site, and third party apps that collect data as well.

5. Cookie Banner Theme: Squarespace offers two options of color for your cookie banner, light or dark. The light color is a soft gray with dark text, and the dark theme is black with white text. You can see the banner box or bar change as you make your selection.

How to finish enabling a cookie banner on a Squarespace website.

6. Cookie Banner CTA Type: This is where you choose how you want your call to action to look within the cookie banner. The goal of the cookie banner is to get visitors to accept your cookie policy, giving their permission for collecting data while they browse your website. Your message entered in the text box above it, may say that continuing to use your website or by clicking “ok” or another CTA they are agreeing to your cookie policy. Your options here are (a). “text” which is whatever you write in the next section, underlined. (b). “button”, which is a square around your CTA text. (c). “icon”, which is just a black “x” for the visitor to close the banner. In fact, any of these choices will close the cookie banner for the visitor when clicked.

7. Cookie Banner CTA Text: Here is where you enter the text (word or words) you want your visitor to take action on, unless you chose icon, then no text required here. My cookie banner currently says “Continue”. Clear and simple, I didn’t overthink it. However, you may want a bit more personality coming through and could enter “Gotcha’!”, “Got it!'“ or whatever language your tribe uses to agree with each other.

8. Squarespace Analytics: Squarespace wants to know how if they should use cookies on your site or not. These options are for you to toggle on or off independently of each other; it’s not necessarily an either/or option here. If you check “Disable Squarespace Analytics Cookies”, a new option will appear asking “Always”? Checking this box means you want cookies off even if your website visitor accepts you cookie policy by clicking your CTA (call to action) within your cookie banner. Otherwise, toggling (is that a word? - it is for me! I use Google as a verb too.) the disable button turns off cookies only if you visitor doesn’t press your CTA. “Enable Activity Log” lets you choose whether you want to continue to see the Activity Log in your Analytics section of your site. The Activity Log provides ip addresses of site visitors for the past seven days.

There you have it, the basic instructions for setting up your cookie banner in Squarespace. I’ll include some links below for bloggers who have provided code for further personalizing the cookie banner with styling tweaks like adding fonts, colors, borders and other brand specific bling.

As always, thanks for reading! -Angela Meredith of Less Stress Design

Like this post? Then give it some love (♥) below and share it!

Blog signature of Angela Meredith of Less Stress Design, a Squarespace website designer in Fort Mill, SC, Charlotte, NC area.

Get Fancy With Your Cookie Banner: (involves adding code)

Kerstin Martin

David Hughes

Station Seven