Banner de Cookies HTML

Cookie banners: legal obligation, not a UI accessory

A cookie banner is the user-facing surface of a much deeper compliance stack. Since GDPR entered into force in the European Union (May 2018), any site that drops non-essential cookies on a user located in the EEA must collect explicit, informed, freely given consent before the first byte of those cookies is written. Brazil followed with LGPD (in effect 2020, sanctions from August 2021), and California enacted CCPA/CPRA giving residents an opt-out right and a "Do Not Sell or Share" link. The UK kept its own version (UK GDPR) after Brexit, and similar regimes now exist in Quebec (Law 25), Switzerland (revFADP), South Africa (POPIA) and several US states (Virginia VCDPA, Colorado CPA, Connecticut CTDPA).

In Brazil, the regulator ANPD can issue warnings, demand publication of the violation and apply fines of up to 2% of the company's revenue in Brazil, capped at R$ 50 million per infraction. The CNIL (France) has fined Google EUR 150 million and Facebook EUR 60 million precisely because the "reject all" button required more clicks than the "accept all" button — a textbook example of a dark pattern explicitly flagged as illegal by ENISA and EDPB guidelines.

What a compliant banner must include

• Plain-language description of why cookies are used and which categories are active.
• Granular toggles for each category (preferences, statistics, marketing) with equal prominence between Accept all, Reject all and Customize.
• Link to a complete privacy policy and cookie policy listing every vendor and retention period.
• No pre-checked boxes for non-essential cookies (GDPR Recital 32 — silence is not consent).
• Easy way to withdraw consent later (a persistent floating icon or a "Cookie settings" link in the footer).

Cookie categories

Practitioners group cookies into four buckets: strictly necessary (session, CSRF, load balancing — do not require consent), preferences (language, theme), statistics (Google Analytics, Plausible, Mixpanel) and marketing (Facebook Pixel, TikTok Pixel, retargeting). Only the first category is exempt from prior consent under GDPR ePrivacy. Everything else must be blocked until the user actively accepts.

CMPs and libraries

Most large sites delegate the banner to a Consent Management Platform: OneTrust, Cookiebot, TrustArc, Iubenda, Usercentrics. WordPress sites often use Borlabs Cookie or Complianz. Open-source alternatives include CookieConsent (Orest Bida), klaro! and tarteaucitron.js. For React, react-cookie-consent covers the basic UI; pair it with a localStorage flag and conditional script loading.

The cookieless future

Safari and Firefox already block third-party cookies by default; Chrome is rolling out its Privacy Sandbox to deprecate them. First-party cookies and privacy-friendly analytics (Plausible, Fathom, Simple Analytics, Umami) collect aggregated data server-side without persistent identifiers — some claim they need no banner at all, though local regulators occasionally disagree (CNIL accepted Plausible without consent, but the position can change).

FAQ

Do Brazilian sites need GDPR compliance? Only if you target users in the EEA (you offer goods/services to them or monitor their behaviour). For users in Brazil, LGPD is the relevant law and the principles overlap heavily, but the legal basis citations and the regulator differ.

Is "by continuing to browse you accept cookies" still valid? No. Implied consent was explicitly invalidated by the CJEU in the Planet49 case (2019). You need an unambiguous affirmative action — a click on Accept.

Can I show a giant green "Accept" and a tiny grey "Reject"? No. Equal prominence is required. Disparate styling is a dark pattern and has been fined repeatedly by CNIL and the Italian Garante.

How long is consent valid? There is no fixed maximum, but the CNIL recommends re-asking after 6 to 13 months. Store the consent timestamp and the exact configuration accepted so you can prove it later.