Cookie Consent Generator
A cookie banner generator that shows a live preview as you type. Set the wording, categories, colours and position, then copy a self-contained HTML, CSS and JavaScript snippet that remembers the visitor’s choice. It all runs in your browser.
This cookie consent generator builds a small banner you drop into any site, no plugin or account needed. Write the heading and message, switch on the analytics and marketing categories your site actually uses, pick colours and a position, and watch the preview update on every change. When it looks right, copy the snippet: it’s plain HTML, CSS and vanilla JavaScript that stores the choice in localStorage and hides itself on the next visit. Use it as a cookie consent builder for a GDPR consent banner, then wire your own scripts to fire only after consent.
Necessary cookies are always on. Toggle the optional ones your site uses.
We value your privacy
We use cookies to run this site, measure traffic, and improve your experience. You can accept all cookies or reject the ones that are not essential. Read our Privacy Policy
<!-- Cookie consent banner. Generated with dev.hivly.net. -->
<div id="cc-banner" class="cc-banner cc-bottom cc-bar" role="dialog" aria-label="Cookie consent" aria-live="polite">
<div class="cc-body">
<div class="cc-text">
<p class="cc-title">We value your privacy</p>
<p class="cc-msg">We use cookies to run this site, measure traffic, and improve your experience. You can accept all cookies or reject the ones that are not essential. <a class="cc-link" href="/privacy">Read our Privacy Policy</a></p>
</div>
<div class="cc-actions">
<button type="button" class="cc-btn cc-ghost" data-cc="reject">Reject non-essential</button>
<button type="button" class="cc-btn cc-ghost" data-cc="settings">Preferences</button>
<button type="button" class="cc-btn cc-solid" data-cc="accept">Accept all</button>
</div>
<div class="cc-prefs" hidden data-cc="prefs">
<label class="cc-row">
<input type="checkbox" data-cc-cat="analytics" checked>
<span><strong>Analytics</strong><small>Helps us understand how the site is used.</small></span>
</label>
<label class="cc-row">
<input type="checkbox" data-cc-cat="marketing" checked>
<span><strong>Marketing</strong><small>Used to personalise ads and content.</small></span>
</label>
<button type="button" class="cc-btn cc-solid" data-cc="save">Save choices</button>
</div>
</div>
</div>
<style>
.cc-banner{position:fixed;z-index:2147483647;box-sizing:border-box;padding:1rem 1.25rem;
background:#0f1e37;color:#eef2f8;border-radius:12px;
box-shadow:0 10px 40px rgba(0,0,0,.35);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;}
.cc-banner{left:0;right:0;bottom:0;}
.cc-banner.cc-bar{border-radius:0;}
.cc-body{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;max-width:70rem;margin:0 auto;}
.cc-banner.cc-box .cc-body{flex-direction:column;align-items:flex-start;}
.cc-title{margin:0 0 .25rem;font-weight:700;font-size:15px;}
.cc-msg{margin:0;opacity:.9;}
.cc-link{color:#f59e0b;text-decoration:underline;}
.cc-actions{display:flex;flex-wrap:wrap;gap:.5rem;}
.cc-btn{cursor:pointer;border:0;border-radius:8px;padding:.55rem .9rem;font-size:14px;font-weight:600;font-family:inherit;}
.cc-solid{background:#f59e0b;color:#1a1206;}
.cc-ghost{background:transparent;color:#eef2f8;border:1px solid #eef2f840;}
.cc-prefs{width:100%;margin-top:.5rem;display:flex;flex-direction:column;gap:.6rem;}
.cc-row{display:flex;gap:.6rem;align-items:flex-start;}
.cc-row small{display:block;opacity:.75;font-size:12px;}
.cc-row input{margin-top:.2rem;accent-color:#f59e0b;}
</style>
<script>
(function(){
var KEY = 'cookie_consent';
var CATS = ["necessary","analytics","marketing"];
var el = document.getElementById('cc-banner');
if (!el) return;
var prefs = el.querySelector('[data-cc="prefs"]');
function save(consent){
try { localStorage.setItem(KEY, JSON.stringify({ consent: consent, ts: Date.now() })); } catch(e){}
el.style.display = 'none';
window.dispatchEvent(new CustomEvent('cookie-consent', { detail: consent }));
}
function all(v){ var o = {}; CATS.forEach(function(c){ o[c] = c === 'necessary' ? true : v; }); return o; }
function fromForm(){
var o = { necessary: true };
el.querySelectorAll('[data-cc-cat]').forEach(function(i){ o[i.getAttribute('data-cc-cat')] = i.checked; });
return o;
}
// Already answered? Stay hidden.
try {
var stored = JSON.parse(localStorage.getItem(KEY) || 'null');
if (stored && stored.consent) { el.style.display = 'none'; return; }
} catch(e){}
el.addEventListener('click', function(ev){
var t = ev.target.closest('[data-cc]');
if (!t) return;
var action = t.getAttribute('data-cc');
if (action === 'accept') save(all(true));
else if (action === 'reject') save(all(false));
else if (action === 'settings' && prefs) prefs.hidden = !prefs.hidden;
else if (action === 'save') save(fromForm());
});
})();
</script>How it works
- 1
Write the banner
Set the heading, message and button labels, and add a link to your privacy policy if you have one.
- 2
Pick categories and style
Turn on the analytics and marketing categories you use, then choose colours, a layout and where the banner sits.
- 3
Copy the snippet
Copy or download the HTML, CSS and JS and paste it before the closing body tag on your site.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- What does the generated cookie banner do?
- It shows your consent message with Accept and Reject buttons, optionally a preferences panel, and saves the visitor’s choice in localStorage so the banner stays hidden on return visits.
- Does this make my site GDPR compliant on its own?
- No. The banner is the visible part of a GDPR consent banner, but real compliance means not loading analytics or marketing scripts until the visitor accepts. The snippet fires a “cookie-consent” event you can listen for to load those scripts.
- How do I read the consent choice in my own code?
- The snippet dispatches a window “cookie-consent” event with the categories the visitor allowed, and also writes them to localStorage under “cookie_consent”. Check that value before loading each script.
- Do I need a cookie library or a paid service?
- No. The output is dependency-free HTML, CSS and JavaScript. There is nothing to install and no external request, so it works on a static site as easily as a full app.
- Can visitors change their mind later?
- The preferences panel lets them tick individual categories before saving. To let them reopen the banner after that, clear the “cookie_consent” key from localStorage or add your own “Cookie settings” link that does so.
More tools
More from the Hivly network
Free sister tools on our other sites.
