Cookie Banners: The Complete Guide

A cookie banner is the interface between your website and your visitors' right to privacy. It is the mechanism through which you obtain — or fail to obtain — legally valid consent for non-essential cookies. Getting it right is not optional: it is a legal requirement across the European Union and an increasing number of jurisdictions worldwide.

This guide covers what cookie banners are, why they exist, what the law demands, and how to implement one that is both compliant and user-friendly.

What Is a Cookie Banner?

A cookie banner is a user interface element — typically displayed when a visitor first arrives on your website — that informs the user about the site's use of cookies and similar tracking technologies, and provides a mechanism for the user to grant or withhold consent.

The term "cookie banner" is somewhat informal. In legal terms, it is a consent management interface. It exists because of two intersecting EU laws:

• The ePrivacy Directive (2002/58/EC), Article 5(3) — requires prior consent before storing or accessing information on a user's device (with narrow exceptions for strictly necessary cookies).
• The General Data Protection Regulation (GDPR), Articles 4(11) and 7 — defines what constitutes valid consent: it must be freely given, specific, informed, and unambiguous, given by a clear affirmative action.

Together, these laws mean that before you set an analytics cookie, a marketing pixel, or any other non-essential tracker, you must ask the user and receive a clear "yes."

Legal Requirements for Cookie Banners

A compliant cookie banner is not just a notification — it is a consent mechanism. The European Data Protection Board (EDPB) and national data protection authorities have issued extensive guidance on what banners must include. Here are the non-negotiable requirements:

What Must Be Shown

1. A clear description of purpose. Users must understand why cookies are being used, not just that they exist. "We use cookies to improve your experience" is insufficient. You must explain the specific purposes: analytics, advertising, personalization, social media integration.
2. An accept button. A clear, affirmative action to consent to non-essential cookies.
3. A reject button (or equivalent). Users must be able to refuse non-essential cookies with equal ease. The CNIL (France), the Danish DPA (Datatilsynet), and the EDPB have all confirmed: rejecting cookies must be as easy as accepting them.
4. A link to cookie settings or preferences. Users must be able to make granular choices — accepting some categories of cookies while rejecting others.
5. A link to your cookie policy. The banner must provide access to detailed information about which cookies you use, their purposes, durations, and whether they are first-party or third-party.
6. Identity of the data controller. Users must know who is collecting their data.

What Must Not Happen

• Non-essential cookies must not be set before the user makes a choice.
• Consent must not be inferred from scrolling, continued browsing, or inaction.
• Pre-ticked checkboxes do not constitute valid consent (confirmed by the CJEU in the Planet49 ruling, Case C-673/17).
• Cookie walls — blocking access to the site unless the user consents — are generally prohibited, though limited exceptions exist in some jurisdictions.

Types of Cookie Banners

Not all cookie banners are created equal. The type you need depends on your jurisdiction, the cookies you use, and the level of compliance you aim for.

Notice-Only Banners

These simply inform the user that cookies are in use, often with a single "OK" or "Got it" button. Notice-only banners are not compliant under EU law. They were common in the early days of cookie regulation, but they do not meet the GDPR's standard for consent. If your website targets EU users, a notice-only banner is a liability.

Opt-In Banners (Consent-First)

The gold standard for EU compliance. No non-essential cookies are set until the user affirmatively consents. The banner presents clear accept and reject options, and ideally a link to granular settings. This is the model required by the ePrivacy Directive as interpreted through the GDPR.

Layered Banners

A layered approach presents essential information on the first layer (the banner itself) and detailed information on a second layer (a preferences panel or settings page). This is the approach recommended by the EDPB and most data protection authorities. It balances transparency with usability: users get the key information upfront, with the option to dig deeper.

A well-implemented layered banner typically shows:

• First layer: Brief purpose description, accept button, reject button, "Manage preferences" link.
• Second layer: Category-by-category breakdown with toggle switches, detailed descriptions, and a list of specific cookies in each category.

Banner Placement

Where you place your cookie banner affects both compliance and user experience. Common placements include:

The EDPB has not prescribed a specific placement, but the banner must be clearly visible and not easily overlooked. A center modal or prominent bottom bar are the safest choices from a compliance perspective. A small corner widget that users routinely ignore may not meet the standard of "clear and prominent" information.

What a Compliant Banner Must Include

To summarize, a banner that meets current EU standards must include these elements:

1. Purpose description: A concise explanation of why cookies are used, organized by category (necessary, analytics, marketing, preferences).
2. Accept all button: Clearly labeled, granting consent to all non-essential cookie categories.
3. Reject all button: Equally prominent as the accept button — same size, same visual weight, same level of accessibility.
4. Manage preferences / Settings link: Opens a second layer where users can make category-by-category choices.
5. Cookie policy link: Links to a detailed cookie policy document.
6. Privacy policy link: Links to the site's full privacy policy (may be combined with the cookie policy link).

Common Mistakes in Cookie Banner Implementation

Even well-intentioned implementations frequently contain errors that undermine compliance:

• Setting cookies before consent. The most common and most serious error. If your analytics or advertising tags fire on page load, before the user interacts with the banner, you are in violation. Consent must be obtained before the cookies are set.
• No reject button. Offering only "Accept" and "Settings" is not sufficient. Users must be able to reject all non-essential cookies from the first layer, with a single action.
• Visual manipulation. Making the accept button large and green while the reject option is a small text link is a dark pattern. Data protection authorities have issued significant fines for this practice.
• Vague purpose descriptions. "We use cookies to improve your experience" tells the user nothing. Be specific: analytics, targeted advertising, social media embeds, A/B testing.
• Ignoring consent on subsequent pages. Consent (or refusal) must persist across the entire session and across visits. If a user rejects cookies on the homepage, that choice must be respected on every subsequent page.
• Not providing a way to change preferences. Users must be able to withdraw consent at any time, as easily as they gave it (GDPR Article 7(3)). A persistent settings link — often a small icon in the corner of the page — should always be available.
• Failing to update when cookies change. If you add a new marketing tool, your banner categories and cookie policy must be updated. Stale consent is not valid consent.

Banner and Page Performance

Cookie banners sit in a critical position: they load on every first visit, on every page. A poorly implemented banner can significantly degrade your site's performance, affecting Core Web Vitals and, by extension, your search rankings.

Key performance considerations:

• Script weight. A consent management platform (CMP) script should be as lightweight as possible. Heavy scripts that load additional dependencies can add hundreds of milliseconds to page load time. Target under 30KB gzipped for the banner script.
• Render blocking. The banner script must load asynchronously. It should never block the rendering of your page content. Users should see your site loading while the banner appears.
• Layout shift. A banner that pushes content down or causes elements to jump around will harm your Cumulative Layout Shift (CLS) score. Use fixed or overlay positioning to avoid layout shifts.
• Tag management. The banner must integrate with your tag manager to conditionally load scripts based on consent. Tags that fire before consent is checked are both a legal and performance problem — they load unnecessary resources.

The best approach is a banner solution that is built for performance from the ground up: minimal JavaScript, no external dependencies, asynchronous loading, and tight integration with your tag management.

Passiro's Approach to Cookie Consent

Passiro's consent banner is designed to meet every requirement outlined on this page — and to do so without compromising your site's performance. Our banner script is under 15KB gzipped, loads asynchronously, supports Google Consent Mode v2, and provides a fully accessible, WCAG AA-compliant consent interface out of the box.

We handle the legal complexity so you can focus on your business. Passiro automatically scans your site for cookies, categorizes them, generates a compliant banner configuration, and keeps everything in sync as your site evolves.

See how Passiro can help you achieve cookie compliance.