The open standard for cookie banners.

import {
	ConsentBanner, ConsentDialog, ConsentDialogLink, ConsentRoot,
} from 'c15t/next';
import { defineConsentConfig, resolveConsent } from 'c15t/next/server';
import type { ReactNode } from 'react';

export const consentConfig = defineConsentConfig({
	backendURL: 'https://your-project.inth.app',
	manifestURL: '/api/c15t/manifest',
});

export function Consent({ children }: { children: ReactNode }) {
	const state = resolveConsent({ config: consentConfig });

	return (
		<ConsentRoot state={state} backendURL={consentConfig.backendURL}>
			{children}
			<ConsentBanner />
			<ConsentDialog />
			<ConsentDialogLink>Privacy settings</ConsentDialogLink>
		</ConsentRoot>
	);
}

export default defineNuxtConfig({
	c15t: {
		backendURL: 'https://your-project.inth.app',
		manifest: 'server',
	},
	modules: ['c15t/vue'],
});

// Astro 7 with the Svelte dialog integration.
import svelte from '@astrojs/svelte';
import { defineConfig } from 'astro/config';
import c15t, { hosted } from 'c15t/astro';

export default defineConfig({
	integrations: [
		svelte(),
		c15t({
			mode: hosted({ url: 'https://your-project.inth.app' }),
			ui: 'svelte', // Use the framework your site already ships.
		}),
	],
	output: 'static', // Consent resolves in the browser.
});

<head>
	<script
		src="https://your-project.inth.app/c15t.js"
		defer
	></script>
</head>
<body>
	<footer>
		<a href="#c15t-preferences">Privacy settings</a>
	</footer>
</body>