FreeTOSCookie Consent Banner Generator

Free Cookie Consent Banner Generator

Generate a ready-to-paste HTML + JavaScript cookie consent banner for your website. Blocks Google Analytics and Meta Pixel until consent is given. GDPR-compliant, no CDN, no monthly fee.

100% Free · Vanilla JS · No Dependencies · GDPR Ready
✨ Configure Your Banner
#4f46e5
#1e1e2e
#ffffff
📊 Google Analytics (GA4)
📘 Meta / Facebook Pixel
📣 Google Ads / GTM
🔥 Hotjar
🎨 Include Inline CSS Styles
🌍 Multi-language Support (EN/DE/FR)
⚙️ Granular Consent Categories
📅 Remember Consent (180 days)
📋 Banner Code Preview
🍪
Configure your banner and click
Generate Banner Code
100% Free Forever
No Account Required
Vanilla JS — No CDN
Blocks Scripts Until Consent
GA4 Consent Mode v2

Why Your Cookie Banner Matters More Than Your Cookie Policy

The policy tells users what you do. The banner is what GDPR actually requires you to do first.

GDPR requires that non-essential cookies — analytics, advertising, personalisation — are not set until after the user gives consent. This is the prior consent requirement of the ePrivacy Directive, and it applies regardless of whether you have a cookie policy. A cookie policy alone is a disclosure document. It tells users what you use. But the law requires you to ask first, and to not load the scripts until the answer is yes. A cookie policy without a functioning consent mechanism does not satisfy Article 5(3) of the ePrivacy Directive.

The common mistake is having a banner that says "We use cookies" while GA4, Meta Pixel, and Hotjar load silently in the background before the user has clicked anything. This is not compliant — it is decorative. The ICO has specifically issued enforcement notices to publishers for exactly this pattern: showing a banner while non-essential cookies load unconditionally. The test is not whether a banner is present. The test is whether scripts are blocked until consent is given.

The question of legitimate interest vs. consent is not as simple as many site owners hope. Most analytics cookies cannot rely on legitimate interest as a lawful basis under the ePrivacy Directive. The Directive requires consent for any storage of or access to information on a user's device unless strictly necessary. Google itself acknowledged this when building Consent Mode v2: proper consent is required for GA4 data to be used for advertising purposes, and Google's own documentation says consent must be collected before GA4 initialises for advertising features.

The technical requirement matters here. GA4 Consent Mode v2 uses a gtag consent default call to signal to Google what users have and have not consented to. Meta Pixel's data use restriction API allows you to flag consent state before events fire. These only work when your banner correctly signals consent to these scripts before they load — not after. A banner that fires after page load, after scripts have already initialised, cannot retroactively restrict what those scripts collected on first page load. Timing is the whole point.

A cookie banner that doesn't actually BLOCK scripts before consent is not GDPR-compliant. It's decorative.

Our generated banner blocks GA4 and Meta Pixel until the user explicitly accepts. Scripts are held in a deferred queue and only fired after the consent callback resolves — never before.

Why You Need This

GDPR and the ePrivacy Directive require prior informed consent before analytics or advertising scripts set cookies on visitor devices. A policy alone does not satisfy this requirement — a functional blocking banner does.

⚠️

What Bad Banners Do

Bad banners display a message while scripts load anyway. They use pre-ticked boxes, hide the reject option, or make rejection harder than acceptance. The ICO and CNIL have fined companies specifically for these dark patterns.

What Our Banner Does

Our generated banner holds all analytics and advertising scripts in a queue until the user accepts. GA4 Consent Mode v2 is initialised first. Rejection means those scripts never run on that page load.

What the Generated Banner Code Includes

Every feature you need for a compliant, self-hosted cookie consent banner — no dependencies, no subscription.

Vanilla JavaScript (Zero Dependencies)

No jQuery, no npm, no CDN link required. Pure vanilla JS that works in every modern browser without any build step or package manager.

🎨

CSS-in-JS Styling (No External Stylesheet)

All banner styles are injected inline. There's no separate CSS file to host or link. Drop the script in and it works, styled exactly to your color choices.

💾

Consent State Storage (localStorage + Cookie)

Consent is stored in both localStorage and a first-party cookie for 180 days. Returning users won't see the banner again until their consent expires or they clear their data.

📊

GA4 Consent Mode v2 Integration

The banner fires gtag('consent', 'default', {...}) before any GA4 script loads, signalling denied consent. On accept, gtag('consent', 'update', {...}) is called to unlock analytics and ad storage.

📘

Meta Pixel Conditional Loading

Meta Pixel is only injected into the page after explicit consent. The fbq() stub is not initialised until the user clicks Accept, preventing any pixel events or cookies from firing without consent.

Accept All / Reject All Buttons

Both buttons are equally prominent — no dark patterns, no buried reject option. Equally accessible Accept and Reject buttons meet GDPR's requirement that withdrawal of consent is as easy as giving it.

