Cookie Consent Banner Generator

Create the front-end code for a consent banner with clear choices. This generator is a technical starter, not legal advice and not a substitute for the consent mode or certified CMP requirements that may apply to your advertising setup.

Live preview

This generates a consent interface and hooks, not a guarantee of legal compliance.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><section class="stg-cookie stg-box" aria-label="Cookie preferences"><h2>Your headline</h2><p>Add a clear message for your visitors.</p><div class="stg-categories" hidden><p>Necessary: always enabled</p><label><input type="checkbox" data-category="analytics"> analytics</label><label><input type="checkbox" data-category="preferences"> preferences</label><label><input type="checkbox" data-category="advertising"> advertising</label></div><div class="stg-controls"><button class="stg-button" data-consent="all">Accept all</button><button class="stg-button" data-consent="reject">Reject non-essential</button><button class="stg-button" data-consent="preferences">Preferences</button><button class="stg-button" data-consent="save">Save preferences</button></div></section><button class="stg-reopen">Privacy choices</button><script>window.stgConsent={necessary:true,analytics:false,preferences:false,advertising:false};const banner=document.querySelector('.stg-cookie');try{const saved=JSON.parse(localStorage.getItem('stg-consent-v1'));if(saved&&saved.version===1){window.stgConsent=saved.choices;banner.hidden=true;}}catch{}document.querySelector('.stg-reopen').onclick=()=>banner.hidden=false;banner.querySelectorAll('[data-consent]').forEach(button=>button.onclick=()=>{const action=button.dataset.consent;if(action==='preferences'){banner.querySelector('.stg-categories').hidden=false;return;}const choices={necessary:true,analytics:false,preferences:false,advertising:false};for(const key of ['analytics','preferences','advertising'])choices[key]=action==='all'||action==='save'&&banner.querySelector('[data-category='+key+']').checked;window.stgConsent=choices;try{localStorage.setItem('stg-consent-v1',JSON.stringify({version:1,choices}));}catch{}window.dispatchEvent(new CustomEvent('stg:consentchange',{detail:choices}));banner.hidden=true;});</script></body></html>

What this generator does

Accept All, Reject Non-Essential, and Preferences actions.
Category toggles for necessary, analytics, preferences and advertising.
First-party consent storage with versioning.
Hook functions that your own scripts can read before loading optional tags.

How to use

Choose the consent categories used by your site.
Write plain-language labels for each category.
Customize banner style and button order.
Set a consent-version string so policy changes can request consent again.
Copy the output and connect the hooks to your actual tag-loading logic.

Best practices

Never load optional analytics/advertising before the visitor’s choice where consent is required.
Do not preselect optional categories.
Provide a persistent way to reopen preferences.

Frequently asked questions

Does this make my site GDPR or CCPA compliant?

No tool can guarantee legal compliance. It generates a technical consent interface that must be configured for your actual data practices and legal obligations.

Can I connect it to Google tags?

Yes, through explicit callbacks or your tag manager, but the integration must reflect your real consent configuration.

Cookie Consent Banner Generator

Live preview

What this generator does

How to use

Best practices

Frequently asked questions

Related tools & guides

Privacy Policy Generator

Terms of Service Generator

Privacy Policy