Cookie consent banner

The overlay that asks permission before non-essential cookies and trackers load. The 'accept all' bar on every EU site.

that annoying popup about cookiesthe accept-all barcookie popupcookie notice barthe GDPR popupcookie consent modalcookie bannerthe accept or reject cookies thing

See it

Live demo coming soon

What it is

The banner is the visible half of a consent mechanism. Under the EU ePrivacy rules read together with GDPR, anything stored on or read from a user's device that is not strictly necessary to deliver the service needs permission first: analytics, ad pixels, session replay, A/B testing, embedded video from a tracking host. Strictly necessary things (the session cookie, the cart, the CSRF token) need no prior consent, which is not the same as needing no mention: most defensible banners still list them in the preferences screen as a locked, always-active category so people can see what runs regardless.

What a defensible banner does: appears before any non-essential script runs, offers reject as prominently and in as few clicks as accept, splits choices by purpose (analytics, marketing, personalization) with nothing pre-ticked, and leaves a persistent way back in so someone can withdraw consent later, usually a small footer link or floating button.

Gotcha: most banners are theater. The tags are hardcoded in the page head or fire from a tag manager that never checks the stored choice, so the pixels load while the banner is still asking. Consent has to gate the loading, not just record an opinion about it. The other common fine is design: a bright 'Accept all' button next to a grey text link that opens a three-screen settings maze is a dark pattern, and regulators have said so repeatedly.

Ask AI for it

Build a cookie consent banner for this site. Requirements: it renders before any non-essential script loads and blocks those scripts until a choice is made; the first screen offers three equally weighted buttons, 'Accept all', 'Reject all', and 'Manage preferences', with identical size, contrast, and click cost; the preferences screen has one toggle per purpose (strictly necessary, locked on and explained; analytics; marketing; personalization) with every optional toggle off by default. Store the choice with a timestamp, the policy version, and the exact purposes accepted. Re-prompt when the policy version changes, and add a persistent footer link named 'Cookie settings' that reopens the preferences screen so consent can be withdrawn. Keep it keyboard navigable, trap focus while open, announce it to screen readers, and do not block the page content behind an unclosable overlay.

You might have meant

consent management platformcookie policyeprivacy directiveopt in vs opt outgdpr