How do I install a Webflow cookie banner?
Add CookieConsentHQ through your Webflow site's Custom code settings. Paste the loader into the Head code field, save your changes and publish the website.
Follow these steps:
- Open Site settings.
- Select Custom code.
- Find the Head code field.
- Paste your CookieConsentHQ script at the top.
- Save the changes.
- Publish the site.
Copy the script from your CookieConsentHQ dashboard's Install tab. It has this format:
<script src="https://cdn.cookieconsenthq.com/s/YOUR_SITE_KEY.js"></script>
Use the site key assigned to your website. The script must load without async or defer.
Webflow's official documentation confirms that the Head code field adds code to the site's HTML head and that publishing is required for the change to go live.
This is a script-tag installation, not a Webflow app or native integration. The installation documentation covers the shared loader and available blocking controls.
Does the script load before my analytics tags?
CookieConsentHQ needs to load before analytics and advertising tags so its blocking controls can run before those tags execute. Place the snippet at the top of Webflow's Head code field, then inspect the published HTML to check its actual position.
Webflow documents that site-wide Head code is inserted before the closing </head> tag. Putting CookieConsentHQ first within that field does not guarantee it becomes the first tag in the entire document head.
Other markup or scripts may appear earlier in the generated page. If a tracking script executes before CookieConsentHQ loads, the loader cannot prevent that earlier execution.
This is an installation limitation to check on the published page rather than assume away.
For hardcoded tracking scripts, you may also need the manual blocking markup described below. That approach prevents early resource requests for scripts whose HTML you can edit.
How can I stop scripts and embeds before consent?
CookieConsentHQ automatically blocks known trackers before consent and supports manual blocking for scripts and embedded content. The manual markup is useful when you need to stop an external request as well as script execution.
For a marketing script, change its tag to:
<script type="text/plain" data-cchq="marketing" src="..."></script>
Use analytics or functional instead of marketing when the corresponding category applies.
A normal script tag using <script src> can be stopped from executing by CookieConsentHQ, but the browser may still fetch the resource early. The text/plain approach prevents that early script request.
For an embedded video or another marketing iframe, use:
<iframe data-cchq="marketing" data-cchq-src="..."></iframe>
This keeps the external address in data-cchq-src until the relevant consent handling allows it.
The controls apply where you can edit the script or iframe markup. Check the published page to determine what is loaded by the site and what remains outside your editable code.
Can I add a cookie table and preference controls?
Yes, CookieConsentHQ provides a placeholder for a cookie declaration table and a JavaScript method for reopening preferences. Add the placeholder wherever your site's editable HTML should display the table.
The placeholder is:
<div data-cchq-cookie-table></div>
CookieConsentHQ's cookie scanner categorizes found cookies and can fill that declaration automatically. The scanner crawls public pages, with 50 pages per scan on Free and 150 on paid plans.
You can also provide a link that calls CCHQ.showPreferences() so visitors can reopen their choices.
The API includes CCHQ.acceptAll(), CCHQ.rejectAll(), CCHQ.getConsent() and CCHQ.onConsent(callback) for supported consent interactions.
For individual records, the website can read CCHQ.getConsent().id, and the owner can use that ID in the dashboard's consent log.
How do I verify the published Webflow setup?
Publish the site and inspect a public page after the CookieConsentHQ script has been added. Use the free checker to check one page for cookies set before consent, hardcoded tracker tags and Consent Mode v2 defaults.
Begin by confirming that the generated HTML contains the loader and checking its position relative to tracking scripts. The position matters because Webflow's custom Head code field does not necessarily place the snippet before every other head element.
Next, examine the checker results. The checker inspects one page, so it cannot establish the behavior of every page or embed on the website.
For wider coverage, scheduled scans visit up to 50 pages on Free or 150 on paid plans. The cookie scanner provides those results in the dashboard.
CookieConsentHQ supplies blocking and consent controls for the installed scripts, but you must assess the site's actual tracking behavior and applicable requirements. This page is not legal advice.