Iubenda logo
Start generating

Documentation

Table of Contents

Cookie Solution – Squarespace Integration Guide

Except for exempt categories of cookies, the Cookie Law also requires you to obtain users’ informed and active consent before storing cookies on a user’s device and/or tracking them. Scripts that install or could install cookies must be blocked before consent is obtained; users must be able to deny or withdraw consent, and they must be fully informed of what actions constitute consent. 

We suggest that you take a look at this article for further details on complying with the Cookie Law.

Our Cookie Solution makes it easy for you to meet these requirements by allowing you to:

  • easily inform users via banner and a dedicated cookie policy page (which is automatically linked to your privacy policy and integrates what’s necessary for cookie law compliance);
  • obtain and save cookie consent settings;
  • preventively block scripts prior to consent; and
  • keep track of consent and save consent settings for each user for up to 12 months from the last site visit.

You can collect consent via multiple mechanisms including continued browsing, scrolling, and/or specific clicking actions. Keep in mind though that allowed consenting actions may differ depending on the Member State law.

Setting-up the Cookie Solution

The process is straightforward:

If you’ve already integrated the privacy policy on your Squarespace site (which also includes the cookie policy if you’ve activated it), you can jump directly to “Embedding the Cookie Solution“. Otherwise, continue reading below.

Create your account then go to your Dashboard > website/app area:

Note

The Cookie Solution requires that you link to a cookie policy from you banner as legally required. If you have the cookie policy feature activated on your iubenda account (as explained here), the Cookie Solution automatically integrates your cookie policy into the solution once the option is selected. Otherwise, if you already have your own compliant cookie policy, you can simply insert your own link there. Either way, please remember that a cookie policy is required.

Embedding the Cookie Solution on your site

To configure the iubenda Cookie Solution you must modify the HEAD of your Squarespace site. To do so, you first need to click on Settings > Advanced > Code Injection.

Code Injection is a Squarespace premium feature available only on Business and Commerce plans.

On this screen that follows, you will need to copy paste your iubenda Cookie Solution code in the box of the Header section.

You can find your Cookie Solution code here:  Dashboard > [Your website/app] then Cookie Solution > Embed.

Squarespace - Cookie Solution
The IDs “12345678” are just samples; your siteId and cookiePolicyId will have their own IDs.

Now simply click on Save.

This will cause the iubenda cookie banner to appear on the page at each user’s first visit. User consent will be registered via the latter’s continued browsing activity and then memorized so that the Cookie Solution will not be reactivated on the same user’s next visit.

Squarespace - Cookie Solution

All available options to customize the cookie banner’s style and behaviour are described in this guide.

Few categories of cookies are exempt from the consent requirement. Therefore, you’ll need to block scripts from running until you get valid user consent.

How to implement prior blocking via manual tagging on your Squarespace site

Manual tagging is the method of prior-block we’ll be using for the tutorial below. You can view other methods here.

To set up prior blocking, you’ll need to make some minor changes to your site’s scripts. But it’s simple; just do the following:

  1. Identify the script/iframe for any additional services that are running on your website (e.g., Twitter follow button)
  2. Add some simple text to the HTML code (we’ll show you how below!)
  3. Save!

In this tutorial, we are going to block a Twitter follow button.

💡 Not sure which services you need to block? If you’re using a Cookie Policy generated by iubenda, the services listed in your Cookie Policy are most likely the ones you need to modify now.

In your account Dashboard, click Website and then click Edit

Then, find the script you need to modify (simply search for the service you want to block, in this case, it is the Twitter follow button) and then click on the Edit icon to open the code editor.

Now, we’re going to change the script. To do this, we will make 3 simple changes:
  • add this class: _iub_cs_activate to the script tags, and change the “type” attribute from text/javascripttext/plain
  • replace the src with data-suppressedsrc or suppressedsrc
  • specify the categories of the scripts/iframes with a special comma-separated data-iub-purposes attribute, e.g. data-iub-purposes="2" or data-iub-purposes="2, 3"

More about categories and purposes

Purposes are your legal reasons for processing the particular type of user data. Different scripts on your site will fall into different categories and serve different purposes. For example, Google Analytics may be used for measurement, while the Pinterest button may be used for experience enhancement (Purpose 3 below). Purposes are grouped into 5 categories each with an id (1, 2, 3, 4, and 5):

  • strictly necessary (id: 1)
  • basic interactions & functionalities (id: 2)
  • experience enhancement (id: 3)
  • measurement (id: 4)
  • targeting & advertising (id: 5)

For even more detailed info on categories and purposes, see our guide here.

Let’s take the Twitter follow button as an example:

We need to 1. Add the class and change the “type” attribute, 2. replace the src and 3. specify the categories.

And the code structure should be like this:

Prior blocking checkbox - Flow page
<p>Twitter follow button:</p>

        <!-- please note type="text/plain" class="_iub_cs_activate" data-suppressedsrc="..." (manual tagging) and data-iub-purposes="3" (per-category consent) -->
<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
  <script async type="text/plain" class="_iub_cs_activate" data-suppressedsrc="https://platform.twitter.com/widgets.js" data-iub-purposes="3" charset="utf-8"></script>
Now that you’ve made your changes, simply hit save, and you’re done.

Not sure if you’ve set up correctly? Check out the live example and FAQs below

Live example

This is an example that shows everything we have described above, you can use this code pen as a guide to see what happens before and after blocking scripts via manual tagging.

(see the example)

To demonstrate the cookie blocking feature, we’ve embedded a YouTube video, and a Twitter follow button:
Follow @iubenda

Both scripts are blocked through manual tagging. Since both the YouTube video widget and the Twitter follow button are part of the Experience enhancement purpose (id 3) we’ve added data-iub-purposes="3" to their scripts so that the Cookie Solution can properly identify them for release.

Click on the Accept button – or just activate the “Experience enhancement” toggle – to release these scripts (refresh the page to return to the starting point).

How can I tell if I’ve set prior blocking up properly?

As you can see in the code pen example, the Youtube and Twitter scripts do not load if you do not consent. (You can test this function again by opening this link (https://codepen.io/iubenda/pen/KKKxmVO/?editors=1000) in incognito mode in your browser)

After you have saved, open your site in an incognito mode and check if the scripts you have blocked via manual tagging stay blocked until you consent.

Please refer to this dedicated article if you’d like to know how to block cookies before consent using other options available. ➔ Take a look at Google Consent Mode as an alternative to prior blocking, Google Tag Manager to Simplify the Blocking of Cookies, or the IAB Transparency & Consent Framework and how to enable it.

See also