ConsentDialogLink

Add the link to your footer

Put one ConsentDialogLink in your footer, so visitors can change their choice at any time. Its children are the label:

---
import { ClientRouter } from 'astro:transitions';
import {
	ConsentBanner,
	ConsentDialog,
	ConsentDialogLink,
	ConsentScript,
} 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>Privacy settings</ConsentDialogLink>
		</footer>
		<ConsentBanner />
		<ConsentDialog />
	</body>
</html>

ConsentDialogLink renders a plain <button> or <a> with no styles of its own. It carries data-c15t-action="customize", and the same shared listener the banner uses opens the dialog on click.

Props

Use as="a" when your footer styles links and not buttons. The click handler cancels the link's navigation, so the page does not jump.

When the link is hidden

The link renders with the hidden attribute while there is nothing to manage:

• No policy is resolved yet, or the backend request failed.
• The resolved rule has prompt: 'none' and no rights, so it owes no consent interface.

The browser removes hidden as soon as a later /init answer supplies a rule that owes one, and adds it back if the rule stops owing one.

If your own CSS sets display on the link, keep [hidden] hidden too, for example with .footer-link[hidden] { display: none; }.

Open the IAB preference center

With an IAB TCF policy, set kind="iab":

<ConsentDialogLink kind="iab">Privacy settings</ConsentDialogLink>

The page needs IABConsentDialog for kind="iab", and ConsentDialog for the default kind. See IAB TCF.

Accessibility

The link is a real <button> or <a>, so it is reachable with Tab and activates with Enter. Give it a label that says what it opens, such as "Cookie preferences" or "Privacy settings". Keyboard focus or a hover on a link for the preference dialog starts downloading it, so by the time the visitor presses Enter the dialog is usually ready.

Open a dialog from your own control

A control that is not a ConsentDialogLink can open the dialog with openDialog() from c15t/astro/client. See open and close dialogs.

Next steps

• ConsentDialog is the dialog this link opens.
• Verify consent checks that preferences reopen after a choice.