Consentl on Webflow

Add the Consentl loader to Webflow's site-wide Head code, forward the choice to Webflow Analyze, and learn what "not first in head" means on Webflow.

Loader first in <head>: No — read the limitations

Can the loader be first in <head>? No. Webflow outputs site-wide Head code at the end of <head>, after its own meta tags, CSS and small inline scripts. Page-level code comes after the site-wide code. See Limitations.

Requirements

A paid Site plan, or a Core, Growth, Agency or Freelancer Workspace. On a free Starter site the Custom code tab is visible but cannot be saved.
Your Consentl site key, on your site's Setup page in the dashboard. Add every hostname the site runs on (your custom domain and your your-site.webflow.io address) in the Domains field; www. and the bare domain count as the same site, so there is no need to add www. separately.

What your Consentl plan covers

Free: banner, consent log and manual blocking only.
Pro: adds Google Consent Mode v2.
Business: adds automatic blocking of known trackers and the blocking rules you add in the dashboard.

On Free and Pro, only tags you mark manually are held back.

Install

In Webflow, open the site → Site settings → Custom code.
In Head code, paste this on the first line, above any other code already there:
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
Replace SITE_KEY, and en with your site language (see Multilingual sites). If the site also uses the Consentl GTM template, add &gcm=ext to the URL so that only the template sends Consent Mode commands.
Click Save changes, then Publish to your webflow.io and/or custom domain.
Optional: add a "Cookie settings" link to your footer: a Link block with the URL #consentl. Links whose URL ends in #consentl or #consentl-preferences, and any element with the attribute data-consentl-open, open the preferences.
Optional: on your cookie policy page, add an Embed element with the cookie declaration:
```
<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="en"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>
```
Use data-consentl-request or data-consentl-withdrawal instead for the privacy request form or the EU withdrawal form. The withdrawal form needs the Pro plan or higher and must be switched on in the dashboard; otherwise it stays empty.

Check that it works

Open the published site in a private window: the banner appears. Custom code does not run in the Designer canvas. It does run in Preview and Comment mode, so the banner can appear there too; the published site is the reliable test.

The visitor's region comes from their IP address: Consentl looks up the country in memory on each page view (nothing is stored) and applies your dashboard rule for it. US states are not told apart: US visitors get your rule for the whole US or, without one, your first US-state rule. An unknown country gets your rule for unknown regions (opt-in by default).

Multilingual sites (Webflow Localization)

Since 26 June 2026, Webflow Localization lets you set Head and Footer custom code per locale. Add the loader to each locale's Head code with that locale's language in &l= (for example &l=de for the German locale). Each page then loads one loader URL, the same on every page of that locale.

If you prefer one snippet for all locales, leave out &l=…: the banner then uses the site's default language from the dashboard.

Webflow Analyze / Optimize

Webflow's own analytics have a separate consent switch:

Set Insights → Settings → Tracking to Don't track by default, then publish the site. The setting takes effect only after publishing.

Forward the Consentl choice by adding this to Footer code. It applies the current choice on every page load and follows later changes:

<script>
  (function () {
    function sync(c) {
      if (!c || !window.wf) return;
      wf.ready(function () {
        var want = c.analytics ? "allow" : "deny";
        if (wf.getUserTrackingChoice() === want) return;
        if (c.analytics) wf.allowUserTracking({ activate: true });
        else wf.denyUserTracking();
      });
    }
    if (window.Consentl) sync(window.Consentl.get());
    document.addEventListener("consentl:change", function (e) { sync(e.detail); });
  })();
</script>

Limitations

Not first in head. Anything Webflow renders above the Head code runs before Consentl. That includes native integrations under Site settings → Apps & integrations (Google Analytics, Meta Pixel), which may be injected before it. Remove those integrations and load the same tags through Google Tag Manager with Consent Mode (Pro plan and higher), or as tags loaded by code in Head code below the Consentl line. Consentl holds back recognised trackers that load after it (Business plan and higher); on Free and Pro, only tags you mark manually are held.
Hard-coded tags. A <script src>, <img> pixel or <iframe> written in Head/Footer code or an Embed element is fetched by the browser before any script can stop it, even when Consentl prevents it from running. Mark such tags manually and remove <noscript> pixels:
```
<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">
```
Tags loaded by code (GTM, a pixel's JavaScript loader) are held without a request when automatic blocking is on.
Each custom code field accepts up to 50,000 characters; the loader is one line.
Webflow has no built-in cookie banner to switch off. Remove any other banner app.
Content Security Policy. Enterprise sites can set response headers, including content-security-policy, under Site settings → Publishing → Custom headers. If you set one, allow https://api.consentl.com as described in the web guide. Without a custom CSP header there is nothing to change.

Stuck? Write to [email protected] — we answer in English on business days.