Cookie Consent Banner Generator

Create a basic cookie banner snippet with localStorage consent handling.

Mention analytics cookiesMention marketing cookies

Preview

Infinio Tools uses cookies to run core features, measure analytics.

Embed Snippet

<div id="cookie-banner" style="position:fixed;bottom:16px;left:16px;right:16px;z-index:9999;padding:16px;border-radius:16px;background:#111827;color:#ffffff;box-shadow:0 20px 40px rgba(0,0,0,.25);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;">
  <div>
    <strong>Infinio Tools</strong> uses cookies to run core features, measure analytics.
    <a href="/privacy-policy" style="color:#2563eb;margin-left:8px;">Privacy policy</a>
  </div>
  <div style="display:flex;gap:8px;">
    <button id="cookie-reject" style="padding:10px 14px;border-radius:10px;border:1px solid #374151;background:transparent;color:#fff;">Reject</button>
    <button id="cookie-accept" style="padding:10px 14px;border-radius:10px;border:none;background:#2563eb;color:#fff;">Accept</button>
  </div>
</div>
<script>
  const banner = document.getElementById("cookie-banner");
  document.getElementById("cookie-accept")?.addEventListener("click", () => {
    localStorage.setItem("cookie-consent", JSON.stringify({ essential: true, analytics: true, marketing: false, acceptedAt: new Date().toISOString() }));
    banner?.remove();
  });
  document.getElementById("cookie-reject")?.addEventListener("click", () => {
    localStorage.setItem("cookie-consent", JSON.stringify({ essential: true, analytics: false, marketing: false, acceptedAt: new Date().toISOString() }));
    banner?.remove();
  });
</script>