Cookie Consent Banner Generator
A cookie banner you host yourself: fair choices, scripts that wait, no third-party CMP.
Checks
Live preview
The preview starts when you scroll here.
The preview runs your banner in an isolated frame. Its choice lasts only until the preview is reloaded, and links do not open there.
Your code
- Upload cookie-consent.js and cookie-consent.css to
/consent/on your site. - Paste the <head> part at the top of
<head>on every page, before any other script. - Paste the banner right after
<body>, and the footer link into your footer. - Mark every script, embed and pixel that needs consent, as in Marking scripts. Then test in a private window.
For general information only, not legal advice. Templates are generic starting points — have a qualified lawyer review anything you rely on.
About the Cookie Consent Banner Generator
A cookie banner has to do more than show a message: nothing that needs consent may run until the visitor agrees, refusing must be as easy as accepting, and the choice must be easy to change later. This generator writes a self-hosted banner that does that — Accept all and Reject all buttons that look the same, a settings dialog with a switch per category (none switched on in advance), a link or button that reopens it on every page, and the choice kept in the visitor’s browser for as long as you decide.
Scripts, embeds and pixels wait for their category (type="text/plain" data-cc-category="analytics"), withdrawing consent deletes the first-party cookies you list, and an optional Google consent mode v2 file sets every consent type to denied before any Google tag runs. The files contain no inline code, so they work under a strict Content-Security-Policy (script-src 'self'). Try the banner in the live preview, then copy the code or download a ZIP with a README and a demo page. It is not an IAB TCF-certified CMP — read the note below if you show Google AdSense ads in Europe.
How to use it
- Choose the categories your site uses — Preferences, Analytics, Marketing — and check their names and descriptions. Strictly necessary cookies are always on.
- Add the address of your cookie policy and adjust the text if you like (leave the message empty for a suggested text that follows your categories), then pick the layout, colour and theme.
- Using Google Analytics, Google Ads or Tag Manager? Turn on Google consent mode, choose advanced or basic mode and enter your tag ID, so that the file loads the tag after the consent defaults.
- List the first-party cookies to delete when someone withdraws consent — paste them from the Cookie Policy Generator (“Copy list for the banner”), or paste bare names and sort them with the Open Cookie Database.
- Try the banner in the live preview and read the Checks. Then download the ZIP (or copy each part), upload the files, paste the snippet into every page and mark each script and embed that needs consent.
Examples
Analytics only · Google consent mode, advanced · G- tag ID · clean-up “analytics: _ga, _ga_*”
A bar with Accept all, Reject all and Customise; consent-defaults.js denies analytics_storage, then loads gtag.js, which sends only cookieless pings until the visitor agrees; withdrawing deletes _ga and the _ga_… property cookie and reloads the page.
Preferences, Analytics and Marketing · video iframes
Three switches in the settings; each iframe gets data-cc-category="marketing" and data-cc-src, and a placeholder with a “Cookie settings” button shows until marketing is allowed.
script-src 'self'; style-src 'self'
The banner works unchanged — its behaviour is all in cookie-consent.js and its look in cookie-consent.css — and the README lists the Google hosts to add for the tags you use.
Common uses
- Adding a consent banner to a static, WordPress or custom site without a paid consent platform or third-party script.
- Making Google Analytics or Google Ads wait for consent with consent mode v2 defaults set before the tag.
- Replacing a banner that hides “Reject” behind settings or a link.
- Keeping a strict Content-Security-Policy while adding consent management.
What the banner does, and why
- Reject all next to Accept all, looking the same. Most EU data protection authorities treat a banner without a refusal option on the layer that has the accept button as an infringement (EDPB Cookie Banner Taskforce, para. 8). The CNIL asks for a “Tout refuser” button at the same level and in the same form as “Tout accepter” (or another way to refuse that is just as easy); the ICO asks for refusing to be as easy as accepting.
- Nothing switched on in advance. Pre-ticked boxes do not give valid consent (GDPR recital 32; Taskforce para. 10). The checks also flag “by continuing to use this site” wording — carrying on browsing is not consent.
- Nothing optional runs before a choice. Marked scripts are
type="text/plain"until their category is allowed; embeds and pixels have nosrc. Without a choice the page works with strictly necessary storage only (ePrivacy Directive art. 5(3); PECR reg. 6). - Easy to withdraw. A footer link and an optional floating button reopen the settings on every page (Taskforce para. 32; GDPR art. 7(3)); withdrawing deletes the cookies you list and reloads the page.
- The choice is remembered in the visitor’s browser — storage that is itself essential (Taskforce para. 30) — for 6 months by default, which the CNIL calls good practice; the ICO suggests six months before asking again after a refusal. Raising the policy version asks everyone again.
- Accessible: real buttons and labels, a native
<dialog>for the settings with focus returned when it closes, switches announced as on or off, 44-pixel buttons, visible focus, a screen-reader message when the choice is saved, and contrast checks on your colour.
Google consent mode v2 and the IAB TCF
consent-defaults.js runs first in <head> and calls gtag('consent', 'default', …) with ad_storage, ad_user_data, ad_personalization, analytics_storage, functionality_storage and personalization_storage denied (security_storage granted) and wait_for_update: 500, then sends a returning visitor’s stored choice — consent mode does not store choices itself. A new choice is sent as gtag('consent', 'update', …): Marketing grants the three ad types, Analytics grants analytics_storage, Preferences the functionality and personalisation types. In advanced mode Google’s tags load at once and send cookieless pings while consent is denied; in basic mode the tag is not loaded at all until the visitor allows a category it needs.
The banner is not an IAB Transparency & Consent Framework CMP and is not certified by Google. For AdSense, Ad Manager and AdMob, Google serves personalised ads to visitors in the EEA and the UK and Switzerland only through a Google-certified CMP integrated with the TCF; traffic from other consent tools may get non-personalised or limited ads only. If those ads matter to you in Europe, use a certified CMP.
Sources
- EDPB Cookie Banner Taskforce report · EDPB Guidelines 05/2020 on consent
- Directive 2002/58/EC, consolidated — art. 5(3) · GDPR — art. 7 and recital 32
- PECR 2003 reg. 6 and Schedule A1 · ICO: how do we manage consent in practice?
- CNIL: cookies and other trackers — FAQ (questions 21 and 37–39)
- Google: set up consent mode on websites · consent mode overview · Tag Manager and a Content Security Policy · Google-certified CMP requirement
Limitations
- It blocks only what you mark. Check with your browser’s developer tools, in a private window, that nothing optional loads before a choice — including scripts added by plugins, themes and tag managers.
- Not an IAB TCF CMP and not Google-certified: for personalised AdSense, Ad Manager or AdMob ads to visitors in the EEA, the UK or Switzerland, use a certified CMP.
- The choice is stored in the visitor’s browser only; there is no consent log on a server. Keep your own records if you need to prove consent.
- Cookies set by other domains and HttpOnly cookies cannot be deleted by a script on your site; they stop being renewed once their script is blocked.
- One language per banner. For a multilingual site, make one banner per language with the same storage key and policy version.
- A template, not legal advice: check the rules for the countries your visitors are in.
Privacy
Everything happens in your browser: the files are made on this page and nothing you type is uploaded. The live preview runs in an isolated frame from mysmartcopilot-sandbox.pages.dev, a separate MySmartCoPilot address; the preview code is handed to it inside your browser. The banner you generate makes no requests to other sites (only the Google tag, if you add one). If you tick Keep my settings in this browser, your settings are saved in local storage.
Frequently asked questions
Does a cookie banner need a “Reject all” button?
In the EU and the UK, refusing has to be as easy as accepting. The EDPB Cookie Banner Taskforce found that most data protection authorities consider a banner without a refusal option on the layer with the accept button an infringement; the CNIL asks for a “Tout refuser” button at the same level and in the same form as “Tout accepter”, or another way to refuse that is just as easy; the ICO asks for consent to be as easy to refuse as to give. This banner puts both buttons side by side in the same style.
Will this banner make my website GDPR compliant?
It provides the mechanics regulators look for — equal choices, nothing pre-ticked, nothing optional before consent, easy withdrawal. Compliance also depends on your site: marking every script and embed, describing each cookie accurately in your cookie policy, not calling tracking “essential”, and having a privacy policy. It is not legal advice.
How do I stop Google Analytics until the visitor consents?
Turn on Google consent mode and enter your G- measurement ID. consent-defaults.js sets analytics_storage to denied and then either loads gtag.js straight away (advanced mode: cookieless pings until consent) or only after consent to Analytics (basic mode: nothing reaches Google before). Remove your existing Google tag snippet so that it does not load a second time.
Can I use this banner with Google AdSense?
For visitors in the EEA, the UK and Switzerland, Google serves personalised AdSense, Ad Manager and AdMob ads only when consent comes from a Google-certified CMP integrated with the IAB TCF; traffic from other banners may get non-personalised or limited ads. This banner is not such a CMP. Elsewhere, or if non-personalised ads are enough, you can use it.
How long should a cookie choice be remembered?
No law sets a period. The CNIL calls 6 months good practice, and the ICO suggests six months as a guideline before asking again after a refusal. The banner uses 6 months unless you change it; raising the policy version asks everyone again when your cookies change.
Does it work with a Content-Security-Policy?
Yes. There are no inline scripts, styles or event handlers, so script-src 'self' and style-src 'self' are enough for the banner. The README includes a policy, with the hosts Google lists for its tags if you use them; other services you unblock need their own hosts.
Do I need a cookie banner if I only use strictly necessary cookies?
Usually not: storage that is strictly necessary for a service the visitor asked for — a session, a basket, security, remembering a choice — is exempt from consent (ePrivacy Directive art. 5(3); UK PECR Sch. A1 para. 4). You still have to explain those cookies, for example in a cookie policy.