Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A good cookie consent banner makes the optional choice clear: visitors can accept, reject, or choose purposes with comparable effort. The examples below show a compact first layer, a detailed preferences layer, and a Google-advertising disclosure. Treat them as design patterns to adapt to your site’s actual technologies and jurisdictions—not as proof that a particular site complies with every law.

What a useful cookie consent banner should show

The first layer should tell visitors, in plain language, what the site needs to operate and what optional activities it proposes to perform. Put “Accept all” and “Reject all” at the same decision level, with a similarly visible route to purpose-level settings. A visitor should not need to hunt through explanatory copy, open a second screen, or decipher a low-contrast link just to refuse optional uses.

For UK practice, the Information Commissioner’s Office (ICO) says that where consent is needed, it requires a positive action; ignoring a mechanism and continuing to use the site is not consent. The ICO’s practical guidance illustrates equally prominent accept and reject options. France’s CNIL recommends equal simplicity and has described buried, visually weakened, or unclear reject controls as misleading design concerns. These are jurisdiction-specific regulator materials, not a universal prescribed layout.

Example 1: compact first layer

Your privacy choices

We use necessary technologies to run this site. With your permission, we also use analytics to understand how visitors use our pages and advertising cookies to measure and personalize ads. You can choose which optional purposes to allow. You can change your choice later in Privacy settings. See our privacy and cookie details.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

This wording is an example, not boilerplate to paste without checking. Remove any purpose that does not describe what the site actually does, and identify relevant third parties in the detailed explanation. The accept and reject controls should be comparably legible, prominent, and easy to activate; do not make rejection a faint text link while acceptance is a large high-contrast button.

#1 Best Overall
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

Example 2: brief notice with explicit choices

Choose how this site uses cookies

We use essential cookies to provide the service. Optional analytics and advertising cookies are off unless you allow them. Choose “Accept all,” “Reject all,” or “Set preferences.”

This shorter pattern can work when the linked privacy and cookie information gives visitors the detail they need. It is not a substitute for explaining the purposes in the settings layer, and the labels must match what happens after each choice.

Example 3: a pattern to avoid

We use cookies to improve your experience.

By continuing to browse, you agree to our use of cookies. More information

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

This does not offer an explicit refusal and treats continued browsing as consent. ICO guidance says inactivity does not qualify as consent where consent is required; CNIL guidance says continued navigation should be interpreted as refusal in its guidance. A banner that merely announces optional tracking, without allowing the visitor to make a meaningful choice, is not an adequate choice interface where consent is required.

What the preferences screen should include

“Choose purposes” should open a usable settings layer. For each optional purpose, explain the activity in terms people can understand, identify relevant third parties receiving information, and let the visitor control the purpose. When consent is the basis, optional controls should not be pre-enabled. The ICO’s example uses essential, analytics, social-media tracking, and advertising categories; those are illustrations, not categories every site should copy.

Example: purpose-level settings

Choose by purpose

Essential technologies are always active because they support basic site functions. Optional purposes remain off until you choose to allow them. See the purpose descriptions and relevant providers below.

  • Essential — Used for functions required to provide the service. No optional-purpose toggle is shown.
  • Analytics — Helps us understand visits and page use. Providers: [name the providers actually used].
  • Social media tracking — Used for [describe the actual activity]. Providers: [name the providers actually used].
  • Advertising — Used for [describe the actual activity, including personalization if applicable]. Providers: [name the providers actually used].

Replace bracketed text with accurate disclosures before using this pattern. Do not list a provider or category unless it reflects the site’s actual processing. Make it possible to save a granular selection; visitors who want to allow one purpose should not be forced to accept every optional purpose.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Make the choices work as described

  • Keep optional technologies that require consent inactive until a valid choice is recorded.
  • Make “Reject all” reject the same optional purposes that “Accept all” would allow, not merely close the banner.
  • Make “Save my choices” save the selected controls and have the site honor them.
  • Provide a persistent, accessible way to reopen settings later, such as a clearly labeled footer link or privacy control.
  • Do not make optional purposes look essential, or preselect their controls when consent is the basis.

These are functional requirements as well as visual details: a persuasive banner cannot correct a site that has already activated technologies requiring consent before a valid choice.

Patterns that make a banner misleading or hard to use

