Client Modes

c15t supports three client modes that determine how consent data is stored and synchronized. Choose the mode that matches your infrastructure:

• c15t mode - Full backend integration with geolocation, API sync, and analytics
• Offline mode - Local-only storage with no network requests
• Custom mode - Bring your own backend with custom endpoint handlers

c15t Mode (Recommended)

The default mode. Connects to a c15t backend for full consent lifecycle management. We recommend using consent.io for a fully managed experience, but you can self-host as well.

What happens:

1. On page load, the client calls /init to fetch geolocation, jurisdiction, localized translation strings
2. When the user grants or changes consent, it is saved locally before being synced to the backend.
3. If the backend is unreachable, it falls back to Offline mode and re-syncs with the backend when it's available

Configuration:

• backendURL (required) - API endpoint path

Best for: Production apps that need geolocation-based jurisdiction detection, consent record storage, and compliance audit trails.

import { type ReactNode } from 'react';
import { ConsentManagerProvider, ConsentBanner } from '@c15t/nextjs';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'c15t',
        backendURL: '/api/c15t',
      }}
    >
      <ConsentBanner />
      {children}
    </ConsentManagerProvider>
  );
}

Offline Mode

No network requests. Consent is stored entirely in the browser using localStorage and cookies.

What happens:

1. Default jurisdiction is GDPR unless manually set via overrides
2. Consent preferences persist locally only
3. No server-side consent records or analytics

Trade-offs:

• No automatic geolocation or jurisdiction detection
• No consent audit trail
• No cross-device sync
• Works without any backend infrastructure

Best for: Static sites, development/testing, or as a starting point before setting up a backend.

import { type ReactNode } from 'react';
import { ConsentManagerProvider, ConsentBanner } from '@c15t/nextjs';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'offline',
        overrides: {
          country: 'DE', // Override country to trigger GDPR jurisdiction
        },
      }}
    >
      <ConsentBanner />
      {children}
    </ConsentManagerProvider>
  );
}

Custom Mode

Bring your own backend. You provide handler functions for each consent endpoint, and c15t calls them instead of making HTTP requests.

What happens:

1. On page load, the client calls your endpoint handler to fetch geolocation, jurisdiction, localized translation strings
2. When the user grants or changes consent, it is saved locally before being synced to the backend.
3. If one of your handlers fails, c15t returns a handler error and keeps local consent state, but automatic offline fallback and retry queue behavior is not provided for custom handlers by default

This lets you integrate c15t with any existing API - your CRM, your own consent database, or a third-party compliance service.

Best for: Teams with existing consent infrastructure that want c15t's frontend without its backend.

import { type ReactNode } from 'react';
import { ConsentManagerProvider, ConsentBanner } from '@c15t/nextjs';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'custom',
        endpointHandlers: {
          async init() {
            const res = await fetch('/my-api/consent/init');
            const data = await res.json();
            return { data, response: res, error: null };
          },
          async setConsent(options) {
            const res = await fetch('/my-api/consent', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(options?.body),
            });
            return { data: await res.json(), response: res, error: null };
          },
        },
      }}
    >
      <ConsentBanner />
      {children}
    </ConsentManagerProvider>
  );
}

Choosing a Mode