Cookie Consent Banner Guide: Clear, Fair and Easy to Use

Almost every site that uses analytics, advertising tags or embedded media has to think about a cookie consent banner. Done badly, it annoys visitors, hides the page and may not even do what it claims. Done well, it is clear, fair and quick to dismiss.

This guide is about the practical design and setup side. It is general guidance, not legal advice. The rules differ by country and by where your visitors are, so check the requirements that apply to you, or speak to a qualified adviser, before you finalise anything.

What the banner is for

A cookie is a small piece of data a website stores in a visitor's browser. Some are necessary for the site to work, such as keeping items in a shopping basket. Others support measurement, preferences or advertising. Many privacy rules ask that people be informed about non-essential storage and tracking, and in many places that visitors can choose whether to allow it.

The banner is the mechanism for telling people what happens and recording their choice. It only works if the choice is real: if you say a category is off, no matching tags should fire until the visitor agrees.

Start with an audit, not a plugin

The most common mistake is installing a banner before knowing what the site does. A banner that does not match reality gives a false impression and creates more risk than having none.

Work through this audit:

1. List every tool on the site: analytics, advertising pixels, chat widgets, embedded videos, maps, social buttons, fonts loaded from other servers, form tools.
2. Note what each one stores or collects, using the provider's documentation.
3. Group them by purpose: strictly necessary, preferences, measurement, advertising.
4. Decide what you really need. Removing a tool you do not use is the easiest way to simplify consent.
5. Record the result in a simple table you can update.

If you are setting up measurement from scratch, the website analytics setup checklist can help you decide what to track and why before you add anything else.

Understand the main design choices

Most banners follow one of a few patterns.

• Notice only: informs visitors that cookies are used, with a link to the policy. This may be appropriate only where non-essential tracking is not in use or where local rules allow it.
• Opt-in: non-essential tags stay off until the visitor agrees. Common where consent is required before tracking.
• Opt-out: tags run unless the visitor refuses. Acceptable in some regions and not in others.
• Granular choice: visitors can accept or reject by category.

Which pattern is correct depends on your visitors' locations and your own risk tolerance. Many sites choose a single, stricter standard for everyone because it is simpler to manage than switching behaviour by region.

Write the banner text in plain words

Visitors will give the banner a few seconds. Make those seconds count.

• Say what you use cookies for in one or two short sentences.
• Avoid legal fog. "We use cookies to measure visits so we can improve the site" is clearer than a paragraph of definitions.
• Link to a full cookie or privacy policy for those who want detail.
• Label buttons honestly: "Accept all", "Reject non-essential" and "Choose settings" are easy to understand.

A hypothetical example of simple wording for a small bakery site: "This site uses a few cookies to keep the order form working and to count visits. You can accept all, reject the optional ones, or pick which to allow." Short, honest and easy to act on.

Make accepting and refusing equally easy

A banner that makes "Accept" bright and big while burying "Reject" in small grey text pushes people toward a choice they may not want. This is often called a dark pattern, and regulators in several places have taken a dim view of it.

For a fair design:

1. Give acceptance and refusal the same visual weight and the same number of clicks.
2. Do not pre-tick optional categories.
3. Do not use confusing wording such as double negatives.
4. Do not block the whole site until the visitor accepts, unless you have a clear reason and the law supports it.
5. Let visitors change their mind later through a clearly labelled link in the footer.

The same respect for the visitor's attention runs through good design in general; the UX writing and microcopy guide shows how small wording choices affect behaviour.

Choose placement and size carefully

A banner has to be noticeable without wrecking the experience.

• A bar at the bottom or a small box in a corner usually works better than a full-screen overlay.
• On phones, keep it compact. A banner that fills the screen leaves no room for the content the visitor came for.
• Make sure it does not cover the main call to action or important text.
• Check that it appears quickly and does not shift the page layout when it loads, which can hurt the experience. The Core Web Vitals explained article explains why layout shifts matter.

Accessibility

The banner must work for everyone. Make it reachable with the keyboard, ensure focus moves to it sensibly and returns to the page afterwards, provide enough colour contrast and use real buttons with clear labels. Screen reader users should hear what the banner is and what the options do. The accessible web design basics guide covers the principles.

Connect the banner to the actual tags

This is the technical heart of the job. A banner that records a choice but does not control the tags is decoration.

1. Load measurement and advertising tags only after consent, where consent is required.
2. Test with the choice set to reject. Use your browser's developer tools to confirm that the blocked requests really do not fire.
3. Test with the choice set to accept and confirm that tools work as intended.
4. Check embedded content such as videos and maps, which can set their own cookies. Some can be loaded only after the visitor agrees.
5. Review after every site change. A new plugin or a pasted script can quietly bypass your banner.

If you rely on a tag manager, consent tools usually integrate with it so tags can wait for the visitor's choice. Follow the documentation for your platform, and test again afterwards. If you also track conversions, remember that consent affects what data you receive, so the conversion tracking setup guide is worth rereading with that in mind.

Avoid common banner mistakes

A handful of errors turn up again and again on small business sites.

• Copying another site's banner text without checking whether it describes your own tools.
• Installing two consent tools from different plugins, which then fight each other.
• Forgetting subdomains such as a separate shop or booking page that sets its own cookies.
• Treating the banner as a substitute for a policy, when the two work together.
• Leaving test settings on after launch, so the banner shows to every visitor on every page view instead of remembering their choice.

A quick walk through the site in a private browser window, from first visit to checkout, usually exposes most of these within minutes.

Write the supporting policy

The banner links to a policy that explains your practices in more detail. A useful cookie policy includes:

• A list of the cookies or similar technologies used, grouped by purpose.
• Who sets them (you or a third party).
• How long they last, in general terms.
• How to change or withdraw consent.
• Contact details for questions.

Keep the list matching the audit. An out-of-date policy undermines the banner.

Expect to maintain it

A banner is not a one-time task.

1. Re-run the audit whenever you add or remove a tool.
2. Review wording and categories every few months.
3. Test the banner on current browsers and on mobile.
4. Keep any consent tool updated.
5. Watch for changes in the rules that apply to your visitors.

This fits naturally into your regular website maintenance checklist.

Takeaway

A good cookie consent banner starts with knowing what your site actually does, uses honest and simple wording, treats accepting and refusing as equals, stays out of the way, and truly controls the tags it describes. Because requirements vary by location, confirm the rules that apply to your visitors and keep your setup under review.

If you would like help auditing the tools on your site or designing a banner that fits your brand, get in touch through the contact page with a short description of what you use.