Plain HTML Integration
The fastest way to add ConsentLayer — a single <script> tag, no build step,
no framework. Works for static sites, server-rendered apps in any language,
and any environment that doesn't have a JavaScript bundler.
1. Add the banner script
In the <head> of every page on your site:
<script src="https://b.consentlayer.com/YOUR_PROJECT_KEY/banner.js"></script>That's all you need for the banner to appear, collect consent, and block tracking scripts until consent is given.
Do not add defer or async. The banner must run synchronously while
the browser is parsing <head> — that's how it intercepts tracking scripts
before they execute.
2. (Optional) Read consent state in JavaScript
If you need to conditionally run code after consent — say, mount a custom analytics widget — load the SDK from a CDN:
<script type="module">
import {
hasConsent,
onConsentChange,
showPreferences,
} from "https://esm.sh/@consentlayer/[email protected]";
function render() {
if (hasConsent("statistics")) {
// Initialize your analytics here. Pretend pixel:
console.log("[analytics] fired");
}
}
// Run once on load, then again on every consent change.
render();
onConsentChange(render);
// Wire a "Manage cookies" button:
document.getElementById("cookie-settings")?.addEventListener("click", () => {
showPreferences();
});
</script>The SDK exports hasConsent, getConsentState, onConsentChange,
showPreferences, hasConsentCookie, and getJurisdiction. See the
Core SDK reference for full signatures.
3. Manage preferences link
Add a "Manage cookies" link in your footer that reopens the preferences modal. Two ways:
<!-- Option A: class hook (no JS needed) -->
<a href="#" class="consentlayer-open-preferences">Manage cookies</a>
<!-- Option B: imperative -->
<button id="cookie-settings">Manage cookies</button>The class hook works automatically — any element with class
consentlayer-open-preferences (or the attribute
data-consentlayer-open-preferences) opens the panel on click.
4. Verify it works
Open the page in an incognito window:
- The banner appears on first load
- Click "Accept all" — banner disappears, the
cl_consentcookie is set - Reload — no banner, cookie persists
- Click your "Manage cookies" link — the preferences modal opens
- Toggle a category off and save — the cookie updates without a reload