How To Set Up the New Squarespace Cookie Banner
In July 2024, Squarespace made updates to their website cookie banner functionality that make it easier to for website owners be compliant with website privacy laws.
If you are wondering why your Squarespace cookie banner looks a little different than it used to or you are setting up your cookie banner for the first time, this article will explain all things Squarespace cookie banners to help you out! (Caveat: I am NOT a lawyer and this is not legal advice!)
What are Cookies?
Cookies are small pieces of data that websites place on your device to remember information about you and recognize you when you return to the website in the future.
Websites use “essential” cookies to make functionality like customer accounts and shopping carts work on your website. A website can also use “non-essential” cookies to track things like how many unique visitors they have or to target marketing and advertising.
Learn more about how Squarespace uses cookies.
What is a Cookie Banner?
A cookie banner is notification that appears on a website to inform visitors that the website uses cookies and ask for consent to use “non-essential” cookies. The banner appears the first time a visitor visits a website and once consent is provided (or declined) Squarespace won’t show it again for 30 days. (This is controlled by an “essential” cookie!)
Do You Need a Cookie Banner?
Some regions of the world have very strict privacy laws that require websites to get EXPLICIT consent before using “non-essential” cookies. Because you never know where your website visitors are located, it’s a good idea to use a cookie banner and get EXPLICIT approval before capturing “non-essential” cookies. (The word on the street is that California has been suing small businesses for not complying with its privacy laws. And everyone knows about GDPR. Better safe than sorry!)
A cookie banner is not all you need to fully comply with privacy laws, but it definitely helps!
How Does a Cookie Banner Impact Website Analytics?
If a visitor does not accept “non-essential” cookies, your website analytics will not be 100% accurate. Every time a visitor stops by, Squarespace (or Google Analytics) thinks that visitor is someone new so it can make you look like you have more visitors than you really do. You also get less information about where your visitors are coming from. This is the price we pay for respecting the privacy of our visitors.
What’s New with Squarespace Cookie Banners?
Here is a summary of what changed in July 2024 with Squarespace cookie banners.
Cookie banner settings have moved! Most of the cookie banner set-up has moved to Settings > Website > Cookies and Data Privacy. There are also some new styling options that are under Site Styles > Accessories.
Styling options for cookie banners have changed. You can now assign one of your standard color themes to your cookie banner, there are more positioning options, and you can change the size of the text.
You can let users manage their cookie preferences. If “Manage Cookies” is turned on, visitors can choose what types of “non-essential” cookies they want to accept or decline, and you have the option to let them come back and change those preferences in the future. (This is something GDPR and California require so it’s a good thing to turn on!)
Accept/Decline/Manage buttons are assigned to your standard configured button types. Previously, you could choose whether you wanted your accept/decline options to be buttons, a close icon, or text links. Now these options are each assigned to your standard button types.
Visitors must explicitly accept to use cookies. It is no longer an option to close the cookie banner and implicitly accept cookies. With the new cookie banner, visitors have to explicitly click one of the buttons or it will not go away and “non-essential” cookies will not be placed.
How to Set Up Your Squarespace Cookie Banner
This is how I have my cookie banner set-up currently on my website. Pro tip: You can open any website in an Incognito or Private tab to see what the cookie banner looks like if you have already dismissed it for 30 days.
Here are my suggestions for how to configure your cookie banner to be user friendly and compliant.
Configure Your Cookie Banner
To configure your cookie banner, go to Settings > Website > Cookies and Data Privacy
This is where you set up which buttons to include, what the text on the banner will say, and how visitors can manage their cookie preferences (or not).
Cookie Banner – toggle this ON to show the cookie banner
Preview - this is a preview of what your banner will look like with the options you select below
Customize the Banner Style – this will take you away to the styles menu to set your color theme, position, and text size. Skip this for now and we will style it later.
Banner Text - This is where you configure which buttons and text you want to include on your cookie banner.
Accept Button Label – defaults to Accept
Manage Cookies Button – If you turn this ON, visitors can manage which cookies they want to accept right from this banner. (I turned mine on.)
Manage Button Label – defaults to Manage Cookies
Decline All Button – If you turn this button on, visitors can decline all non-essential cookies right from the banner. (I decided to NOT to include this button and just use the Manage Cookies button to keep the banner less cluttered but still give people a way to turn off cookies.)
Decline Button Label – defaults to Decline
Disclaimer Text – this is the text that displays on your cookie banner. You can keep the standard Squarespace default message or write something else. You can restore the default Squarespace message later if you change your mind. To be fully compliant, you should link to your Privacy Policy or separate Cookie Policy in this disclaimer text.
This is the text I use, feel free to copy mine and tweak it (but I am not a lawyer) and don’t forget to change the Privacy Policy link!
This website uses cookies🍪to keep things running smoothly and give you a great experience. You can accept cookies or manage your preferences below. Read my Privacy Policy for more details.
Saved Preferences – These are the settings for the button/banner that allows people to change their cookie preferences in the future.
Layout – You can choose a pill, a sub-footer, or you can hide this altogether and not allow people to change their preferences. I recommend keeping this ON! I use the pill and I made my footer a little bit bigger so it does not overlap my footer content. Check mine out in my footer.
Preferences Label – Defaults to Cookie Preferences
Advanced Privacy Settings
Activity Log – I keep this turned on so if there is an unusual spike in traffic to my website, I can see where it came from and what pages that person was looking at. (You can access the activity log in the Analytics section of your website). It is technically not privacy compliant to keep this on, but it is only kept for 7 days so it’s low risk for the privacy police. If you are worried about the privacy police, turn it off.
Non-Essential Cookies – Squarespace is just informing you here that because you are using a cookie banner, it will NOT place non-essential cookies until a visitor accepts.
2. Style Your Cookie Banner
To style your cookie banner, go to Styles > Accessories > Cookie Banner
This is where you configure the colors, position, and text size of your cookie banner.
Remember that cookies will NOT be tracked until the visitor EXPLICTLY accepts so you want the banner to be visible so they can accept (if they want to) so you get the most accurate website analytics.
Color Theme – you can select one of your standard color themes for your cookie banner (choose a theme that will stand out against your home page header)
Banner – You can select to show the banner as a box in any corner of your site or as a full banner on the top of bottom of your site. (A box on the bottom left or a banner across the bottom of the site are the most common locations for a cookie banner.)
Disclaimer Text Size: This defaults to .8rem and there is no need to change it!
The cookie banner buttons will inherit your websites button type styles which can be configured under Styles > Buttons and use the color settings in the color theme you chose above.
Accept uses the Primary Button Style
Decline uses the Secondary Button Style
Manage Cookies uses the Tertiary Button Style
** Any changes you make to button styles or color themes will apply everywhere on your site so be careful!
3. Customize Your Cookie Banner with CSS
Here are a couple of CSS customizations I like to use on my cookie banners. This code goes under Pages > Website Tools > Custom CSS.
//** Reduce the opacity of the cookie banner
.gdpr-cookie-banner {
opacity: .85;
}
//**Add a thin border around the cookie banner (change the hex code to one of your website colors)
.gdpr-cookie-banner {
outline: 1px solid #337F88;
}
Pro Tip: If your cookie banner was styled with CSS BEFORE July 2024 you may have noticed that it is no longer working! That is because Squarespace updated the CSS selectors used for the cookie banners and the old ones no longer work.
The main selector for the cookie banner: .sqs-cookie-banner-v2 is now .gdpr-cookie-banner
You can learn more about customizing your cookie banner with CSS and find all of the new selectors in this post by Inside the Square.
The Net Net
Squarespace’s cookie banner updates are a great improvement and provide more privacy protection for your website. Your Privacy Policy is another important part of the equation so make sure you have one and you link to it from your cookie banner. You can read more about Data Privacy and Squarespace to help ensure your website is compliant.
If you are looking for a robust tool to ensure your privacy policy, website terms & conditions, and cookie solution are fully compliant with all data privacy laws, Termageddon is a great solution. This is the tool I use for my all of my legal pages. It auto generates policies based on a few questions I answer about my business and those policies are automatically updated when laws change.
I am not currently using the Termageddon cookie banner solution, but if I had more third party tools embedded in my website, this would help ensure those cookies were managed correctly and included in my privacy policy.
You can save 10% with code SHANNAH or by using my affiliate link. (Full disclosure: I do get a small commission if you purchase using my code or link!)
