Does this banner make my site fully GDPR compliant?

It provides a strong starting interface, but full compliance depends on your privacy policy, script behavior, and legal review for your jurisdiction.

Why are Reject all and Accept all the same colour?

Refusing has to be as easy as agreeing, so both buttons get the same size and colour. Customise lets visitors choose each category separately.

How do I stop analytics scripts from loading before consent?

Mark the tag with type=text/plain and a data-cookie-category attribute. The generated script runs it only after consent for that category.

How do I let visitors change their cookie preferences later?

Keep the settings button, or add data-cookie-settings to a footer link to open the settings dialog.

Does the banner reappear on every page of my site?

No, as long as the same snippet is on every page, it checks localStorage and won't reappear once a choice is saved.

Can I use this on a WordPress, Shopify, or Squarespace site?

Yes, it's dependency free HTML, CSS, and JavaScript that can be pasted into any custom code or footer script section.

Does this banner block cookies from being set automatically?

It blocks scripts and embeds you mark with data-cookie-category until consent is given. Unmarked scripts still run.

Does this tool store the settings I configure?

No, configuration and code generation happen entirely in your browser.

🔒 Security & Privacy Free Forever

Cookie Consent Generator, Free GDPR Banner Builder

This cookie consent generator builds a customizable, GDPR style cookie banner with accept, reject, and category options. Set your colors, position, and text, preview it live, then copy the ready to paste HTML, CSS, and JavaScript, no sign up needed.

All Security Tools

Your details

Company or site name

Appearance

Layout

Theme

Position

Accent colour

Used for the Accept button and links

Cookie categories

Strictly necessary cookies are always included and cannot be switched off, which is correct: they do not require consent.

FunctionalPreferences like language or region AnalyticsAggregate usage measurement MarketingAdvertising and retargeting Persistent settings buttonLets visitors change their mind later

Preview

Compliance checklist

Generated code

Paste the HTML just before </body>, the CSS into your stylesheet, and the JS into a script file loaded on every page.

Consent has to be prior, and this is where most banners fail. If your analytics script runs while the banner is still on screen, you have already set the cookie before anyone agreed to it. The generated code blocks non-essential scripts by default. Mark them like this and they will not execute until that category is granted:

<script type="text/plain" data-cookie-category="analytics">

Reject has to be as easy as accept. A prominent Accept button next to a faint "manage preferences" link has been ruled non-compliant repeatedly across the EU. Both buttons here are the same size for that reason, and it is not a style choice you should reverse.

This is not legal advice. It produces a banner that follows the requirements regulators most commonly enforce, but obligations vary by jurisdiction and by what your site actually does. If you handle sensitive data or operate at scale, have a lawyer look at it.

About This Tool

How the cookie consent generator builds a working banner, not just a mockup

Most cookie banner generators show you a preview and hand you a screenshot's worth of styling to copy by hand. This one writes actual HTML, CSS and JavaScript that you paste before the closing </body> tag on your site, and it works the moment you paste it. Nothing you type into the form is ever sent off your device. The preview, the code assembly, and the file download all happen in the browser, with no server round trip. The All in one tab gives you a single block to paste, and the Download button saves it as a file.

The output is built around consent as a stored decision, not a one time dismissal. That distinction matters under the EU ePrivacy Directive and GDPR, both of which treat clicking away a banner as meaningless unless the site actually respects the choice on every later page load.

What the generated snippet actually does

Every banner the tool produces follows the same four part logic, whichever layout, theme or position you pick.

Step 1 Check for a stored decision On page load, the script reads localStorage under the key cnc_consent. If a decision exists and is under 12 months old, the banner stays hidden and the scripts that were allowed are released. This is what stops the banner reappearing on every page, which is the single most common complaint about badly built consent tools.

Step 2 Categorise the click Accept all sets every category to true. Reject all, always shown with the same size and colour, sets every category to false. Customise opens a dialog with one switch per category, all off until the visitor turns them on. Strictly necessary cookies stay on, since they do not require consent under ePrivacy Article 5(3).

Step 3 Persist and broadcast The decision is saved with a timestamp. Scripts you marked with type="text/plain" data-cookie-category="analytics" run only once that category is granted, Google Consent Mode is updated if gtag is on the page, and a cookieConsentUpdated event fires on window for your own code. If a visitor withdraws consent, the script deletes common tracker cookies and reloads the page so those scripts stop.

Step 4 Expose a reset hook The snippet attaches window.cookieConsent with get(), open() and reset(). Any link with a data-cookie-settings attribute opens the settings dialog, so a Cookie settings link in your footer needs no code.

// core of the generated script, condensed from the tool source var KEY = "cnc_consent"; function write(granted){ var prev = read(); localStorage.setItem(KEY, JSON.stringify({ v: VERSION, t: Date.now(), granted: granted })); if (prev && CATEGORIES.some(function(c){ return prev.granted[c] && !granted[c]; })) { location.reload(); // withdrawn: stop scripts that already ran return; } apply(granted); // release blocked scripts, update Consent Mode, fire cookieConsentUpdated } if (!read()) showBanner(true);

