Webflow Integration

CookieFrame integrates with Webflow through the built-in Custom Code feature. You paste a single script tag into your site's head code section and publish — no plugins or third-party tools required.

Prerequisites

Before you begin, make sure you have:

• A CookieFrame account with your domain added
• A Webflow site on a paid plan (Custom Code requires at least the Basic site plan)
• Your 8-character Domain ID from the CookieFrame Dashboard

Finding Your Domain ID

1. Log in to your CookieFrame Dashboard
2. Select your domain from the list
3. Go to Settings → Integration
4. Your Domain ID is shown at the top (8 uppercase characters, e.g., A1B2C3D4)

Installation

Step 1 — Open Site Settings

In the Webflow Designer, click the W logo in the top-left corner to open the main menu, then go to Site settings. Alternatively, open the site settings from the Webflow Dashboard by clicking the gear icon next to your site.

Step 2 — Go to Custom Code

In Site Settings, select the Custom Code tab.

Step 3 — Add the Script to the Head

In the Head code section, paste the CookieFrame script tag:

<script src="https://cookieframe.com/api/widget/YOUR_DOMAIN_ID/script.js" async></script>

Replace YOUR_DOMAIN_ID with your 8-character Domain ID from the CookieFrame Dashboard.

Step 4 — Save and Publish

Click Save changes in Site Settings, then Publish your site from the Designer or Dashboard. The consent banner goes live only after you publish — it will not appear on your staging (webflow.io) preview until published.

Verification

1. Open your published Webflow site in an incognito / private window (to start without existing consent)
2. The CookieFrame consent banner should appear on the first visit
3. Open browser DevTools → Console and look for [CookieFrame] log messages to confirm the widget loaded
4. Accept or reject cookies and verify that your choice is respected on subsequent visits

Cookie Preferences Link

GDPR requires you to let visitors change their cookie preferences at any time. Add a Cookie Preferences link to your Webflow footer or privacy page.

In Webflow, add an Embed element to your footer and paste:

<a href="#" data-cookieframe="preferences">Cookie Preferences</a>

CookieFrame automatically attaches the click handler — no JavaScript needed.

Troubleshooting

Banner does not appear after publishing

1. Confirm you published after adding the script — Webflow staging previews and the Designer canvas do not run custom code the same way as the published site
2. Verify the Domain ID is exactly 8 characters and uppercase
3. Check that the domain in CookieFrame matches your published site URL (e.g., yoursite.com, not yoursite.webflow.io)
4. Open browser DevTools → Console and check for errors

Banner appears on webflow.io but not on custom domain

Make sure your CookieFrame domain is set to your custom domain, not the webflow.io staging URL.

Scripts still fire before consent

Place the CookieFrame <script> tag before any analytics scripts in the Head code section. If you use Webflow's built-in integrations (e.g., Google Analytics via the Integrations tab), enable Auto Block Scripts in your CookieFrame Dashboard under Settings → Behavior.

Another CMP is conflicting

If a previous consent tool is installed (e.g., a Finsweet attribute or another banner), remove it before adding CookieFrame to avoid conflicts.

Changes not reflected on the live site

Webflow caches published pages. After adding or updating the script, do a full publish. Then hard-refresh your browser (Cmd+Shift+R / Ctrl+Shift+R) or test in a fresh incognito window.

Need Help?

• Email us at [email protected]
• See the manual installation guide for advanced options (JavaScript API, event handling, script blocking configuration)