Install a Cookie Banner on Any Website With Free Cookie Consent

Add the generator code to every page of your site

Installing TermsFeed Free Cookie Consent takes 4 steps, about 15 minutes: create the code, keep the preferences link, tag your scripts, and confirm optional ones wait for consent by default. Without tagged scripts, the consent banner shows but every script still runs before consent.

The code is the same on every platform, and only the place you paste it changes. On a site where you edit the HTML template yourself, paste the code into that template and tag your scripts there. On a site builder, a content management system, or a static site generator, follow the guide for your platform instead. Each guide names the menu path or file for the code, the consent banner the platform ships, and the tracking the platform adds by itself.

Where the code goes on each platform

Paste the code into the site-wide slot of your platform, so it prints on every page. Find the menu path or file for the code on your platform.

What you need before you install the code

You need write access to your site template and a list of the third-party scripts it loads. A third-party script is any script from another company, such as Google Analytics 4, Meta Pixel, or a chat widget. Keep the list at hand for tagging.

Confirming that optional tagged scripts wait for the answer by default needs a desktop browser with developer tools, and those checks name the tabs of Chrome DevTools. Firefox and Safari show cookies on a tab named Storage instead of Application.

Step 1: Create the code and paste it before the closing body tag

Create the code in the TermsFeed generator at termsfeed.com/cookie-consent, then paste it into your template right before </body>. The generator asks for the consent type, your website name, the layout, the color palette, the language, and the link to your Privacy Policy. Keep express consent for any site with visitors from the European Union, the United Kingdom, or Switzerland.

The generator writes the script address without https:. The example code adds https:, and the address loads the same file with or without it.

<!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Example Store"});
});
</script>

<noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed Generator</a></noscript>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->

<!-- Below is the link that users can use to open Preferences Center to change their preferences. Do not modify the ID parameter. Place it where appropriate, style it as needed. -->

<a href="#" id="open_preferences_center">Update cookies preferences</a>

Keep both scripts in place, because Cookie Consent stops working when one of the 2 scripts is missing, and keep the <noscript> line.

1. The first script tag loads Cookie Consent from termsfeed.com. Keep charset="UTF-8" as the generator writes it. termsfeed.com sends the script as UTF-8 too, so the translated texts render correctly whatever the encoding of your page.
2. The inline script calls cookieconsent.run() with your options when the DOMContentLoaded event fires. Every setting of Cookie Consent is a key in this object.
3. The <noscript> line shows a credits line to visitors with JavaScript turned off.
4. The "Update cookies preferences" link reopens the Preferences Center.

The generator writes page_load_consent_levels as ["strictly-necessary"] for express consent and as all 4 categories for implied consent, so the code states what runs before the answer. It writes "language" with the language you chose, and a set language overrides the browser language. It writes "palette" with the palette you chose, while Cookie Consent without that option uses the light palette. Change any option, or learn what each one does, with Configure Your Cookie Banner.

Step 2: Keep a link that reopens the Preferences Center

Keep the "Update cookies preferences" link on every page, so visitors change or withdraw their consent as easily as they gave it. The link works through its id, open_preferences_center: a click on any element with that id opens the Preferences Center. Move the link to your footer, change its text, and style it as you like, but keep the id.

The link works on content added after the page loads too, because Cookie Consent checks the id on every click. Open the Preferences Center from a menu item or a button, or match a class instead of the id, with Add a Cookie Settings Link.

Step 3: Tag your third-party scripts

Change each third-party script on your list so it waits for consent by default: set type="text/plain" and add data-cookie-consent with its category. This step takes the most time. On a platform, replace each script the platform or a plugin prints for you with a tagged copy where the platform allows it, as the guide for your platform explains.

Keep the async of an external script that has one, unless inline code after it uses the library.

<script type="text/plain" data-cookie-consent="tracking" async src="https://analytics.example.com/script.js"></script>

Tag inline and external scripts the same way, with the category of what each one does. Choose the category for each script with The 4 Cookie Categories.

Google Analytics 4 takes the same 2 attributes for basic consent mode, or loads untagged for advanced consent mode. Copy the tagged Google tag from the Google Analytics 4 recipe, or send the signals with Set Up Google Consent Mode v2.

Step 4: Confirm that optional scripts you tag wait for consent

