Consentl on Framer

Add Consentl with Framer's "Start of <head> tag" custom code, which runs it before Framer's own scripts, and replace Framer's Cookie Banner component.

Loader first in <head>: Depends on the method

Can the loader be first in <head>? Almost. Framer has a "Start of <head> tag" placement that puts the loader before Framer's own scripts; only Framer's meta and charset tags come before it. Framer's runtime is a <script type="module" async> in the body. It is not deferred, but it still runs after a synchronous loader at the start of <head>, because the loader comes first in document order. This makes Framer the no-code builder closest to the recommended setup.

Requirements

A paid site plan with a custom domain. Custom code only runs on the published site.
Your Consentl site key, on your site's Setup page in the dashboard. Add the site's hostname in the Domains field; www. and the bare domain count as the same site, so there is no need to add www. separately.

What your Consentl plan covers

Free: banner, consent log and manual blocking only.
Pro: adds Google Consent Mode v2.
Business: adds automatic blocking of known trackers and the blocking rules you add in the dashboard.

On Free and Pro, only tags you mark manually are held back.

Install

In the Framer project, open Project Settings → Custom Code and add a snippet.
Paste:
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
If the site also uses the Consentl GTM template, add &gcm=ext to the URL so that only the template sends Consent Mode commands.
Placement: Start of <head> tag.
Pages: all pages.
Run: Once. Framer navigates client-side, and client-side navigation does not lose the banner. "Run on every page visit" would inject the loader again on each navigation. Keep the loader URL identical on every page.
Remove Framer's Cookie Banner component from your pages if you used it. Only one banner should be active.
- The Cookie Banner component also sent the Google Consent Mode default and update calls. If your GTM or Google tags relied on them, Consentl's Consent Mode replaces them on the Pro plan and higher.
- On Free there are no Consent Mode calls after the component is removed. Mark the GTM or Google tag snippet manually (<script type="text/plain" data-consentl="analytics">…</script>, with the category that matches what it loads) so that it runs only after consent.
Publish.
Optional: add a link with the URL #consentl ("Cookie settings") to the footer component. Links whose URL ends in #consentl or #consentl-preferences, and any element with the attribute data-consentl-open, open the preferences.

Check that it works

Test the live site in a private window. Custom code does not run in the canvas or preview.

The visitor's region comes from their IP address: Consentl looks up the country in memory on each page view (nothing is stored) and applies your dashboard rule for it. US states are not told apart: US visitors get your rule for the whole US or, without one, your first US-state rule. An unknown country gets your rule for unknown regions (opt-in by default).

Languages

Framer locales share site-wide custom code. Leave out &l=… to use the dashboard's default language, or add the snippet per page or locale under Page settings → Custom Code, keeping the URL identical on every page of a locale.

Use an Embed component (HTML) on your cookie policy page:

<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="en"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>

Use data-consentl-request or data-consentl-withdrawal instead for the privacy request form or the EU withdrawal form. The withdrawal form needs the Pro plan or higher and must be switched on in the dashboard; otherwise it stays empty.
Framer renders the Embed component as an HTML embed. Check on the published site that the table appears.
If it does not, link to the hosted cookie declaration instead: https://api.consentl.com/p/SITE_KEY/cookies (a public page, always in sync with the dashboard; add ?l=de for another language).

Limitations

Framer's own meta and charset tags still come before the snippet. They are harmless.
Framer Analytics is cookieless and loaded by Framer; Consentl does not control it.
Tracking integrations in Project Settings (Integrations), such as Google Analytics, are injected by Framer and may not be blocked by Consentl. Prefer Google tags through GTM, or as custom code placed after the Consentl snippet. Consentl holds recognised trackers that load after it (Business plan and higher); on Free and Pro, only tags you mark manually are held.
Hard-coded tags. A <script src>, <img> pixel or <iframe> written in custom code or an Embed is fetched by the browser before any script can stop it, even when Consentl prevents it from running. Mark such tags manually and remove <noscript> pixels:
```
<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">
```
Tags loaded by code (GTM, a pixel's JavaScript loader) are held without a request when automatic blocking is on.

Stuck? Write to [email protected] — we answer in English on business days.