Paste the TermsFeed Free Cookie Consent code into the Footer code in your site settings, clear the built-in analytics integration, and add a preferences link. Cookie Consent then shows its consent banner on every published page and, by default, holds the optional tagged scripts until the visitor accepts their categories. Webflow leaves the consent banner to a consent app, an integration, or your own custom code, according to its tracking consent article. A site with no consent app installed shows visitors one consent banner.

Setup takes 3 steps and about 20 minutes. Site-wide custom code needs an active Site plan or a paid Workspace plan (Core, Growth, Agency, or Freelancer), and a role of Site manager or Designer. Create your code at termsfeed.com/cookie-consent and leave the generator defaults as they are, so the code uses express consent.

Paste the code into the Footer code of the Custom code tab, which Webflow places right before the closing </body> tag on every page. Preview mode runs custom code only after you turn on its "Enable custom code" toggle, and the code goes live only when you publish. The page-level custom code of a single page shows the consent banner on that page only.

Paste the code in the site settings, then publish to every domain.

  1. Open Site settings for your site.
  2. Select the Custom code tab.
  3. Paste the code into the Footer code field, and leave out the "Update cookies preferences" link the generator adds at the end.
  4. Click Save.
  5. Publish the site to every domain you use.

Keep your own generator options when you paste, as in this example. Adding https: to the script address, as the example does, changes nothing about the file it loads.

<!-- 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 -->

You build the preferences link in the Designer instead. Check what each part of the code loads in Install a Cookie Banner on Any Website.

Step 2: Remove the measurement ID from the built-in analytics integration

Delete the measurement ID from the Google Analytics integration, because Webflow prints that tag outside your code and Cookie Consent never holds it. Open Site settings > Apps & Integrations > Google Analytics, delete the measurement ID, click Save, and publish the site. Remove the Google site tools app too where you connected it, because the app places the Google tag the same way.

Paste each script below the Cookie Consent code in the Footer code field instead, tagged with its category, then click Save and publish the site. A script inside an Embed element of a page needs the same tag. Get the tagged Google Analytics 4 tag from Block Google Analytics 4 Until Consent, and the tagged code of every other tool from Vendor Recipes for Free Cookie Consent.

Give a link in your footer the ID open_preferences_center, so visitors reopen the Preferences Center from every page. Once Cookie Consent runs, it opens the Preferences Center on a click on any element with that ID and stops the link from opening another page. A footer in a Webflow component shows on every page that uses the component. Compare the ways to open the Preferences Center in Add a Cookie Settings Link.

  1. Open your site footer in the Designer.
  2. Add a Text Link with the text "Cookie settings".
  3. Type # as the URL of the link.
  4. Open the Element settings panel and type open_preferences_center in the ID field.
  5. Publish the site.

Call wf.allowUserTracking() from the scripts_specific_loaded callback once the visitor accepts tracking, so Webflow Analyze and Optimize start only after consent. These Webflow tools track visitors through Webflow itself, with no script in your custom code to tag. The Webflow Browser API offers the method, which affects only Webflow tools.

Set the tracking default to "Don't track by default" first, so Webflow waits for the allow call. Open the site in Webflow, go to the Insights tab, then Settings > Tracking, select "Don't track by default", and publish the site, as the Webflow tracking settings article shows. Then add the callbacks and callbacks_force keys of this example to the inline run() call in your Footer code, keep your own generator options, click Save, and publish the site.

<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",
  "callbacks": {
    "scripts_specific_loaded": function (level) {
      switch (level) {
        case 'tracking':
          if (window.wf && window.wf.ready) {
            wf.ready(function () {
              wf.allowUserTracking({ activate: true });
            });
          }
          break;
      }
    },
    "user_consent_saved": function (details, reason) {
      if (reason === 'choice' && !details.tracking && window.wf && window.wf.ready) {
        wf.ready(function () {
          wf.denyUserTracking();
        });
      }
    }
  },
  "callbacks_force": true
});
});
</script>

callbacks_force: true makes scripts_specific_loaded run for tracking on every page load of a visitor who accepted it, even with no tagged script of that category in the page. Read when scripts_specific_loaded needs this option in Callbacks and DOM Events.

user_consent_saved calls wf.denyUserTracking() when the visitor refuses or withdraws tracking, so Webflow stops tracking that visitor. A visitor who never accepts keeps the Webflow default, and "Don't track by default" keeps Analyze and Optimize off.

The checks assume express consent with page_load_consent_levels left out or at the generator value ["strictly-necessary"], and the "I decline" button shown. Close every private window, then check the published site in a new one with Chrome DevTools open. Preview mode runs custom code from a canvas.webflow.com address instead of your domain. The new window has no Cookie Consent cookies, so the consent banner shows as it does on a first visit.

Run the checks in order in that one private window.

  1. Open your published site in the new private window, open DevTools, select the Network tab, type cookie-consent in the filter box, and reload. The loader cookie-consent.js, the script cookie-consent-code.js, and the ping appear, and the consent banner shows.
  2. Type the host of one tagged script in the filter box and reload. No request appears before you answer.
  3. Click the "I agree" button. Requests to that host appear without a page reload.
  4. Select the Application tab, open Cookies for your domain, and check that cookie_consent_level and cookie_consent_user_accepted exist.
  5. Click the "Cookie settings" link in the footer. The Preferences Center opens.

Then close every private window and open a new one. Open DevTools with the Network tab filtered on the host of the tagged script, load your site, and click the "I decline" button. Open a second page and confirm that the Network tab does not list any request to that host. Follow the complete check for any site in Check That Your Cookie Banner Works.

Publish the site before you test anything, because your domain serves only the last published version, and then clear the trackers Webflow still adds through its integrations.

  1. The site is not published. The Network tab on your domain does not show a cookie-consent.js request. Publish the site to the domain you test.
  2. The Google Analytics integration still holds the measurement ID. Analytics requests appear in the Network tab before you answer, and after you accept, every page view counts twice if you added a tagged copy to the footer too. Delete the ID under Apps & Integrations > Google Analytics.
  3. The code sits in the custom code of one page. Only that page shows the consent banner, and every other page shows none. Move the code to the site-wide Footer code.
  4. An answer on the webflow.io address does not carry over to your domain. The cookies belong to each hostname. Open your own domain after you answer on the webflow.io address, and the Application tab does not show cookie_consent_user_accepted under Cookies for your domain. Run every check on your own domain.
  5. A second link reuses the same ID. The Webflow Audit panel flags a duplicate open_preferences_center id, and an id belongs on one element only. Give the second link a class, and set open_preferences_center_selector to the id and the class, such as "#open_preferences_center, .open-cookie-preferences", because the selector replaces the default id.

Cookies a tracker set before a visitor withdraws consent stay in the browser, because Cookie Consent does not delete cookies that other scripts set. Review the remaining limits of Cookie Consent in Limits of Free Cookie Consent: What It Does Not Do.