Add a cookie consent banner to a Webflow site

Cookbook · platform · View raw markdown (for agents)

In short: paste the live snippet in Site settings → Custom code → Head code, then publish. It applies to the whole site. Put your analytics tags in the same Head code, below the snippet.

You need #

• A Cookie Compliance AppID and the live snippet from MCP install.getSnippet or dashboard Integrations → Manual Integration (a new app uses /v2/hu-banner.min.js; an existing app keeps the URL in that snippet). A domain added in the dashboard is published automatically; if the status check still says the app is not published yet, or after later edits, click Publish Now, then copy the snippet. A snippet copied before publishing must be copied again. No account yet? Sign up (free plan, no card); with MCP, call help.startSignup.
• A Webflow site on a paid Site plan, or in a Workspace that includes custom code, and Site settings access (Site manager or Designer).

Where it goes #

Steps follow Webflow: custom code in head and body tags.

1. Copy the live snippet (see above).

2. Open Site settings → Custom code.

3. Paste the snippet in the Head code section, with your analytics tags below it if you have any:

   <script>
       var huOptions = { "appID": "YOUR_APP_ID", "currentLanguage": "en", "blocking": true, "globalCookie": false };
   </script>
   <script src="https://cdn.hu-manity.co/v2/hu-banner.min.js" type="text/javascript" charset="utf-8"></script>
   
   <!-- your analytics and pixel tags stay below the banner snippet -->
   

4. Click Save changes, then publish the site. Custom code shows in preview but goes live when you publish.

Head code is written before the closing </head> tag and applies to every page.

What the order controls #

The banner holds recognised trackers that load after it until the visitor chooses, in regions whose rule requires consent first. A script placed above the snippet runs straight away, and a script you mark data-hu-category="1" is treated as essential. What runs before consent is your decision, so keep analytics and pixels below the snippet.

Confirm the result #

View the page source of the published site, not the editor or its preview (use the browser's View Source, not the Elements panel): the huOptions script and hu-banner.min.js are in <head> as plain synchronous tags (no async or defer), and your analytics tags come after them. Webflow writes Head code before the closing </head> tag, so confirm in the page source that your analytics tags sit after the banner snippet.

Then run the browser checks in plain-html in a private window (banner shows, no tracking cookies before the visitor chooses in a region whose rule requires consent first, trackers start after Allow) and, for the full procedure, verify-install. Test from a region your strictest rule covers (for example the EU), or confirm region rules are off.

Gotchas #

• Keep the banner script synchronous. Webflow's script guidance suggests async or defer for external scripts in the head. For the banner, paste the tags exactly as they appear above, without async or defer, so it runs before the tags it holds.
• Publish after saving. Custom code does not reach the live site until you publish.
• Site-wide first. Put the banner in the site-wide Head code. Page-level code is for tags that belong to one page.
• Built-in integrations. Analytics and pixels connected through the builder's own settings are loaded by the builder. Run verify-install to see how they behave before the visitor chooses.
• Use your own AppID, and copy the snippet again after switching banner engine in the dashboard: changing the setting alone does not update a pasted snippet.

More help #

• Where to put the Cookie Compliance snippet — the placement rule, for the site owner.
• Banner not displayed — what to check when the banner does not show.