Cookie Consent Banner

Customize

Layout

Colors

Behavior

Live Preview

<!-- Cookie Consent Banner -->
<style>
  .cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #1a1a1a;
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    z-index: 99999;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .cookie-consent.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
  .cookie-consent-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .cookie-consent-accept {
    padding: 10px 24px;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .cookie-consent-accept:hover {
    opacity: 0.85;
  }
  .cookie-consent-link {
    color: #e0e0e0;
    opacity: 0.7;
    font-size: 13px;
    text-decoration: underline;
    transition: opacity 0.2s;
  }
  .cookie-consent-link:hover {
    opacity: 1;
  }
</style>

<script>
(function() {
  if (localStorage.getItem('cookie-consent') === 'accepted') return;

  var banner = document.createElement('div');
  banner.className = 'cookie-consent';
  banner.innerHTML = '<span>' +
    'We use cookies to improve your experience. By continuing to browse, you agree to our use of cookies.' +
    '</span>' +
    '<div class="cookie-consent-actions">' +
    '<button class="cookie-consent-accept">Accept</button>' +
    '<a href="/privacy-policy" class="cookie-consent-link">Learn More</a>' +
    '</div>';

  document.body.appendChild(banner);

  banner.querySelector('.cookie-consent-accept').addEventListener('click', function() {
    localStorage.setItem('cookie-consent', 'accepted');
    banner.classList.add('hidden');
    setTimeout(function() { banner.remove(); }, 400);
  });
})();
</script>

How to add this to Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste the generated code into the Footer section.
3. Click Save and refresh your site.
4. The banner will appear on every page. Once accepted, it won't show again (stored in localStorage).
5. Update the Learn More URL to point to your actual privacy policy page.

Why Squarespace Sites Need a Cookie Banner

If your Squarespace site uses Google Analytics, Facebook Pixel, YouTube embeds, or any third-party integration, your site sets cookies on visitors' browsers. Under GDPR (European Union), CCPA (California), LGPD (Brazil), and similar regulations, you are legally required to inform visitors about cookie usage and obtain their consent before setting non-essential cookies.

Squarespace 7.1 does not include a built-in cookie consent banner. The platform relies on its own cookie notice in the EU, but this only covers Squarespace's own cookies — not the third-party cookies your Code Injection scripts set. If you have added Google Analytics, ad tracking pixels, or any external scripts through Code Injection, you need your own cookie consent solution.

GDPR vs CCPA: What's the Difference?

GDPR(General Data Protection Regulation) applies to any site that serves visitors in the European Union. It requires explicit opt-in consent before setting non-essential cookies. A cookie banner under GDPR must appear before any tracking scripts fire, and visitors must actively click “Accept” before cookies are set.

CCPA (California Consumer Privacy Act) takes a different approach. It requires that you inform California residents about data collection and give them the right to opt out, but it does not require opt-in consent. A notice banner with a link to your privacy policy satisfies CCPA requirements for most websites.

Our generator creates a banner that works for both frameworks. The banner displays a clear message about cookie usage, an accept button, and a link to your privacy policy. For strict GDPR compliance on sites that serve EU visitors, you would additionally need to block tracking scripts until the user clicks Accept — our banner provides the UI foundation for that workflow.

How to Install on Squarespace

Installing the cookie consent banner takes under a minute. Go to Settings → Advanced → Code Injection in your Squarespace admin panel. Paste the generated code into the Footer section and click Save. The banner will appear on every page of your site immediately.

The banner uses localStorage to remember the visitor's choice. Once they click Accept, the banner will not appear again on subsequent visits. If they clear their browser data or visit from a different device, the banner will reappear.

Why Not Use a Plugin?

Third-party cookie consent plugins for Squarespace typically cost $5 to $15 per month. Over a year, that is $60 to $180 for a simple banner that displays a message and a button. These plugins also load external JavaScript from their own servers, which adds latency to every page load and creates a dependency on a third-party service.

Our generator produces self-contained code that lives entirely on your site. No external dependencies, no monthly fees, no performance penalty. The generated code is under 2KB — most cookie consent plugins load 50 to 200KB of JavaScript.

Does Squarespace have a built-in cookie consent banner?

Squarespace 7.1 has a basic cookie notice for EU visitors, but it only covers Squarespace's own cookies. If you use Google Analytics, Facebook Pixel, or any third-party scripts via Code Injection, you need a separate cookie consent banner to cover those additional cookies. Our generator creates a lightweight banner you can add through Code Injection.

Is a cookie banner legally required for my Squarespace site?

If your site serves visitors in the EU and sets non-essential cookies (analytics, advertising, third-party embeds), yes — GDPR requires explicit consent. If you serve visitors in California, CCPA requires a notice about data collection. Even if you are not legally required, a cookie banner builds trust with visitors and is considered a best practice.

Where do I paste the cookie consent code in Squarespace?

Go to Settings → Advanced → Code Injection in your Squarespace admin panel. Paste the generated code into the Footer section and click Save. The banner will appear on every page. Footer injection is correct because the banner script needs the page DOM to be loaded before it can create the banner element.

Will this cookie banner slow down my Squarespace site?

No. The generated code is under 2KB total (HTML, CSS, and JavaScript combined). It loads inline with your page — no external requests, no additional HTTP connections. Compare this to third-party cookie consent plugins that typically load 50-200KB of JavaScript from external servers.

Can I customize the colors and position of the cookie banner?

Yes. The generator lets you customize the background color, text color, button colors, banner position (full-width bar, bottom-left card, or bottom-right card), and theme (dark, light, or glassmorphism blur effect). You can also customize the message text, button text, and privacy policy link.

Does the banner remember when a visitor accepts cookies?

Yes, by default. When a visitor clicks Accept, their choice is saved in localStorage. The banner will not appear again on subsequent visits from the same browser. You can disable this behavior in the generator settings if you want the banner to appear on every page load.

How much do cookie consent plugins cost for Squarespace?

Third-party cookie consent solutions for Squarespace typically range from $5 to $15 per month ($60-$180 per year). Our generator is completely free and produces self-contained code with no ongoing dependency or subscription.