Publish the changed template and clear any page cache first. In express consent with page_load_consent_levels at its default, confirm that no request of an optional tagged script leaves the browser before you click the "I agree" button. A private window does not hold an earlier answer once every other private window is closed, so the consent banner shows.

Run the check in Chrome with one tagged script from your list. An untagged Google tag under Consent Mode sends collect requests with gcs=G100 before the answer by design, so leave it out of this check.

1. Close every private window, open a new one, open DevTools, and select the Network tab.
2. Type the host of the tagged script in the Network filter box, then load your site.
3. Confirm that the consent banner shows and that the Network tab does not list any request to that host.
4. Click the "I agree" button, and confirm that requests to that host appear with no page reload.

This check confirms that tagging works for one script. Run the full set of checks, including the "I decline" button and the cookies in the Application tab, with Check That Your Cookie Banner Works.

Where the Cookie Consent code goes and why

The Cookie Consent code works anywhere in the page, above or below the scripts you tag. The generated code calls run() when the browser has read the whole page, on DOMContentLoaded, so Cookie Consent finds every tagged script in your HTML. Until then, each tagged script waits where it sits, because the browser never runs a script with type="text/plain".

A tagged script that your code adds after cookieconsent.run() starts never runs, because Cookie Consent reads the tagged scripts once, when it starts. Load a script that a single-page app adds on a later route from a callback, with the pattern in Single-Page Apps and Frameworks.

With the code right before </body>, the page content renders first. The generator text says to place it right after the opening <body> tag, which works for the tagged scripts as well.

Keep a single copy of the code on each page. A second copy of the code or a second cookieconsent.run() call on the same page does nothing, and the first Cookie Consent keeps running with its own options. A code box on a single page covers that page only.

What the Cookie Consent code loads

The script address is a small loader that makes 2 requests to www.termsfeed.com: one for the script itself and one ping. The loader loads the script from /public/cookie-consent/4.2.0/cookie-consent-code.js.

Cookie Consent itself does not send any request or load any stylesheet, font, or image. Its styles go into one <style> element at the end of <head>, and its 36 translations are inside the script. Filter the Network tab on termsfeed.com to see the loader, the script, and the ping.

The loader passes the nonce from its own script tag to both requests, which matters on a site with a Content Security Policy. Read every request the loader makes in How the Cookie Consent loader works, and allow the loader in your policy with The Minimum Content Security Policy for Cookie Consent.

Cookies a consent banner does not control

Cookie Consent holds only the tagged scripts in your pages, so its consent banner does not control cookies that reach the browser any other way. These cookies and data never pass through Cookie Consent.

• Platform cookies. Cart, session, and login cookies of the platform, such as the Shopify cart or the WordPress login, come with the page itself.
• Cookies set by a server. A cookie your server sends with the page never passes through the browser script.
• Data sent from a server. An event that an app sends to another company from its own server never passes through the browser script either.
• Content in iframes. Video players, maps, and other embedded frames load their own scripts, which no tag reaches.
• Cookies set before a withdrawal. Turning a category off does not delete cookies that other scripts already set, and a tagged script that ran keeps running until the next page load.

Iframes need a placeholder instead of a tag, and a cookie your server sets or an event it sends needs a check of the answer in your server code. Read the answer on your server with Read the Consent State With Free Cookie Consent. Hold embedded videos and maps with a placeholder from Block Embeds and Iframes Until Consent. Read every limit of Cookie Consent in Limits of Free Cookie Consent: What It Does Not Do.

Install guides for site builders and content management systems

Add the code to Shopify, WordPress, Wix, Squarespace, or Webflow with the guide for your platform.

Install guide for static site generators

A static site generator takes the code once in its base layout, and every page it builds inherits it.

Install guide for other platforms

Platforms without a guide of their own take the code in their own site-wide code slot, where they have one.

Install Cookie Consent in a JavaScript framework

A JavaScript framework takes the code in its HTML shell or root layout, and cookieconsent.run() runs once per page load. Set up React, Next.js, Vue, Nuxt, Angular, SvelteKit, Astro, or Turbo Drive, with its route changes and page views, using Single-Page Apps and Frameworks.

What to do after installing Cookie Consent

Each platform guide has a short check. Close every private window and, in a new one, run the full check of every part of the install with Check That Your Cookie Banner Works. Change the layout, colors, or language of the consent banner with Configure Your Cookie Banner, then work through the Cookie Banner Go-Live Checklist before launch.