Cookie Banner Generator

Generate the HTML, CSS, and JavaScript for a simple cookie consent banner that you can copy-paste into your site to offer an “Accept / Decline” choice, with the visitor’s choice remembered in their browser. All the code is built locally, with no server.

Message

“Accept” button label

“Decline” button label

Link label

Link URL (privacy policy)

Position

Background color

Text color

“Accept” button color

Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.

Copy-paste code

<style>
#byteryo-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
#byteryo-cookie-banner a { color: inherit; text-decoration: underline; }
#byteryo-cookie-banner .byteryo-cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
#byteryo-cookie-banner button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
#byteryo-cookie-accept { background: #22c55e; color: #fff; }
#byteryo-cookie-decline { background: transparent; color: inherit; border: 1px solid currentColor !important; }
</style>

<div id="byteryo-cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie consent">
  <p style="margin:0">
    Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.
    <a href="/confidentialite">En savoir plus</a>
  </p>
  <div class="byteryo-cookie-actions">
    <button id="byteryo-cookie-decline">Refuser</button>
    <button id="byteryo-cookie-accept">Accepter</button>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'byteryo_cookie_consent';
  var banner = document.getElementById('byteryo-cookie-banner');
  if (!banner) return;
  var stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'accepted' || stored === 'declined') {
    banner.style.display = 'none';
    return;
  }
  document.getElementById('byteryo-cookie-accept').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'accepted');
    banner.style.display = 'none';
    // TODO: activer ici vos scripts soumis au consentement (analytics, pub...)
  });
  document.getElementById('byteryo-cookie-decline').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'declined');
    banner.style.display = 'none';
  });
})();
</script>

How it works

Customize the message, button labels, and colors, preview the result, then copy the complete HTML/CSS/JS block into your site: paste it just before the closing </body> tag of your page. The script stores the visitor’s choice in their browser’s local storage so the banner doesn’t reappear once they’ve answered.

Is this banner enough for GDPR compliance?

This generator provides a functional technical foundation (display, choice, storage), but actual compliance also depends on what you do with cookies: non-essential cookies (analytics, advertising) must stay disabled until the user clicks “Accept”. Adapt the “TODO” comment in the generated JavaScript to activate your scripts only after consent, and consult a legal professional if your site handles sensitive data.

Can I modify the generated code after copying it?

Yes. The code is a standard starting point that requires no external dependencies or framework: you can freely adapt it to your site’s visual identity or integrate it into an existing component.

The code is generated entirely in your browser: none of your information is sent to an external server.