Cookie banner

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The look of the banner is the cookie-banner-* classes of the paste; the Embed holds what fixes it to the window, hides it and moves it. Paste it as a direct child of the page, with nothing above it that carries a transform or a filter, make it a Component and place it on every page. The block named "Page of the preview" is the demo around the banner: delete it on your site, and keep the banner and the Embed. The buttons and the switches are Link blocks, because Webflow has no button that holds layers; the script gives each the role and the keys of a button.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-cookie-banner	Marks the banner: the block that holds the words, the answers and the categories. It takes no value: leave the value field empty. The settings below go on the same element.
   data-cookie-banner-refuse	On the button that refuses everything but the locked categories. It takes no value. Give it the same class as the one that accepts: the two answers must weigh the same. [ Required ]
   data-cookie-banner-accept	On the button that accepts every category. It takes no value. [ Required ]
   data-cookie-banner-choose	On what opens and folds back the categories. It takes no value. The engine writes aria-expanded on it. Without it, and without a panel, the banner has two answers and nothing else. [ Optional ]
   data-cookie-banner-panel	On the box Choose opens: it holds one box, which holds the categories and the save button. It takes no value. The stylesheet folds it to no height until it is asked for. [ Optional ]
   data-cookie-banner-category="measurement"	On the box of one category; the value is its name, yours to choose, and the name gated scripts refer to. Add or remove boxes freely: the engine reads the list. A category the stored choice has never seen asks everyone again. [ Optional ]
   data-cookie-banner-switch	On the switch of a category, inside its box. It takes no value. The engine gives it role="switch" and aria-checked; the whole box answers a click. [ Optional ]
   data-cookie-banner-title	On the name of a category: it names the switch for a screen reader. It takes no value. [ Optional ]
   data-cookie-banner-locked	On a category that cannot be refused, the necessary one: its switch is on and stays there. It takes no value. [ Optional ]
   data-cookie-banner-google="analytics_storage"	On a category: the Google Consent Mode signals it answers for, separated by spaces. Read only when gtag is on the page. [ Optional ]
   data-cookie-banner-save	On the button that stores the switches as they are. It takes no value. [ Optional ]
   data-cookie-banner-knob	On the knob inside a switch, so the stylesheet can move it. It takes no value. [ Optional ]
   data-cookie-banner-run="measurement"	On a script of the page written type="text/plain": it only runs once the category named is allowed. Also on an iframe or an image that carries data-src in place of src. [ Optional ]
   data-cookie-banner-open	On anything of the page, a footer link for one: a press opens the banner on its categories. It takes no value. Needed when the setting mark is none. [ Optional ]
   data-cookie-banner-state	Written by the engine on the banner: open, wide once it is drawn out, choosing while the categories show, blank while the words are away. Never written by hand; the stylesheet reads it, and so can a rule of yours. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-cookie-banner-accent	#ffab1a	The colour of the edge that draws the banner out and takes it back, of the line on the mark, of a switch that is on and of the plate that rises on a button. Options: any CSS colour. The other colours are the banner's own classes: the engine reads the ink from the background of the banner.
   data-cookie-banner-mark	left	The corner the banner goes back to, where the mark stays. Options: left, the bottom left corner, the banner held to the left; right, the bottom right; none, no mark at all, the banner goes to the left and is gone, and something of the page marked data-cookie-banner-open must open it again.
   data-cookie-banner-key	cookie-banner	The name the choice is stored under in localStorage. Options: any text. Two sites on one domain that must not share a choice take two names; two banners with one name share theirs.
   data-cookie-banner-version	1	The version of what is asked. A stored choice of another version is no choice. Options: any text. Change it when the categories or what they cover change, and everyone is asked again.
   data-cookie-banner-days	180	How long a choice is kept before the banner asks again, in days.
   data-cookie-banner-delay	600	The wait before the banner first comes in, in milliseconds, for someone who has not chosen.
   data-cookie-banner-travel	1.3	The time the edge takes to draw the banner out of its mark, or to take it back, in seconds: up then across, or across then down.
   data-cookie-banner-reload	1	What happens when a category whose scripts already ran is withdrawn. Options: 1 reloads the page, the only way to stop a script that runs; 0 leaves the page as it is, for a site that stops its own tags on cookiebanner:change.
   data-cookie-banner-label	Cookie settings	The name of the mark, read by a screen reader and written beside it when the edge moves out under the pointer; also the name of the banner when its markup gives none. Options: any text, in the language of the page.
   data-cookie-banner-shown	Cookie choices are open.	The sentence a screen reader is told when the banner comes in. Options: any text.
   data-cookie-banner-saved	Your cookie choice is saved.	The sentence a screen reader is told once a choice is stored. Options: any text.

   Gating your scripts
   The banner only holds back what you mark. In Site settings, Custom code, or in an Embed, write each tag that needs consent with type="text/plain" and data-cookie-banner-run set to the name of its category: the browser reads it as text until that category is allowed, then the script writes it again as a real one. A tag left as a normal script runs whatever the visitor answers. The two test scripts at the end of the pasted Embed are the preview's: replace them with yours, or delete them. It is the mechanism, not legal advice: the words, the categories and the policy link are yours to write.

   Custom attribute	What it does
   type="text/plain"	On the script: what keeps the browser from running it. Not a custom attribute: it is written in the tag itself. A module is written with data-type="module" beside it.
   data-cookie-banner-run="measurement"	On the same script: the category that lets it through, one of the names of the banner's categories. A name the banner does not list is let through by Accept all only.
   data-src="https://..."	On an iframe or an image marked data-cookie-banner-run, in place of src: the address it only loads once its category is allowed.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call CookieBanner.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-cookie-banner-accent	#ffab1a	The colour of the edge that draws the banner out and takes it back, of the line on the mark, of a switch that is on and of the plate that rises on a button. Options: any CSS colour. The other colours are the banner's own classes: the engine reads the ink from the background of the banner.
   data-cookie-banner-mark	left	The corner the banner goes back to, where the mark stays. Options: left, the bottom left corner, the banner held to the left; right, the bottom right; none, no mark at all, the banner goes to the left and is gone, and something of the page marked data-cookie-banner-open must open it again.
   data-cookie-banner-key	cookie-banner	The name the choice is stored under in localStorage. Options: any text. Two sites on one domain that must not share a choice take two names; two banners with one name share theirs.
   data-cookie-banner-version	1	The version of what is asked. A stored choice of another version is no choice. Options: any text. Change it when the categories or what they cover change, and everyone is asked again.
   data-cookie-banner-days	180	How long a choice is kept before the banner asks again, in days.	Asks again sooner	Asks less often; many authorities advise about six months, which is the default
   data-cookie-banner-delay	600	The wait before the banner first comes in, in milliseconds, for someone who has not chosen.	Comes in sooner; 0 comes in at once	Leaves the page time to settle first
   data-cookie-banner-travel	1.3	The time the edge takes to draw the banner out of its mark, or to take it back, in seconds: up then across, or across then down.	Brisker; under 0.8 the two moves read as one	Slower and more ceremonious; past 2 it holds the eye too long
   data-cookie-banner-reload	1	What happens when a category whose scripts already ran is withdrawn. Options: 1 reloads the page, the only way to stop a script that runs; 0 leaves the page as it is, for a site that stops its own tags on cookiebanner:change.
   data-cookie-banner-label	Cookie settings	The name of the mark, read by a screen reader and written beside it when the edge moves out under the pointer; also the name of the banner when its markup gives none. Options: any text, in the language of the page.
   data-cookie-banner-shown	Cookie choices are open.	The sentence a screen reader is told when the banner comes in. Options: any text.
   data-cookie-banner-saved	Your cookie choice is saved.	The sentence a screen reader is told once a choice is stored. Options: any text.

   Gating your scripts
   The banner only holds back what you mark. Write each script that needs consent with type="text/plain" and data-cookie-banner-run set to the name of its category: the browser reads it as text until that category is allowed, at the choice or at the next page load, and the engine then writes it again as a real script, in place, once. A script left as it was runs whatever the visitor answers. It is the mechanism, not legal advice: the words, the categories and the policy link are yours to write.

   Custom attribute	What it does
   type="text/plain"	On the script: what keeps the browser from running it. Not a custom attribute: it is written in the tag itself. A module is written with data-type="module" beside it.
   data-cookie-banner-run="measurement"	On the same script: the category that lets it through, one of the names of the banner's categories. A name the banner does not list is let through by Accept all only.
   data-src="https://..."	On an iframe or an image marked data-cookie-banner-run, in place of src: the address it only loads once its category is allowed.

