← All articles

The cookie banner: designing it and writing it, button by button

Refusing as easy as accepting, purposes written in one sentence, videos loaded after agreement: the cookie banner is designed and written, button by button.

Dots Papers cover for the article on designing and writing a cookie banner

In short

  • Button symmetry matters more than anything else. Refusing must happen on the same screen, in one click, with the same visual weight as accepting.
  • One purpose, one sentence. Write what you do with the data in plain language, not the list of technologies involved.
  • Three choices on the first screen. Accept all, refuse all, customise. Detail comes at the second level, with every switch off.
  • Embedded content waits for the click. A video loaded automatically drops trackers before any choice: your banner then protects nothing.

Take any small company’s website and look at its cookie banner. You will almost always find a solid, coloured “Accept all” button, a “Settings” link in pale grey, and no “Refuse all” button on the first screen.

This is not a graphic detail. In late December 2021, the French data protection authority fined Google 150 million euros and Facebook 60 million on a ground that fits in one line: refusing took several clicks when accepting took one. The wording was not at issue, the geometry of the buttons was.

The legal framework itself is stable. What is almost always missing is its translation into buttons and sentences.

The cookie banner, button by button, in 30 seconds.

Four design rules that are not negotiable

  1. Refusing at the same level as accepting. Same screen, same number of clicks, same size, same contrast. A refusal in grey text next to an acceptance in a block of colour does not meet the condition.
  2. No pre-ticked boxes. The Court of Justice of the European Union settled this on 1 October 2019 in the Planet49 ruling: a box ticked by default is not consent.
  3. Continuing to browse is not agreement. If your close cross counts as acceptance, it is unlawful; if it counts as nothing, the banner must stay on screen.
  4. No consent obtained through weariness. Re-displaying the banner on every page to someone who has just refused manufactures agreement by exhaustion. Regulators recommend keeping a refusal as long as an agreement, around six months.

Deceptive patterns work against the company

The European Data Protection Board published the report of its cookie banner taskforce on 17 January 2023. Three practices come up from one country to the next.

  • The greyed-out refusal button. It exists, sometimes on the first screen, but its contrast puts it on a par with a legal notice.
  • Anxiety-inducing text. “By refusing, you will lose functionality” is false in almost every case: necessary cookies are not subject to choice.
  • The unreachable second level. A “Settings” link opening forty vendors with no global refusal turns refusing into a forty-click chore.

Add the pre-ticked “legitimate interest” column, which cancels the refusal expressed right beside it. These practices cost more than they earn: consent obtained by trickery is not valid, the data collected on that basis becomes unusable, and the processing that rested on it falls with it. You do not lose a month of traffic, you lose the history.

The mistake to avoid Copying a competitor’s banner because it looks serious. You have no idea whether it has been audited, whether it matches the trackers set on your own site, or whether that company is not already under a formal notice. The December 2021 sanctions targeted two of the most visited sites in the world: the model’s fame proves nothing.

The wording: one purpose, one sentence

This is the part almost nobody works on, even though it decides whether consent is valid: consent must be informed, therefore understood before the click.

Four rules are enough. The subject is you, not “the site”. The verb describes what you do with the data, in the present tense, never the conditional. No technology name in the main sentence: “cookie” and “tracker” say nothing to your visitor. And if the sentence contains two “and”s, you have merged two purposes that should be separated.

Purpose Common wording Readable wording
Audience measurement “Analytics cookies to improve your experience” “We count visits and pages read to know which content works. These statistics are not used to show you advertising.”
Targeted advertising “Marketing cookies for relevant offers” “We tell Google and Meta that you looked at certain pages, so we can show you our adverts on other sites.”
Personalisation “Personalise your browsing” “We remember the products you looked at, so we can bring them back on your next visit.”
Necessary cookies “Strictly necessary cookies” “These files keep your basket and your session open. Without them the site does not work, and they do not ask for your agreement.”
Rewriting examples. The right-hand column takes longer to read and is much faster to understand.

The title deserves the same treatment. “We use cookies” teaches nobody anything. “We measure this site’s audience and we run advertising. You choose what you accept.” states the stakes in two sentences.

Three levels of choice, and what goes on the first screen

The first screen contains three buttons of equal visual weight: accept all, refuse all, customise. Above them, two lines announcing the main purposes and a link to your privacy policy. Nothing else, no partner logos.

The second screen is organised by purpose, four to six entries, every switch off when it opens. Only necessary cookies appear active there, explained and not editable. At the bottom, two buttons: save my choices, and refuse all. Without the second, a visitor who came to understand ends up trapped in the detail. A footer link must finally allow the window to be reopened at any time, otherwise the withdrawal required by the GDPR stays theoretical.

