A good cookie banner offers Accept all and Reject all side by side, with a way to choose by category, and keeps every non-essential toggle off until the visitor acts. Below are four original banner designs to edit and copy, a checker that flags risky choices, and the Google Consent Mode code that pairs with them.
| Choice | Lower risk | Higher risk |
|---|---|---|
| Refusing | Reject all on the first screen | Only Accept all, or reject hidden in settings |
| Category toggles | All non-essential toggles off by default | Analytics or ads switched on in advance |
| Doing nothing | No non-essential cookies until a choice | Continuing to browse treated as consent |
| Changing your mind | A link to reopen settings on every page | No way back once chosen |
Updated
Most banner galleries show screenshots of other companies' banners without saying whether they follow the rules. The examples here are our own designs, live and editable, and each one is paired with what the UK regulator's guidance actually says about refusing, defaults and silence. This page explains design patterns; it is not legal advice.
Layout: Bottom bar, Corner box, Centred box
What your banner does
Preview
We use cookies to run this site and, if you agree, to measure visits.
Analytics
Reject all Accept all Choose
No risky choices found in what you picked.
A design aid based on published ICO guidance, not legal advice.
Each preview runs in a sandbox with scripts off, so the buttons do nothing here. Copy the markup and connect the buttons to your own consent code.
The most common layout. Accept and Reject share one style; Choose opens your settings panel.
<div style="position:fixed;left:0;right:0;bottom:0;background:#111827;color:#f9fafb;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:14px system-ui">
<p style="margin:0;flex:1 1 260px">We use cookies to run this site and, if you agree, to measure visits. <a href="/cookies" style="color:#93c5fd">Cookie policy</a></p>
<button style="padding:8px 14px;border-radius:8px;border:1px solid #f9fafb;background:#f9fafb;color:#111827">Reject all</button>
<button style="padding:8px 14px;border-radius:8px;border:1px solid #f9fafb;background:#f9fafb;color:#111827">Accept all</button>
<button style="padding:8px 14px;border-radius:8px;border:1px solid #f9fafb;background:transparent;color:#f9fafb">Choose</button>
</div>Takes less space on large screens. On a phone, let it stretch to the full width.
<div style="position:fixed;right:16px;bottom:16px;max-width:320px;background:#fff;border:1px solid #d1d5db;border-radius:14px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);font:14px system-ui">
<strong>Cookies on this site</strong>
<p style="margin:6px 0 12px">Essential cookies keep the site working. We would also like to use analytics cookies.</p>
<div style="display:flex;gap:8px">
<button style="flex:1;padding:8px;border-radius:8px;border:1px solid #1d4ed8;background:#1d4ed8;color:#fff">Reject all</button>
<button style="flex:1;padding:8px;border-radius:8px;border:1px solid #1d4ed8;background:#1d4ed8;color:#fff">Accept all</button>
</div>
</div>Necessary cookies are shown as always on; every other box starts unticked.
<form style="max-width:380px;border:1px solid #d1d5db;border-radius:14px;padding:16px;font:14px system-ui">
<strong>Cookie settings</strong>
<label style="display:block;margin-top:10px"><input type="checkbox" checked disabled> Necessary (always on)</label>
<label style="display:block;margin-top:6px"><input type="checkbox"> Analytics</label>
<label style="display:block;margin-top:6px"><input type="checkbox"> Advertising</label>
<div style="display:flex;gap:8px;margin-top:12px">
<button type="button" style="flex:1;padding:8px;border-radius:8px;border:1px solid #374151;background:#fff">Reject all</button>
<button type="button" style="flex:1;padding:8px;border-radius:8px;border:1px solid #374151;background:#fff">Save choices</button>
<button type="button" style="flex:1;padding:8px;border-radius:8px;border:1px solid #374151;background:#fff">Accept all</button>
</div>
</form>A small link in the footer of every page lets visitors change their mind at any time.
<footer style="font:13px system-ui;color:#4b5563;border-top:1px solid #e5e7eb;padding-top:10px">
© 2026 Harbor Street Bakery · <a href="/privacy">Privacy</a> · <button style="border:0;background:none;color:#1d4ed8;text-decoration:underline;padding:0;font:inherit">Cookie settings</button>
</footer>If your site uses Google tags, set the default before the tags load and update it when the visitor chooses. The parameter names below are the ones in Google's consent mode documentation.
| Parameter | What it covers | Values |
|---|---|---|
| ad_storage | Storage such as cookies related to advertising | granted or denied |
| analytics_storage | Storage such as cookies related to analytics, for example visit duration | granted or denied |
| ad_user_data | Consent for sending user data to Google for online advertising (added in v2) | granted or denied |
| ad_personalization | Consent for personalised advertising (added in v2) | granted or denied |
The default call goes before your Google tag snippet. wait_for_update gives the banner 500 milliseconds to send an update before tags fire.
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'wait_for_update': 500
});
// Call this from your Accept all button
function acceptAll() {
gtag('consent', 'update', {
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted'
});
}
</script>Each button should save the choice (a first-party cookie or browser storage both work) and then load or skip the tags for each category. Reject all saves a refusal too, so the banner stays closed on the next page.
If you use Google tags, set the consent default to denied before any tag loads, then send an update with the granted categories when the visitor accepts.
In the UK, cookie consent falls under PECR and the ICO's guidance on storage and access technologies. In the EU, the ePrivacy rules and the GDPR's definition of consent apply, and the European Data Protection Board publishes guidelines on consent. Wording and enforcement differ by country, so treat the checker here as a design aid.
The UK ICO's page on managing consent describes good practice as a mechanism that makes it as easy to refuse consent as it is to accept, and its bad-practice example is a banner with Accept all but no Reject all. Rules elsewhere are set by each country's authority, so check the guidance for the countries you serve.
The ICO says silence or inactivity does not qualify as consent, and labels a pop-up that treats continued use as consent as pre-enabling cookies without consent. If a visitor ignores the banner, keep non-essential cookies off.
Cookies that are strictly necessary for something the visitor asked for, such as a shopping basket or a login, fall under an exemption. The ICO notes that cookies that are helpful or convenient but not essential still require consent.
It is a way to tell Google tags whether the visitor agreed. You set a default with gtag('consent', 'default', ...) before tags load, then call gtag('consent', 'update', ...) when they choose. Version 2 added the ad_user_data and ad_personalization parameters alongside ad_storage and analytics_storage.
Either can work. A bottom bar leaves the page readable, while a centred box gets a quicker decision but blocks content. What matters more is that both choices are equally easy and nothing non-essential runs first.
Related: Cookie policy generator, Privacy policy generator, React cookie consent banner, GDPR statement generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.