Pattern What the visitor encounters Why to change it
Equal, clear choices Accept and reject are at the same level and similarly prominent, with a route to customize. This is consistent with the ICO’s illustrated good practice and CNIL’s equal-simplicity recommendation.
Reject hidden in copy Accept is prominent, but rejection is buried in text or shown in low contrast. CNIL has identified obscured placement and disproportionate size or style as misleading concerns.
Many routes to accept, one obscure route to refuse Several controls accept, while rejection is ambiguous or difficult to find. CNIL’s December 2024 notice describes this kind of imbalance as a concern.
“By continuing” consent The banner assumes scrolling or continued browsing means acceptance. ICO says inactivity is not consent where consent is required; CNIL guidance treats continued navigation as refusal.
Optional controls enabled by default Analytics or advertising is already switched on before the visitor chooses. Where consent is the basis, optional choices should be off until the visitor makes a valid choice.
No way to revisit settings The visitor cannot readily find or change the initial decision. Provide an accessible persistent route back to preferences.

CNIL’s December 2024 enforcement notice says French law does not mandate one particular banner presentation, while cautioning that a design must not mislead for consent to be valid. CNIL reviews complaints case by case. Its examples and recommendations should be read in that French context, not treated as a guarantee about another jurisdiction.

Use a specific disclosure for Google advertising where it applies

Google’s EU User Consent Policy is a separate platform policy for relevant Google services, not a universal legal rule. Google describes its policy scope as the EEA, UK, and Switzerland; its guidance also describes additional signal expectations for EEA advertisers. If your use of Google products falls within the policy, check the current Google requirements as well as the laws that apply to your site.

For a relevant implementation, make sure the first layer explicitly addresses advertising personalization where Google’s policy requires it, clearly explain relevant personal-data use, disclose sharing with Google, and ensure consent signals reflect the visitor’s choice. A general “we use cookies” statement does not supply these specifics. The right wording and signals depend on the Google services in use and the visitor’s region.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

How to add accept and reject choices

A banner needs more than three visible buttons. Its controls must produce distinct, honored outcomes: accept optional purposes, reject them, or save the visitor’s selected purposes. The following is a small interface example for illustrating those interactions. It does not implement a complete consent-management system, persist a legally sufficient consent record, block every third-party script, or establish compliance. Connect equivalent controls to the site’s actual consent and tag-loading logic, and verify that no technology requiring prior consent runs before the relevant choice.

Example HTML and JavaScript

<div id="cookie-banner" role="dialog" aria-labelledby="cookie-title" aria-describedby="cookie-copy">
  <h2 id="cookie-title">Your privacy choices</h2>
  <p id="cookie-copy">Necessary technologies run this site. Optional analytics
    and advertising are off unless you allow them. Choose purposes to adjust
    your selection.</p>
  <button type="button" id="accept-all">Accept all</button>
  <button type="button" id="reject-all">Reject all</button>
  <button type="button" id="choose-purposes">Choose purposes</button>
</div>

<script>
  const banner = document.querySelector('#cookie-banner');

  function saveChoice(choice) {
    // Replace this demonstration with your consent manager or server-side record.
    // Do not use this example alone to decide which tags may run.
    localStorage.setItem('privacy-choice', JSON.stringify({
      ...choice,
      savedAt: new Date().toISOString()
    }));
    banner.hidden = true;
    document.dispatchEvent(new CustomEvent('privacy-choice-saved', {
      detail: choice
    }));
  }

  document.querySelector('#accept-all').addEventListener('click', () => {
    saveChoice({ analytics: true, advertising: true });
  });
  document.querySelector('#reject-all').addEventListener('click', () => {
    saveChoice({ analytics: false, advertising: false });
  });
  document.querySelector('#choose-purposes').addEventListener('click', () => {
    // Open a real settings panel here; do not treat this as consent.
    document.dispatchEvent(new Event('open-privacy-settings'));
  });
</script>

For a production implementation, connect the “Choose purposes” action to controls for the purposes actually used and save the selected values. Reopen those settings through a persistent site control. A browser-local demonstration does not, by itself, create reliable cross-device preferences or ensure that every page and tag respects the choice.

