IABConsentBanner

IABConsentBanner is a pre-built consent banner that follows the IAB Transparency & Consent Framework (TCF) 2.3 specification. It renders when the consent model is set to 'iab' and includes required disclosures like partner count, purpose summaries, and legitimate interest notices.

Use this component instead of ConsentBanner when you need IAB TCF compliance for programmatic advertising in EU jurisdictions.

When to Use

• Your site participates in the IAB TCF ecosystem (ad exchanges, SSPs, DSPs)
• You need to disclose vendor partnerships and data processing purposes per IAB requirements
• The detected jurisdiction requires IAB TCF compliance (typically EU/EEA)

Basic Usage

import { type ReactNode } from 'react';
import { iab } from '@c15t/iab';
import { ConsentManagerProvider } from '@c15t/react';
import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';

export default function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        iab: iab({
          vendors: [1, 2, 10, 25],
          // cmpId is automatically provided by the backend when using Inth.
          // Only set this if you have your own CMP registration.
          // cmpId: 123,
        }),
      }}
    >
      <IABConsentBanner />
      <IABConsentDialog />
      {children}
    </ConsentManagerProvider>
  );
}

Banner Content

The IAB banner automatically displays:

• Title — Heading text from IAB translations
• Description — Includes the partner count (e.g., "We and our {partnerCount} partners...")
• Partners link — Clickable link that opens the vendor tab in the preference center
• Purpose/stack list — Up to 5 purpose/stack names summarizing data usage, with an "and X more" overflow
• Legitimate interest notice — Required IAB disclosure about legitimate interest processing
• Scope notice — Service-specific scope disclosure

Buttons

The banner includes three action buttons:

Primary Button

Highlight a specific button as the primary action:

<IABConsentBanner primaryButton="accept" />;

Options: 'reject', 'accept', 'customize' (default: 'customize')

Props