Consentl

Consentl with Astro

Add the Consentl loader to your Astro base layout with is:inline, so Astro does not bundle it into a deferred module. Works with view transitions (ClientRouter).

Loader first in <head>
Yes

The loader must be the first script in <head> and synchronous. In Astro, is:inline is required: without it, Astro bundles the script into a deferred module.

Tested with Astro 6.4 on Node 22. Astro 7 needs Node 22.23.4 or later and has not been tested yet.

Base layout

---
// src/layouts/BaseLayout.astro
const { lang = "en", title } = Astro.props;
const SITE_KEY = import.meta.env.PUBLIC_CONSENTL_SITE_KEY;
if (!SITE_KEY) throw new Error("Set PUBLIC_CONSENTL_SITE_KEY to your Consentl site key (sk_…)");
const loader = `https://api.consentl.com/v1/loader.js?k=${encodeURIComponent(SITE_KEY)}&l=${encodeURIComponent(lang)}`;
---
<html lang={lang}>
  <head>
    <meta charset="utf-8" />
    <script is:inline src={loader}></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <footer><a href="#consentl">Cookie settings</a></footer>
  </body>
</html>

The check on SITE_KEY makes the build fail when the environment variable is missing, instead of publishing k=undefined.

View transitions

With <ClientRouter />, Astro swaps the page body on every navigation. The banner, the floating icon and "Cookie settings" links keep working after each swap. Keep the loader address the same on every page (the same l= for one language), so that Astro does not run it again, and do not add data-astro-rerun to it.

Check that it works

View the page source: the loader is the first <script> in <head>. Then follow the checks in Any website.

Consent Mode needs the Pro plan or higher, automatic blocking of known trackers the Business plan; on Free only the tags you mark yourself wait for consent. Tags written in the page HTML are requested before consent unless you mark them type="text/plain" data-consentl="…" (see Any website).

Limitations

  • Integrations that inject scripts above your layout's <head> content run before Consentl.
  • If you send a Content Security Policy, allow https://api.consentl.com (see Any website).

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