Implementation and verification steps

  1. Inventory the site’s storage and access technologies, their purposes, providers, and the jurisdictions in which the site operates. Identify which uses require consent and the applicable legal basis before choosing banner copy.
  2. Build the first layer with explicit accept, reject, and customize actions. Keep accept and reject comparably visible and usable on mobile and desktop.
  3. Build purpose-level controls that explain actual processing and identify relevant third parties. Keep optional controls off by default when consent is the basis.
  4. Wire each choice to the consent-management and tag-loading behavior. Test a fresh visit with no action, an accept choice, a reject choice, and a customized selection.
  5. Provide a persistent settings route. Verify that revising a choice changes the site’s subsequent behavior rather than merely changing the banner’s appearance.
  6. For Google services, check the applicable EU User Consent Policy requirements and confirm consent signals match the recorded choices.

How long to remember a choice

CNIL’s cookie guidance says a period of six months for both consent and refusal is generally appropriate. That is CNIL’s recommendation in its guidance, not a universal legal duration. Choose a duration appropriate to the rules and circumstances applicable to the site, and make it possible for visitors to change their preferences before that period ends.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Review examples with screenshots

A screenshot helps a team compare whether the first layer presents accept and reject at similar prominence, whether the settings route is visible, and how the interface behaves at different viewport sizes. It cannot show whether optional tags actually remain blocked or whether a consent signal is correct; test those behaviors separately. When capturing a banner, use a fresh browser state or otherwise ensure the consent prompt has not already been dismissed.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Capture a page with cURL

For repeatable visual review, a screenshot API can capture the page URL without setting up a browser automation stack. Replace the target URL with a page where the banner is expected to appear. A default capture cannot guarantee a fresh consent state or reproduce your site’s exact visitor geography and cookies, so verify the conditions you need independently.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. The API returns an image or PDF; check the response and configure the capture to match the viewport and state you intend to review.

Capture with Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Capture with Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request captures a URL as PNG, JPEG, WebP, or PDF. Cookie banners are accepted before capture, and more than 60 known consent platforms, newsletter popups, and chat widgets are removed; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status. AI agents can use its MCP server tools, including take_screenshot, get_page_info, and capture_pdf.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Plans include 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. A cleaned screenshot is useful for reviewing the page without those overlays, but it does not verify the consent banner’s behavior or prove legal compliance. Sign up for 1,000 free screenshots a month, with no card required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Common implementation problems

The banner disappears, but optional tags still run

Hiding a dialog is not the same as enforcing consent. Check the tag manager, scripts, and server-side integrations on a fresh visit before a choice is made. Where consent is required, gate those technologies on the relevant choice rather than on whether the banner is visible.

Reject is present but hard to find

Compare the size, contrast, placement, and activation steps for accept and reject on both small and large screens. Move rejection out of body copy or a secondary screen if acceptance can be selected immediately. CNIL’s examples specifically caution against obscured placement and weakened visual emphasis.

The settings screen has generic or inaccurate categories

Map each category to actual site behavior and actual providers. Remove categories that do not apply, explain technical language, and ensure a saved preference changes the corresponding tags or integrations.

Visitors cannot change a previous choice

Add a persistent, accessible link or control that reopens preferences. Test it after the initial banner closes, and verify that saving a revised choice updates behavior.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The design is being treated as proof of compliance

A screenshot or mockup establishes only what was visible in that capture. Compliance depends on the technologies, purposes, legal bases, jurisdictions, and implementation behavior involved. Regulator examples guide design in their respective contexts; they are not a universal certification checklist.

Choosing an implementation approach

A consent-management platform (CMP) can manage a banner and consent process, but choosing one does not by itself make a site compliant. Evaluate whether it supports the jurisdictions and integrations relevant to the site, offers the needed purpose-level controls, and can honor choices across the technologies in use. For a site operating across jurisdictions or using complex tracking, privacy counsel or a data-protection consultancy can help assess the actual setup. The ICO’s privacy-by-design material about consent-or-pay services is specific to that model; it should not be treated as a rule for every ordinary cookie banner.

The best example is the one that accurately describes the site, gives visitors genuinely comparable accept and reject choices, offers meaningful purpose controls where needed, and has a functioning way to apply and later change those choices. The appropriate details depend on the site and jurisdiction; a polished mockup alone cannot settle them.

Quick Recap

SaleBestseller No. 1
HTML and CSS: Design and Build Websites
HTML and CSS: Design and Build Websites
HTML CSS Design and Build Web Sites; Comes with secure packaging; It can be a gift option
$15.74
SaleBestseller No. 2
SaleBestseller No. 4

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.