Quick Start

This guide gets a working consent banner on your site in under 5 minutes.

Installing with an AI agent? Start here.

Using Claude Code, Cursor, Codex, or another MCP-compatible agent? Run:

claude mcp add consentlayer --transport http https://api.consentlayer.com/mcp

Then tell your agent: "Create a ConsentLayer site for example.com and add the banner." It will sign in, provision the site, fetch the key, and paste the script tag for you. You can skip the rest of this page. Full agent guide: /docs/guides/ai-agents.

1. Create an account

Copy your project key from the dashboard, then add this to the <head> of every page — replace <your-key> with the value you copied. Don't include defer or async; the script must run synchronously to block trackers.

<script src="https://b.consentlayer.com/<your-key>/banner.js"></script>

That is it. The banner will appear on your site, handle consent collection, and block tracking scripts until consent is given.

3. Verify it works

Open your site in a browser. You should see the consent banner at the bottom of the page. Click "Accept all" — the banner disappears and a cl_consent cookie is set.

4. (Optional) Add the SDK

If you are building a React app and want programmatic consent control:

npm install @consentlayer/sdk

import { ConsentLayerProvider, ConsentGate } from '@consentlayer/sdk/react'

function App() {
  return (
    <ConsentLayerProvider>
      <ConsentGate category="statistics">
        <AnalyticsScript />
      </ConsentGate>
    </ConsentLayerProvider>
  )
}

5. (Optional) Create an API key

Go to Account > API Keys in the dashboard to create an API key for programmatic access:

curl https://api.consentlayer.com/api/v1/sites \
  -H "Authorization: Bearer cl_key_live_xxxxx"

Next steps

Concepts — Understand project keys, categories, and consent state
SDK Reference — Full API for the JavaScript SDK
Next.js Guide — Integrate with Next.js App Router