How to add a cookie consent banner to Webflow (step by step)

Webflow was practically designed for this job. Site settings hold a Head code field that injects into every page right before </head>, and every paid plan can use it. A consent banner is one paste in that field.

Webflow’s own docs cover the field and its quirks (including the 50,000 character limit); their help article has the latest if their interface has changed.

What you need

• A Webflow site on a paid plan. Starter and above include site-level custom code; the free plan does not.
• Your Zest snippet from the playground:

<script>
  window.ZestConfig = {
    position: "bottom",
    theme: "auto",
    policyUrl: "/privacy-policy"
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest/dist/zest.min.js"></script>

The paste

1. Open the project in the Designer.
2. Click the gear icon for Site settings.
3. Open the Custom Code tab.
4. Drop the Zest snippet into Head Code. That field applies to every page of the site, before the closing head tag.
5. Ignore the size worry: head code holds 50,000 characters and the Zest snippet is a few hundred.
6. Save Changes, then Publish. The Designer preview never runs custom code; the published site does.

Script order, or why trackers fire early

Zest can only gate what loads after it. Webflow gives scripts two homes: the site-level Head Code field, and per-page head/footer fields in page settings. If you run analytics or a pixel:

• Put the Zest snippet at the very top of the site-level Head Code field, above any tracking code living in the same field, or
• Leave the trackers where they are and add their domains to the blockedDomains array in window.ZestConfig (blocklist guide) so nothing fires until the visitor chooses.

Confirm it

Published domain, private window:

• The banner greets a first-time visitor and never comes back after they choose.
• With blocking configured, network requests to analytics and pixel endpoints appear only after consent to the matching category.

If it misbehaves

Nothing shows. You are in the Designer preview. Publish and open the live domain.

Snippet edits do nothing. Head code ships with your publish. Save, publish again, hard-refresh.

Webflow’s own analytics slip through. The platform’s native analytics are part of the platform; third-party consent tools do not gate them. If you need them consent-gated, switch them off and run Google Analytics through Zest’s blocking instead.

Why not a marketplace CMP

Webflow’s ecosystem leans toward subscription consent apps. Zest is one 16KB open-source script doing the same work: free, no pageview metering, no vendor lock, self-hostable if you would rather not use a public CDN. The head code field is the entire integration.

The policy generator writes the matching cookie or privacy policy for free, from six questions.