Find the pages for your situation, in the order to read them
Pick the situation closest to yours and read its pages for TermsFeed Free Cookie Consent 4.2.0 in order, from the first task to the last. Find every section of the manual on the Cookie Consent home page.
Set up your first consent banner
Check whether your site needs a consent banner, then install the code, tag your scripts, and test the result.
| Order | Page | What you do there |
|---|---|---|
| 1 | Do I Need a Cookie Banner? EU, UK, and US Rules | Check whether your site needs a consent banner |
| 2 | What Free Cookie Consent Does | Learn what the consent banner, the Preferences Center, and the 3 cookies do |
| 3 | Express and Implied Consent | Confirm that express consent fits your visitors |
| 4 | The 4 Cookie Categories | Choose a category for each script on your site |
| 5 | Install a Cookie Banner on Any Website | Place the code on every page, with a link that reopens the Preferences Center |
| 6 | Block Scripts Until Consent | Tag every optional script that sets cookies or stores data in the browser, and every optional script that sends visitor data to another company |
| 7 | Check That Your Cookie Banner Works | Run the installation checks in a private window |
| 8 | Cookie Banner Go-Live Checklist | Run the final checks before visitors arrive |
Hold the tracking your platform adds on its own
Site builders add analytics and pixels from their own settings screens, outside the code you tag. Move that tracking into tagged scripts where the platform allows it. Turn off the consent banner the platform ships, unless the guide for your platform says to keep it for tools the platform runs outside your code.
| Order | Page | What you do there |
|---|---|---|
| 1 | Install a Cookie Banner on Any Website | Find where the code goes and which platforms need a paid plan for site-wide code |
| 2 | Add a Cookie Banner to Shopify, Add a Cookie Banner to WordPress, Add a Cookie Banner to Wix, Add a Cookie Banner to Squarespace, Add a Cookie Banner to Webflow | Move the built-in tracking of your platform into tagged scripts where the platform allows it |
| 3 | 2 Cookie Banners Appear on Your Site | Turn off the consent banner the platform shows, unless your install guide keeps it |
| 4 | Scripts Run Before Consent | Find a platform script that still runs before the visitor answers |
| 5 | Check That Your Cookie Banner Works | Confirm in a private window that no tracker request, tagged or added by the platform, leaves before consent, apart from the requests a recipe expects |
Send the choice to Google, Microsoft, Meta, and other vendors
Cookie Consent does not send consent signals of its own, so your callback code passes the choice to each vendor. Start with the category mapping, which every integration page follows.
| Order | Page | What you do there |
|---|---|---|
| 1 | Map Categories to Vendor Consent Signals | Match each Cookie Consent category to the Google, Microsoft, Meta, TikTok, and HubSpot signals |
| 2 | Set Up Google Consent Mode v2 | Set the defaults to denied and update them from the callback |
| 3 | Block Microsoft Clarity Until Consent | Tag Clarity or load it untagged; either way, send its consent command from the callback |
| 4 | Block the Meta Pixel Until Consent | Tag the pixel, or revoke consent in the base code and grant it from the callback |
| 5 | Cookie Banner Examples and Tutorials | Copy a complete page with Google Analytics 4 and Google Consent Mode v2 |
| 6 | Google Consent Mode Stays Denied | Fix a Consent Mode state that stays denied after the visitor accepts |
Hold videos and booking widgets from other services
Cookie Consent holds only <script> elements, so an embedded video waits behind a placeholder that a tagged script replaces with the player. A booking widget such as Calendly loads from a script, which you tag with its category.
| Order | Page | What you do there |
|---|---|---|
| 1 | Block Embeds and Iframes Until Consent | Build the placeholder and the tagged script that loads the embed |
| 2 | Block YouTube Embeds Until Consent | Hold the YouTube player until consent |
| 3 | Block Calendly Until Consent | Tag the Calendly scheduler, with a fallback link |
| 4 | Vendor Recipes for Free Cookie Consent | Look up the category and the host to check for each recipe, and tag a tool that is not listed |
Run Cookie Consent on several hostnames or in a single-page app
Share one answer across subdomains with the same cookie domain on each. Start Cookie Consent once in the host page of a single-page app, and find where the code goes in each JavaScript framework.
| Order | Page | What you do there |
|---|---|---|
| 1 | Share Consent Across Subdomains | Set the cookie domain so that every subdomain reads one answer |
| 2 | Cookie Banner Reappears on Subdomains | Fix a consent banner that returns on another subdomain |
| 3 | Single-Page Apps and Frameworks | Start Cookie Consent once, send page views on route changes, and place the code in React, Next.js, Vue, Nuxt, Angular, SvelteKit, Astro, or Turbo |
| 4 | Content Security Policy (CSP) | Allow the script and its nonce under a strict policy |
Change how the consent banner looks or behaves
Most changes, including the light or dark palette, are options in the configuration object on your page, and any other styling of the consent banner takes custom CSS. No option changes the wording of the consent banner.
| Order | Page | What you do there |
|---|---|---|
| 1 | Configure Your Cookie Banner | See every configuration page and how options take their values |
| 2 | Cookie Banner Layouts | Pick 1 of 4 layouts and add the legal links |
| 3 | Cookie Banner Colors and Custom CSS | Pick the light or dark palette and override styles |
| 4 | Cookie Banner Languages | Set the language, or let the browser choose it |
| 5 | Add a Cookie Settings Link | Add a link that lets visitors change their answer |
| 6 | Hide Cookie Categories and Buttons | Show only the categories your site uses |
| 7 | Reload the Page After Consent | Reload the page after an answer where a script needs it |
| 8 | A/B Test Your Cookie Banner | Compare 2 layouts or palettes without identifying visitors |
Show that visitors consented
Cookie Consent keeps the answer in the browser only, so a record of consent comes from your own callback code. Decide what to record before you write the callback.
| Order | Page | What you do there |
|---|---|---|
| 1 | Keep a Consent Log to Prove Consent | Record each answer with the consent token, the time, and the text shown |
| 2 | Consent Cookie Storage and Duration | Learn what the 3 cookies hold and how long they last |
| 3 | Free Cookie Consent Callbacks and DOM Events | Run your code when the visitor answers |
| 4 | Read the Consent State | Read the answer in the browser and on your server |
| 5 | Reject All Button and Cookie Walls | Keep refusing as easy as accepting |