IABConsentDialog

Render the dialog next to IABConsentBanner

Render one IABConsentDialog next to IABConsentBanner:

---
import { ClientRouter } from 'astro:transitions';
import {
	ConsentDialogLink,
	ConsentScript,
	IABConsentBanner,
	IABConsentDialog,
} from 'c15t/astro/components';

interface Props {
	title: string;
}

const { title } = Astro.props;
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1" name="viewport" />
		<title>{title}</title>
		<ConsentScript />
		<ClientRouter />
	</head>
	<body>
		<slot />
		<footer>
			<ConsentDialogLink kind="iab">Privacy settings</ConsentDialogLink>
		</footer>
		<IABConsentBanner />
		<IABConsentDialog />
	</body>
</html>

IABConsentDialog renders an empty host element on the server. The IAB preference center and the TCF code both load the first time something opens it:

• The IAB banner's Customize button.
• The IAB banner's partners count, which opens the vendors tab.
• A <ConsentDialogLink kind="iab">.
• openDialog('iab', 'vendors') or openDialog('iab', 'purposes') from c15t/astro/client.

A page with IAB configured still serves a banner-only first load with no TCF bytes.

Props

Hovering or focusing an IAB control does not start the download early, as it does for the preference dialog. Set preload when the IAB preference center must open without a wait.

What it contains

The preference center is the IAB dialog of the framework the integration's ui option names. It has tabs for purposes and vendors, per-purpose and per-vendor controls including legitimate interest, and Accept All, Reject All and Save Settings. Saving writes the TC String, which __tcfapi then reports.

Opening the dialog on a different tab than the one it shows remounts it on that tab.

Next steps

• IABConsentBanner
• IAB TCF covers the CMP ID, the vendor list and how to check the TC String.
• Dialog islands and your own islands explains the ui option.