Cookie Consent Generator

Banner Settings

Live Preview

<!-- Cookie Consent Banner - GDPR Compliant -->
<div id="cookie-consent-banner" style="
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  padding: 20px 24px;
  background-color: #1f2937;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
">
  <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
    <div style="flex: 1; min-width: 280px;">
      <p style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #f9fafb;">
        We value your privacy
      </p>
      <p style="margin: 0; font-size: 13px; color: #d1d5db; line-height: 1.5;">
        our website uses cookies to enhance your browsing experience, serve personalized content, and analyze our traffic.
        By clicking "Accept All", you consent to our use of cookies.
        <a href="/privacy-policy" style="color: #3b82f6; text-decoration: underline;">Read our Privacy Policy</a>
      </p>
    </div>
    <div style="display: flex; gap: 10px; flex-shrink: 0;">
      <button onclick="declineCookies()" style="
        padding: 10px 20px;
        border: 1px solid #4b5563;
        border-radius: 6px;
        background: transparent;
        color: #f9fafb;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
      ">Decline</button>
      <button onclick="acceptCookies()" style="
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        background-color: #3b82f6;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
      ">Accept All</button>
    </div>
  </div>
</div>

<script>
(function() {
  var banner = document.getElementById('cookie-consent-banner');
  var consent = localStorage.getItem('cookie-consent');

  if (!consent) {
    banner.style.display = 'block';
  }

  window.acceptCookies = function() {
    localStorage.setItem('cookie-consent', 'accepted');
    banner.style.display = 'none';
    // Fire analytics, tracking scripts here
    console.log('Cookies accepted');
  };

  window.declineCookies = function() {
    localStorage.setItem('cookie-consent', 'declined');
    banner.style.display = 'none';
    console.log('Cookies declined');
  };
})();
</script>