Setting up CookieOfficer on Webflow

In Webflow, you add the CookieOfficer code in the site settings, in the Head code field. The setup takes a few minutes, but it requires a paid site plan and publishing the project, because the code doesn't run in preview. Below you'll find the whole process and one situation specific to Webflow in which automatic blocking gets in the way of animations.

The Webflow interface is available only in English, so we give the names of its fields exactly as they appear there.

Before you start

• You need a paid plan (Site plan). Custom code doesn't work on the free plan.
• You have copied the code from the Installation page in the CookieOfficer panel. In the “Deployment method” section, choose “Code on the site”, then in the “Paste the code at the top of <head>” card click “Copy” next to the “CookieOfficer script” block.

How do I add the code to a Webflow project?

1. Open the project and go to Site settings.
2. Open the Custom code tab.
3. Paste the CookieOfficer code at the very beginning of the Head code field, before any other scripts.
4. Click Save changes.
5. Publish the project with the Publish button.

The code from the Head code field works across the whole site. Don't add it in the settings of individual pages, because then the banner will appear only on those pages.

Changes are visible only on the published site. The code doesn't run in the Designer or in preview, so always check the result on the published site. If you test on the Webflow staging address, add it to the project in CookieOfficer beforehand.

How do I verify the setup?

Go back to the Installation page in the CookieOfficer panel and click “Verify now”. If it succeeds, you'll see the heading “Script detected and active”.

Then run a scan of the site in the panel and go to the Cookies page. There should be no message above the list of detected items about trackers running after the visitor has rejected consent.

Common mistakes to avoid

• Don't check the result in the Designer or in preview. Custom code runs only on the published site.
• Don't paste the code into the Footer code field. Anything that runs earlier will stay out of reach of automatic blocking.
• Don't add the code in the settings of individual pages. The banner is meant to work across the whole site, not on selected subpages.
• Don't forget to publish the project. Saved code doesn't reach the site until it is published.