2. Drive it from JavaScript

   When the site's own code needs the choice: to load something by hand, to tell a server, or to open the banner from a link.
   JavaScript Expand Copy

   const element = document.querySelector('[data-cookie-banner]');
   element.addEventListener('cookiebanner:change', (e) => {
     console.log(e.detail);
   });
   
   // Read the choice anywhere, even before the banner is mounted.
   console.log(CookieBanner.get(), CookieBanner.allowed('measurement'));
   
   // Be told at each choice.
   document.addEventListener('cookiebanner:change', (event) => {
     const { choice, accepted, refused, withdrawn } = event.detail;
     // event.preventDefault() here keeps the page from reloading on a withdrawal
   });
   
   const banner = CookieBanner.mount(element);   // the banner auto() mounted, or a new one
   banner.open();    // draws it out; CookieBanner.open() does it from anywhere, focus included
   // banner.reset() forgets the choice and asks again
   
   // When the banner leaves the page:
   CookieBanner.destroy(element);   // removes what the engine added, gives the markup back as it was

   Show all 20 lines

3. Fit it to your page

   What a buyer changes

   The words, the policy link and the categories are plain markup: write yours, add or remove a category box, and the engine follows. Then mark each script that needs consent with type="text/plain" and data-cookie-banner-run="category".

   The markup

   • data-cookie-banner on the banner. It takes no value. The engine gives it role="region" and a name when the markup has none.
   • data-cookie-banner-refuse, data-cookie-banner-accept on the two answers. Give them one class: the same weight is the point.
   • data-cookie-banner-choose on what opens the categories, and data-cookie-banner-panel on what it opens: a box holding one box, which holds the categories. data-cookie-banner-save on the button that stores the switches as they are. A banner with no panel is a banner with two answers, and works.
   • data-cookie-banner-category="name" on the box of one category, with inside it an element marked data-cookie-banner-switch, and data-cookie-banner-title on its name, which names the switch for a screen reader. The names are yours; measurement and marketing are the preview's. The whole box answers a click.
   • data-cookie-banner-locked on a category that cannot be refused: its switch is on and stays there.
   • data-cookie-banner-google="analytics_storage" on a category names the Google Consent Mode signals it answers for, separated by spaces.
   • data-cookie-banner-open on anything of the page, a footer link for one: a press opens the banner on its categories.

   Gating a script

   html <script type="text/plain" data-cookie-banner-run="measurement" src="https://example.com/tag.js"></script> <script type="text/plain" data-cookie-banner-run="marketing"> /* inline code, run once marketing is allowed */ </script> <iframe data-cookie-banner-run="marketing" data-src="https://www.youtube-nocookie.com/embed/..."></iframe>

   A browser does not run text/plain. When the category is allowed, at the choice or at the next page load, the engine writes the script again as a real one, in the same place, once, external scripts in the order of the page. A module is written data-type="module". Any other element with data-cookie-banner-run and a data-src gets its src the same way. A category the banner does not list is allowed by Accept all only. Call CookieBanner.scan() after adding gated scripts to the page by code.

   Google Consent Mode

   When gtag is a function of the page, the engine calls gtag('consent', 'update', {...}) with granted or denied for every signal the categories name, at each choice and at each load that finds one. The default is yours to set, before the Google tag:

   html <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('consent', 'default', { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied' }); </script>

   The colours and the places

   The look of the banner is its classes. The engine draws the edge, the mark and the states with two colours: accent, a setting, and the ink, which it reads from the background of the banner. Three lengths are custom properties to set in a rule of your own on [data-cookie-banner], [data-cookie-banner-tab]: --cookie-banner-gap, how far the banner and the mark keep from the edges, --cookie-banner-size, the side of the mark, --cookie-banner-z, their layer.

   From JavaScript

   • CookieBanner.get() returns the choice, { necessary: true, measurement: false, ... }, or null when there is none; it can be called before the banner is mounted. CookieBanner.allowed('measurement') answers for one category. CookieBanner.open() opens the banner on its categories, CookieBanner.reset() forgets the choice and asks again, CookieBanner.scan() looks for gated scripts again.
   • CookieBanner.mount(element, overrides) returns the instance of a banner, mounting it if it was not: { element, settings, choice(), allowed(category), open(choosing), close(), choose(shown), toggle(category, on), accept(), refuse(), save(), set(map), reset(), scan(), destroy() }. close() puts the banner away without storing anything. CookieBanner.auto(root) mounts every marked banner, and runs once on its own; CookieBanner.destroy(element) gives the markup back.
   • Events, all bubbling from the banner: cookiebanner:ready, cookiebanner:open, cookiebanner:close, cookiebanner:run for each gated script let through, and cookiebanner:change at each choice, with { choice, accepted, refused, withdrawn }; preventDefault() on it keeps the page from reloading when something was withdrawn.
   • The state is on the banner as data-cookie-banner-state: open, wide once it is drawn out, choosing while the categories show, blank while the words are away. A switch carries aria-checked, the mark data-cookie-banner-tab="shown".
   • Keyboard. Every control is a button: Tab reaches it, Enter and Space press it. Escape folds the categories back and returns to Choose. The banner is not a dialog and holds no focus: Tab goes on into the page. Opened from the mark, the banner takes the focus; once the choice is made the focus goes to the mark. While the banner is open the page scrolls what has the focus clear of it.
   • On a touch screen nothing changes but the layout: under 768px the banner is a sheet, the two answers side by side, Choose under them, the categories one above the other, the whole line of each a target.
   • **Under prefers-reduced-motion: reduce** the banner and the mark are simply there or not: no travel, no transition.
   • Without JavaScript the banner stays hidden and no gated script runs.
   • Several banners on a page each keep their own state; they share a choice when they share a key. A gated script runs as soon as one of them allows its category.
   • The words of the demo are the demo's: on a real site every sentence is the site's own, in its language, or asked for.

4. Avoid the pitfalls

   • A script that is not marked is not gated. The banner only holds back what is written type="text/plain" with data-cookie-banner-run. A tag manager loaded as a normal script loads whatever the answer.
   • Put the banner on every page, with the same key: in Webflow, make the pasted block a Component and place it on each page, or in a footer that is one. The code may then live once in the site's custom code.
   • Keep it out of a box that moves. The banner and the mark are position: fixed: inside an element with a transform, a filter or a perspective they are fixed to that element instead of the window. Paste it as a direct child of the page.
   • Early in the page is better. The banner comes where it is in the markup under Tab: placed first in the body, a keyboard reaches it first.
   • **Change version when the categories change.** A category added to the markup asks again by itself; one whose meaning changed does not.
   • Withdrawing reloads. With reload at 1 a visitor who switches off a category that already ran sees the page load again. Set it to 0 only if the site stops its tags itself.
   • localStorage is per origin. www.example.com and shop.example.com each ask. Where the browser refuses storage, private windows of some browsers, the choice lasts as long as the page.
   • The server cannot read it. The choice is in localStorage, not in a cookie: a server that must know reads cookiebanner:change and is told.
   • In Webflow the buttons and the switches are Link blocks, since Webflow has no button that holds layers; the engine gives each the role and the keys of a button. The Designer canvas runs no code, so there the banner sits in the flow, categories open, every word editable; it is fixed to the window in preview and on the published site.
   • **destroy() cannot take back a script that ran.** It removes the mark, the edge, the listeners and every attribute the engine wrote.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.