What to take away A visitor knows whether they accept that you run advertising. They do not know whether they accept a vendor whose name they have never heard. Organising the second level by purpose, rather than by tool, is what makes the choice possible: the vendor list stays mandatory, but under each purpose.

Videos, maps and chat: the trackers you do not see

A video player, an interactive map or a messaging widget load code hosted elsewhere as soon as the page displays, before any click by the visitor. Your banner can be perfect, the drop has already happened, and it is the first thing an inspection looks at.

The fix is called click-to-load: you replace the embedded content with a static thumbnail and a sentence along the lines of “This video is hosted by YouTube. By playing it, you agree that this service may set cookies.” The content only loads after that click, which counts as consent for that service.

What each decision changes, for compliance and for data

Every decision has two effects: a legal one, and one on what you measure. Putting them side by side avoids deciding blind.

Design decision Effect on compliance Effect on data collected
“Refuse all” on the first screen Removes the most frequent ground for sanction since 2021 Acceptance falls, remaining agreements usable without reservation
Purposes in plain language Makes consent informed, a condition of validity Fewer late withdrawals and fewer complaints
Removing pre-ticked boxes Aligns with the Planet49 ruling of 1 October 2019 Volume drops at first, then stabilises on a real choice
Third-party content loaded on click Removes the drop before choice, the first point checked in an inspection Loss of automatic plays, lighter pages
Choice editable from the footer Makes withdrawal effective, a GDPR requirement A few visible withdrawals, to be read as a signal
Reading: a compliant banner collects less raw data, but data usable without reservation.

One signal then deserves continuous monitoring: the share of your measurement events carrying a clear consent state. When it degrades, it usually means the banner was changed without its technical integration following, and nobody sees it before the quarterly review. We cover that point in our article on measurement reliability.

The six-point banner review

This review takes an hour, with no developer. It is our first pass on any site we audit.

  1. In private browsing, count the clicks needed to refuse everything, then to accept everything. If the two numbers differ, stop there.
  2. Reload without clicking anything and list, in the inspector, everything already set.
  3. Read each purpose aloud to somebody outside the company. If they cannot repeat in their own words what you do with their data, the sentence needs rewriting.
  4. Open the second level and count the switches that are on when it opens. The expected answer is zero, necessary cookies aside.
  5. Refuse everything, reload five times, then look for the footer link that reopens the window. If the banner comes back on its own, your refusal is not being kept; if the link is missing, have it added.
  6. Date and archive a screenshot of both screens: in an inspection, you must prove what was displayed on a given date.

If your banner is managed by a consent management platform, these settings are in its interface, not in your code. Point 2 stays manual: no platform knows about third-party content added by hand.

Frequently asked questions

Is a “Refuse all” button compulsory on the cookie banner?

The rule does not impose the exact label, it imposes that refusing be as easy as accepting. A global refusal button on the first screen, in the same format as the acceptance one, is the only implementation that leaves no room for argument.

How long should a visitor’s choice be kept?

Regulators recommend around six months, identical for an agreement and for a refusal. Keeping the agreement for a long time and the refusal for a few hours is the definition of consent obtained through weariness.

Does an embedded YouTube video require consent?

Yes, as soon as the player loads and sets trackers on the visitor’s device. Replace it with a clickable thumbnail and a sentence explaining what the click triggers: the content loads after explicit agreement, limited to that service.

Can we block access to the site until the visitor accepts?

Regulators do not forbid it as a matter of principle and publish case-by-case assessment criteria. One of them is the existence of a genuine alternative route to the content, hard to offer without an equivalent paid version.

Where to start if you only have an hour

Do the first two points of the review above, and nothing else. The click count tells you whether you are exposed to the most common ground for sanction, and the list of trackers set before any choice tells you whether your banner protects something or decorates a page.

The rest is a writing job, with no technical obstacle, and it is the one that produces the most effect: a purpose that is understood is a purpose that is accepted more often. That work belongs to our data, analytics and performance expertise, where compliance and measurement are settled together.

On the tooling side, our clients use Cookie Consent, published by Datafirefly Limited, the sister company of our agency: a compliant banner with Consent Mode v2 wired in. The tool does not do the writing work above, it applies cleanly the choices you have made. The module exists on the three platforms we meet most often: WordPress and WooCommerce, PrestaShop 8 and 9, Shopware 6. Three distinct modules, one commercial model: a one-off purchase, twelve months of updates included, source code not encrypted. The best known consent platforms work the other way round, on a subscription indexed to volume, and the difference does not show in the first year: it shows over the lifetime of the site, a bill that tracks your traffic against a budget line that does not move.

Unsure about your cookie banner’s design? We always start with the same two measurements: how many clicks it takes to refuse, and what your page sets before the visitor has chosen. Let’s talk.

Want to apply this to your own business?

Get in touch →

Further reading

Leave a comment

Your email address will not be published. Required fields are marked *

16 + nineteen =