Astro Integration
This guide shows how to add ConsentLayer to an Astro site. Works with any Astro adapter — static, SSR, or hybrid.
1. Add the banner script
In your base layout (commonly src/layouts/Layout.astro or
src/layouts/Base.astro), add the script tag to <head> with the
is:inline directive:
---
// src/layouts/Layout.astro
const { title } = Astro.props
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
<script is:inline src="https://b.consentlayer.com/YOUR_PROJECT_KEY/banner.js"></script>
</head>
<body>
<slot />
</body>
</html>is:inline is required. Without it Astro processes the tag, may defer or
bundle it, and the banner won't run before tracking scripts.
2. (Optional) Add the SDK for React islands
If your Astro site uses React islands and you want programmatic consent control inside them, install the SDK:
npm install @consentlayer/sdkThen use it inside a React component with client:load:
// src/components/Analytics.tsx
import { ConsentLayerProvider, ConsentGate } from "@consentlayer/sdk/react";
export default function Analytics() {
return (
<ConsentLayerProvider>
<ConsentGate category="statistics">
<script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"
async
/>
</ConsentGate>
</ConsentLayerProvider>
);
}---
// src/pages/index.astro
import Layout from "../layouts/Layout.astro";
import Analytics from "../components/Analytics";
---
<Layout title="Home">
<h1>My site</h1>
<Analytics client:load />
</Layout>For non-React islands (Vue, Svelte, Solid, vanilla JS), use the core SDK directly — same surface as the plain HTML guide.
3. Manage preferences link
<a href="#" class="consentlayer-open-preferences">Manage cookies</a>The class hook works regardless of which framework (or none) your link component uses.
4. Verify it works
pnpm dev- Banner appears on first load
- Accept all → banner disappears,
cl_consentcookie set - Reload → no banner
- Manage cookies link → preferences modal opens