ConsentRoot

Mount ConsentRoot in the root layout

Export loadConsent as the root layout's server load, then pass its consent to ConsentRoot as state:

export { loadConsent as load } from '@c15t/svelte/kit';

<script lang="ts">
	import { posthog } from '@c15t/integrations/posthog';
	import {
		ConsentBanner,
		ConsentDialog,
		ConsentDialogLink,
		ConsentRoot,
	} from '@c15t/svelte';

	let { children, data } = $props();

	const scripts = [
		posthog({
			id: 'phc_your_project_key',
			initOptions: { cookieless_mode: 'never' },
			loadMode: 'after-consent',
		}),
	];
</script>

<ConsentRoot state={data.consent} {scripts}>
	{@render children()}
	<footer>
		<ConsentDialogLink>Privacy settings</ConsentDialogLink>
	</footer>
	<ConsentBanner />
	<ConsentDialog />
</ConsentRoot>

Pass data.consent through unchanged. It holds the visitor's server-resolved consent, the mode c15tHandle() was given, the backend URL and the consent route's prefix. ConsentRoot renders ConsentProvider from it, on the server and in the browser, so both render the same banner and the browser makes no second policy request. The quickstart explains c15tHandle and loadConsent.

ConsentRoot turns the mode into a transport that loads each policy path only when it runs. A page the server resolved ships a small transport that saves choices, and no resolver, policy rules, snapshot or other languages. The code to resolve the policy again in the browser, such as after a language change or on a prerendered page, loads when it is needed.

To use a transport of your own, pass custom() from @c15t/svelte as ConsentRoot's mode prop. c15tHandle() takes only data modes.

Keep the provider in the root +layout.svelte. A layout stays mounted across client-side navigation, so the runtime, the loaded scripts and the dialog survive page changes. A provider in a page component would start again on every navigation.

Create scripts and callbacks in the layout component, not in +layout.server.ts. They hold functions, which a server load cannot send to the browser.

Props

Pass each option as a top-level prop, or group them in options. When both set the same option, the top-level prop wins. The ConsentManagerOptions type from @c15t/svelte lists every option. SvelteKit's ConsentRoot takes the same props, except that state replaces mode and prefetch.

"Read once" options are read when the provider is created. Changing them later has no effect until the provider remounts, and outside production a change to mode, i18n or experiment logs a warning. Options that update after mount are compared with their previous values, so a new options object that only changes theme sends no request. The provider has no policyRules option. For local policy rules, pass offline({ policyRules }) as mode.

What the provider does when it mounts

The provider creates the consent runtime while the component initializes, on the server and in the browser. Creating it has no side effects, so the server can render the banner from prefetch. In the browser, onMount starts the runtime:

1. It reads the stored choice from the cookie and local storage.
2. It starts the script loader, the iframe blocker and, if configured, the network blocker and the IAB TCF add-on.
3. It resolves the policy with its mode, unless prefetch already holds one.

When the provider unmounts, it stops all of them. Keep one provider at the root of the app, so it stays mounted across navigation and every component can reach it.

With networkBlocker, matching requests are held from the moment the provider is created in the browser, before its children run their own code, until the blocker decides them.

Share one runtime

Pass runtime when two component trees that cannot share Svelte context need the same consent state. Create it with createConsentRuntime() from @c15t/svelte, pass it to each provider, and call runtime.start() and runtime.dispose() yourself. A provider never starts or disposes a runtime it did not create. Options that build the runtime, such as mode, scripts and callbacks, come from your createConsentRuntime() call; display options such as theme and noStyle still apply per provider.

Verify the provider

Open the page in a private window with DevTools open:

1. The banner appears once the policy resolves. window.c15t in the console shows pkg: '@c15t/svelte'.
2. The Network panel shows the request your mode makes: none for manifest() with a bundled snapshot, one /init for hosted(), and none when the page came with a server-resolved state.
3. A component that calls getConsentManager() renders without the c15t: no v3 consent context error.