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.