Consent Manager Dialog

The Consent Manager Dialog provides a clean, focused way for users to customize their privacy preferences. This dialog is required by various privacy regulations like GDPR.

Usage

import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider options={{
      mode: 'c15t',
      backendURL: 'https://your-instance.c15t.dev',
      consentCategories: ['necessary', 'marketing'],
    }}>
      <CookieBanner /> 
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
};

Legal Links

You can display legal links (like Privacy Policy or Cookie Policy) inline with the dialog description. Legal links are rendered inline with the description text, styled as links with commas separating multiple links.

Setting Up Legal Links

First, configure your legal links in the ConsentManagerProvider:

<ConsentManagerProvider
  options={{
    legalLinks: {
      privacyPolicy: {
        href: '/privacy',
        label: 'Privacy Policy',
      },
      cookiePolicy: {
        href: '/cookies',
        label: 'Cookie Policy',
      },
      termsOfService: {
        href: '/terms',
        label: 'Terms of Service',
      },
    },
  }}
>
  <ConsentManagerDialog />
</ConsentManagerProvider>

Displaying Legal Links

By default, the Consent Manager Dialog shows no legal links. To display them, pass the legalLinks prop with an array of the link keys you want to show:

// Show no legal links (default)
<ConsentManagerDialog />

// Show privacy policy and cookie policy
<ConsentManagerDialog legalLinks={['privacyPolicy', 'cookiePolicy']} />

// Show only terms of service
<ConsentManagerDialog legalLinks={['termsOfService']} />

Legal links appear inline with the description text. For example, if your description is "Customize your privacy preferences", it will render as: "Customize your privacy preferences Privacy Policy, Cookie Policy" where the links are styled in blue and underlined on hover.

Styling

The Consent Manager Dialog 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 dialog.

The dialog also contains the ConsentManagerWidget component so the theme keys are available to customize the widget.

Accessibility Features

The dialog implements several accessibility best practices:

Focus Management

When the dialog opens, it:

1. Traps focus within the dialog
2. Sets initial focus on the first interactive element
3. Remembers and restores the previous focus position when closed

Focus Trapping

The dialog implements focus trapping to ensure keyboard navigation remains within the dialog while it's open. This is crucial for:

• Keyboard users: Prevents users from accidentally interacting with content hidden behind the modal
• Screen reader users: Maintains proper context and prevents confusion
• WCAG compliance: Supports 2.4.3 Focus Order and provides proper modal functionality

How Focus Trapping Works

The ConsentManagerDialog uses the useFocusTrap hook internally to:

1. Capture the element that had focus before the dialog opened
2. Set initial focus to the first interactive element inside the dialog
3. Keep focus cycling within the dialog when users press Tab or Shift+Tab
4. Restore focus to the original element when the dialog closes

You can control focus trapping with the trapFocus prop:

// Default behavior (recommended for accessibility)
<ConsentManagerDialog trapFocus={true} />

// Disable focus trapping (not recommended)
<ConsentManagerDialog trapFocus={false} />

Keyboard Navigation

Users can:

• Close the dialog with the Escape key
• Navigate controls with Tab
• Interact with all elements using only the keyboard

Screen Readers

The dialog announces itself appropriately with:

• Proper ARIA roles and attributes
• Clear labeling of controls
• Status updates when opened/closed

API Reference

ConsentManagerDialog

The main component accepts these props:

Compound Components