🔗

Privacy & Cookie Policy Links

The banner automatically includes links to your Privacy Policy and Cookie Policy URLs. GDPR requires that consent is informed — users must be able to read what they're consenting to before deciding.

WCAG 2.1 Accessible HTML

The banner uses semantic HTML, proper ARIA roles, keyboard-navigable buttons, and sufficient colour contrast. Accessibility is a legal requirement in the EU and many other jurisdictions.

How to Install Your Cookie Banner

Three platforms, three sets of steps. In all cases, paste the script before the closing body tag.

🔷

WordPress

  1. Generate your banner code on FreeTOS
  2. Install the "Insert Headers and Footers" plugin
  3. Go to Settings → Insert Headers and Footers
  4. Paste the banner script in the "Scripts in Footer" box
  5. Save changes
  6. Test in an incognito window to confirm the banner appears
🛍️

Shopify

  1. Generate your banner code on FreeTOS
  2. Go to Online Store → Themes → Edit Code
  3. Open theme.liquid from the Layout folder
  4. Find the closing </body> tag
  5. Paste the banner script immediately before it
  6. Save and preview your store in a new private window
🌐

Any HTML Website

  1. Generate your banner code on FreeTOS
  2. Open your site's main layout or template file
  3. Locate the closing </body> tag
  4. Paste the <script> block immediately before it
  5. Upload the updated files to your server
  6. Verify in an incognito window that the banner appears and scripts are blocked until consent
Placement matters: The banner script must load before any analytics or advertising scripts in your HTML. If GA4 or Meta Pixel loads before the banner initialises, they will have already set cookies without consent. Always place the banner script at the very top of your body scripts, before any tracking tags.

Frequently Asked Questions

The technical and legal questions that come up when you're implementing cookie consent properly

Yes, under GDPR. Cookie-blocking banners that don't actually prevent scripts from running fail the ePrivacy Directive's prior consent requirement. Article 5(3) of the ePrivacy Directive states that information must not be stored, and access to information must not be gained, unless the subscriber or user has given consent first. A banner that shows a message while GA4 or Meta Pixel loads in the background is not GDPR-compliant — it is decorative. The ICO has enforcement-noticed publishers specifically for this pattern. Our generated banner holds scripts in a deferred queue and only fires them after the user has clicked Accept.
GA4 Consent Mode v2 is Google's mechanism for respecting user consent signals. When consent is denied, GA4 runs in a limited, cookieless mode that does not collect personal data or set the GA cookies. When consent is granted, GA4 switches to full tracking mode. Our banner implements the required gtag('consent', 'default', { analytics_storage: 'denied', ad_storage: 'denied', ... }) call before any GA4 scripts load. On user acceptance, gtag('consent', 'update', { analytics_storage: 'granted', ad_storage: 'granted' }) is called. This is the technically correct implementation Google requires for advertising data to be used in campaign reporting.
You should have both. The banner collects consent — it is the mechanism by which users say yes or no. The cookie policy is the disclosure document that explains what you use cookies for, which third parties are involved, and how long cookies persist. GDPR requires both: consent must be informed, which means users must be able to read what they're consenting to before they decide. The banner's privacy policy and cookie policy links serve this function. Our free Cookie Policy Generator can produce the accompanying policy document if you don't already have one.
The banner stores consent locally in the user's browser using both localStorage and a first-party cookie for 180 days. This means returning users won't be shown the banner repeatedly. However, the consent record is client-side only — there is no server-side log of who consented, when, and to what. Some interpretations of GDPR Article 7(1) require controllers to demonstrate that consent was obtained, which may require server-side consent logging. For enterprise-grade consent management with audit trails, a paid Consent Management Platform (CMP) is more appropriate. For most small to medium websites, client-side storage is the common and widely accepted approach.
No. The banner only delays the loading of analytics and advertising scripts until consent is given. Your core website functionality — navigation, content, forms, checkout flows, login — is completely unaffected. The banner does not touch or interfere with any essential scripts. If a user rejects cookies, your site continues to work exactly as before, just without GA4, Meta Pixel, or other analytics scripts running. The only functional difference for opted-out users is that you won't have analytics data about their visit, which is precisely the intended outcome under GDPR.

FreeTOS vs Paid Cookie Banner Tools

Consent Management Platforms charge monthly fees for a problem you can solve once with self-hosted code.

Feature FreeTOS CookieYes Cookiebot
Price Free Free (with branding) €9/month
Banner Script Yes Yes Yes
Removes Branding N/A (no branding) $15/month Paid
Blocks Scripts (GDPR) Yes Yes Yes
Account Required No Yes Yes
Self-hosted Code Yes No (CDN) No (CDN)
Consent Logging No (client-side only) Paid Paid

CDN-based solutions like CookieYes and Cookiebot create a dependency: if their CDN goes down, your banner breaks, which can temporarily expose your site to non-compliance. Self-hosted code never breaks due to a third-party outage.