C15T Logo

Consent Manager Widget

A flexible, composable widget for building custom privacy consent interfaces. The widget provides granular control over privacy preferences.

tocOn this page

The Consent Manager Widget allows for detailed privacy consent management in your application. While the Cookie Banner handles initial consent, this widget enables users to fine-tune their privacy preferences through an intuitive accordion interface.

If you just want a dialog, consider using the Consent Manager Dialog instead (which handles the overlay logic for you).

Usage

import { ConsentManagerProvider,  ConsentManagerWidget } from "@c15t/react";
import { useState } from 'react';

export default function App() {
  const [isWidgetOpen, setIsWidgetOpen] = useState(false);

  return (
    <ConsentManagerProvider options={{
      mode: 'c15t',
      backendURL: 'https://your-instance.c15t.dev/',
      consentCategories: ['necessary', 'marketing'],
    }}>
      <button type="button" onClick={() => setIsWidgetOpen(!isWidgetOpen)}>
        {isWidgetOpen ? 'Close' : 'Open'}
      </button>

      {isWidgetOpen && (
        <div className="w-1/2 rounded-lg bg-white px-5 pt-8">
          <ConsentManagerWidget />
        </div>
      )}
    </ConsentManagerProvider>
  );
};

Styling

The Consent Manager Widget is designed to adapt to your application's visual style. Learn more about our styling system.

Theme Variables

These keys are available on the theme object to customize your banner.

Property
Types

API Reference

The main component accepts these props:

Property
Types

Compound Components

Property
Types