FOR DEVELOPERS

# Consent that lives in your codebase

Inth Consent runs on c15t, our open-source consent library. The banner ships in your bundle as React components and hooks, so it needs no extra request, you can style it like the rest of your product and you can debug it without leaving your app.

**Ask your coding agent**

```text
Add inth to my app: inth.com/SKILL.md
```

[Read the docs](https://c15t.com/docs)

**We value your privacy**

This site uses cookies to improve your browsing experience, analyze site traffic, and show personalized content.

**Privacy settings**

Choose which cookies and tracking technologies this site may use.

- Strictly necessary: always on
- Analytics: off
- Marketing: off

## Fast because it’s bundled.

c15t is part of your app, not a script from someone else’s server. The banner needs no extra request and doesn’t shift the page when it appears, and in Next.js the consent check can start on the server. These are its numbers on Cookiebench’s Next.js test page.

- **95/100** — Cookiebench score
- **89 ms** — Banner on screen
- **0 bytes** — Extra network for the banner

## Change the code. Watch the banner follow.

Start with theme tokens and props. When that isn’t enough, rearrange the banner’s parts or build your own UI on the same consent state. Click a value in the snippet to change it.

```tsx
<ConsentManagerProvider
  options={{
    theme: { colors: { primary: '#ffc803' } },
    colorScheme: 'light',
    i18n: {
      locale: 'en',
      messages: {
        en: {
          cookieBanner: { title: 'We value your privacy' },
        },
      },
    },
  }}
>
  <ConsentBanner primaryButton="accept" />
</ConsentManagerProvider>
```

## Swap the banner for your own UI. The consent state stays the same.

The stock banner and the inline widget are c15t components. Your own UI reads the same consent state through a hook, so a choice made in any of them shows up in the others.

- Strictly necessary (`necessary`): Needed for the site to work.
- Analytics (`measurement`): How visitors find and use the site.
- Marketing (`marketing`): Ads and how well they work.

### Stock banner

```tsx
import {
  ConsentBanner,
  ConsentDialog,
  ConsentManagerProvider,
} from '@c15t/react';

<ConsentManagerProvider
  options={{
    mode: 'hosted',
    backendURL: 'https://your-instance.c15t.dev',
    consentCategories: ['necessary', 'measurement', 'marketing'],
  }}
>
  <ConsentBanner />
  <ConsentDialog />
</ConsentManagerProvider>
```

### Your own UI

```tsx
import { useConsentManager } from '@c15t/react';

function CookieBar() {
  const { consents, setConsent } = useConsentManager();

  return (['measurement', 'marketing'] as const).map((name) => (
    <button
      key={name}
      aria-pressed={consents[name]}
      onClick={() => setConsent(name, !consents[name])}
    >
      {name}
    </button>
  ));
}
```

### Inline widget

```tsx
import { ConsentWidget } from '@c15t/react';

function PrivacySettings() {
  return <ConsentWidget hideBranding />;
}
```

## Let visitors change their mind from any page.

ConsentDialogTrigger is a small floating button that opens the privacy settings. Visitors can drag it to any corner and it stays where they left it. You choose when it shows.

When the button shows:

- `always` (Always): Whenever the banner and the settings are closed.
- `after-consent` (After a choice): Once the visitor has answered the banner.
- `never` (Never): Hidden. Open the settings from your own link instead.

```tsx
<ConsentDialogTrigger
  icon="fingerprint"
  showWhen="always"
/>
```

## Videos and maps wait until the visitor allows them.

c15t puts a placeholder where each YouTube video or Google map goes. Nothing is requested from YouTube or Google until the visitor allows the category that embed needs.

- YouTube, Product tour: waits for Marketing consent (`YouTubeEmbed`, `marketing`)
- Google Maps, Our office: waits for Analytics consent (`GoogleMap`, `measurement`)

## See every consent decision while you build.

The c15t dev tools dock a panel on your page in development. It shows where the visitor is, which policy matched, what each category is set to and which scripts were allowed to load. Accept or reject on the example page and watch the panel follow.

c15t DevTools panels: Location, Policy, Consents, Scripts, Events

Simulate location:

- DE · Germany: GDPR, policy europe\_opt\_in (Opt-In), matched by country
- US-CA · California: CCPA, policy california\_opt\_out (Opt-Out), matched by region
- US-NY · New York: NONE, policy world\_no\_banner (None), matched by default

Scripts:

- posthog: measurement
- meta-pixel: marketing
- intercom: functionality

## Run a free scan and find your privacy gaps

Find the change, get it reviewed and keep the decision with the code or production event that caused it.

[Run a free scan](/dashboard/sign-up) · [Talk to us](https://booking.inth.com/talk-with-inth)

**Inbox**

Privacy changes that need review