With two or more categories, a Customise link opens a dialog with a switch for functional, analytics and marketing cookies and a Save choices button. That is the layout regulators tend to favour, since a one click Accept next to a buried Reject has been flagged repeatedly by European data protection authorities as a dark pattern.

The categories you can include

Category	Typical tools	Consent Mode signals
Strictly necessary	Login, cart, this consent record	security_storage, always granted
Functional	Language, region, chat widgets	functionality_storage, personalization_storage
Analytics	Google Analytics, Matomo, Clarity, Hotjar	analytics_storage
Marketing	Google Ads, AdSense, Meta Pixel, embedded videos	ad_storage, ad_user_data, ad_personalization

Reject all is never optional. A banner with only an Accept button, or a Reject option that is smaller or greyed out, does not meet the GDPR requirement that consent be freely given and as easy to refuse as to give. Regulators including France’s CNIL have fined companies for this pattern. That is why both buttons are generated with the same size and colour. If you untick every category, the tool tells you no banner is needed.

The pieces you can customise

Position and layout

A full width bar or a corner box, at the top or bottom of the screen. On phones both become a full width panel with stacked buttons. All styles use cnc- class names, so they will not clash with your theme.

Colour and copy

Site name, privacy policy link, optional banner text, a light or dark theme and an accent colour. Button text colour is picked automatically for contrast. Without your own text, the banner text is written from the categories you selected.

What it will not do for you

It only blocks scripts you mark. Change each tracking tag to type="text/plain" with a data-cookie-category, and embeds to data-src, or use the Head tab for Google Consent Mode. Anything left unmarked still runs straight away. It also does not generate a cookie policy page, a separate legal document listing every cookie your site actually sets. Pair this banner with an actual audit of your cookies, since ePrivacy compliance depends on what you are really tracking, not just what the banner says.

ePrivacy Directive Art 5(3) GDPR consent standard RFC 6265 cookie mechanics Google Consent Mode v2

RFC 6265 defines how HTTP cookies actually work at the protocol level, useful background even though this tool stores its own decision in localStorage rather than a cookie.
GDPR Article 7 sets the conditions for valid consent, including that withdrawing consent must be as easy as giving it.
GDPR Recital 42 clarifies that consent is not freely given if refusal causes detriment, the legal basis behind requiring a visible Reject option.
CNIL cookie guidance is one of the more detailed regulator publications on what a compliant banner looks like in practice.

Compliance work this covers

Freelancers shipping a client site who need a working banner before launch day, small SaaS teams that cannot justify a paid consent management platform, agencies standardising a lightweight banner across several brochure sites, and developers who just want to see what a compliant three category consent flow looks like in plain JavaScript before wiring it into a larger tag management setup.

Common Questions

FAQ: Cookie Consent Generator

This tool generates a banner styled after common GDPR consent patterns, accept, reject, and granular categories, but full legal compliance depends on more than the banner itself. It also depends on your actual privacy policy content, what your scripts do before consent is given, how you handle data subject requests, and jurisdiction specific rules. Treat this as a strong starting point for the consent interface, and have the overall compliance approach reviewed by someone familiar with privacy law for your specific situation, this tool is not a substitute for legal advice.

Because refusing has to be as easy as agreeing. European regulators have fined sites where Accept was a bright button and Reject was a faint link or hidden in a second screen. The generated banner gives both the same size and colour, and Customise lets visitors choose each category separately.

Change the tag to type="text/plain" and add data-cookie-category="analytics", for example <script type="text/plain" data-cookie-category="analytics" src="...">. The generated script runs it only after the visitor agrees to that category. For Google tags, also paste the Head tab code above your Google tag so Consent Mode starts as denied.

Keep the floating settings button, or add data-cookie-settings to any link, such as a Cookie settings link in your footer. It opens the settings dialog with the current choices. window.cookieConsent.reset() clears the choice and shows the banner again.

No, as long as you paste the exact same snippet on every page. It checks localStorage for a saved choice on each page load, so once a visitor makes a selection on any page, the banner will not reappear on subsequent pages or visits from the same browser until they clear their browser data or you call the reset function.

Yes, the generated snippet is plain HTML, CSS, and JavaScript with no dependencies, so it can be pasted into any custom HTML or code injection section your platform provides, typically found under theme footer code, custom code, or a dedicated header/footer scripts setting. Check your specific platform's documentation for exactly where to add custom footer scripts.

It blocks the scripts and embeds you mark with data-cookie-category until the visitor agrees, and deletes common tracker cookies if consent is withdrawn. It cannot stop scripts you leave unmarked, so mark every tag that sets non-essential cookies.

No, all configuration happens in your browser and the final code is generated locally, nothing you enter in this generator is sent to or stored on any server.

From the blog