Add a cookie banner to a plain HTML site with one script tag

A plain HTML website needs a cookie banner as soon as any page sets a non-essential cookie, and the cookie law treats it exactly like a site built on a CMS. Without a plugin, you add consent with two changes: one script tag at the top of every page's <head>, and type="text/plain" plus a category attribute on each analytics or marketing tag, so it waits for the visitor's choice. The banner's wording, colours and regions are set in a dashboard, so no further code is needed.

<head>
  <script src="https://cdn.kukie.io/s/YOUR_SITE_KEY/c.js" async></script>
  <!-- your other tags follow -->
</head>

Why static HTML sites still need cookie consent

A website built from hand-coded HTML files is not exempt from privacy regulations. If your pages load Google Analytics, a Meta Pixel, a live chat widget or any other third-party service, cookies are almost certainly being set on your visitors' devices.

Article 5(3) of the ePrivacy Directive is clear: storing or accessing information on a user's terminal equipment requires prior informed consent, unless the cookie is strictly necessary to deliver a service the user explicitly requested. The GDPR reinforces this by setting a high bar for what counts as valid consent: it must be freely given, specific, informed and unambiguous.

These rules apply regardless of how your site is built. A static HTML page that drops _ga, _ga_<ID> or _fbp before the visitor has made a choice breaks them.

Common cookies found on static HTML sites

Even a minimal static site can accumulate cookies quickly once third-party scripts are added. Here is a breakdown of the most common ones and their legal classification:

Google's own list of Google Analytics 4 cookies names only _ga and _ga_<container-id>: the _gid cookie belonged to the retired Universal Analytics and does not appear on a GA4 site. A static site has no server-side session either, so a PHP session cookie should not show up unless your host adds one.

The first step is knowing exactly which cookies your site sets. A free cookie scan will identify every cookie, local storage entry and third-party request your pages make.

A banner alone does not stop the scripts

Displaying a cookie banner is only half the requirement. The banner itself does nothing if analytics and marketing scripts still fire before the visitor responds.

Under ePrivacy rules, non-essential cookies must be blocked until consent is granted. This means your Google Analytics snippet, your Facebook Pixel and any ad-tech tags need to stay dormant until the user clicks "Accept" for that specific cookie category. Showing a notice while cookies load in the background is the pattern behind the CNIL's 150 million euro fine against SHEIN on 1 September 2025, which found advertising cookies placed before visitors had any chance to use the consent interface.

On a CMS like WordPress, plugins handle this script blocking automatically. On a static HTML site, you need a different approach.

How script tag installation works

The most practical method for adding cookie consent to a plain HTML site is a single script tag placed in the <head> section of every page. With Kukie.io, the tag points to a bundle built for your site, named by your site key:

<script src="https://cdn.kukie.io/s/YOUR_SITE_KEY/c.js" async></script>

This script handles three things at once: it displays the cookie banner, it holds back non-essential scripts until consent is recorded, and it stores the visitor's choice so the banner does not reappear on every page load. The script blocking covers common trackers on its own once auto-blocking is on, and the manual attribute below covers anything else. The full walkthrough is in the HTML installation guide.

Placing the script in your HTML

The consent script must load before any other third-party script. Place it as the first <script> element inside your <head> tag. If it comes after Google Analytics or a tracking pixel, those scripts will have already set cookies, which defeats the purpose.

For sites with multiple HTML files, you need the snippet in every file's <head>. If you use a templating system or server-side includes (SSI), add it once to the shared header partial.

Blocking third-party scripts until consent

The standard technique changes the type attribute on scripts you want to block. Instead of type="text/javascript", set it to type="text/plain" and add a data-cc-category attribute naming the category:

<script type="text/plain" data-cc-category="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX">
</script>

When the visitor grants consent for the analytics category, the consent script releases the tag and it loads normally. This approach works for any third-party script: analytics, marketing pixels, chat widgets or embedded video players. Use the category's slug as the attribute value, such as analytics or marketing.

Multi-page sites and consistency

A single-page portfolio site might have one HTML file. A documentation site or small business website could have dozens. The consent script must appear on every page, and the visitor's consent choice must persist across all of them.

Cookie-based consent storage handles this automatically. Once the visitor makes a choice on any page, a strictly necessary cookie records that preference. Every subsequent page load reads the stored consent state and applies the same script-blocking rules without showing the banner again.

If your static site uses Gatsby, Hugo or another static site generator, the same script tag approach applies, but those tools have their own templating systems that make placement easier.

Geo-detection and regional rules

Not every visitor to your site is covered by the GDPR. A user browsing from Texas faces different consent requirements than one browsing from Berlin. Under the CCPA and CPRA, California visitors must be able to opt out of the sale or sharing of personal information, but prior consent before setting cookies is not required the way it is under European law.

A consent platform with geo-detection can show a different banner to each visitor. European visitors see an opt-in banner with Accept all and Reject all. Californian visitors see an opt-out notice. Visitors from regions without such rules may see no banner at all. This is configured in the dashboard rather than in your HTML code.

Google Consent Mode v2

If your site uses Google Analytics 4, Google Ads or Google Tag Manager, Google Consent Mode v2 is relevant. Since March 2024, Google requires websites serving ads in the EEA to send consent signals through Consent Mode. Without it, remarketing audiences and conversion measurement stop working for European traffic.

Consent Mode v2 sends four consent states to Google's tags: ad_storage, analytics_storage, ad_user_data and ad_personalization, as listed in Google's consent mode documentation. In advanced mode, while consent is denied, Google tags send cookieless pings that Google uses for modelling. The consent script sets these states for you, so you do not need to write custom Google Tag Manager logic.

Testing your implementation

After adding the consent script, verify three things:

1. No cookies before consent: open your site in a private window. Before interacting with the banner, check the browser's developer tools (Application tab, Cookies section). Only strictly necessary cookies like __cf_bm or the consent cookie itself should be present.

2. Scripts fire after consent: accept all categories and confirm that _ga, _ga_<ID> and any marketing cookies now appear.

3. Rejection works: reject all non-essential categories. Reload the page. Verify that analytics and marketing cookies are absent.

Run a cookie scan after deployment to confirm the results match your expectations.

Static HTML consent: quick answers

Put the two tags on your HTML site

Kukie.io scans your site, holds non-essential scripts until visitors choose and keeps a record of every consent. On a static site, the work is pasting one tag into each page and marking the scripts that should wait. The Free plan covers up to 5 websites.

Start free