Build your cookie banner on the tarteaucitron service catalog

import { gtag, youtube, matomocloud } from '@zeste/services';

export const services = () => [
  gtag({ gtagUa: 'G-XXXXXXX' }),
  youtube(),
  matomocloud({ matomoId: 1, matomoHost: 'https://example.matomo.cloud/' }),
];

window.zesteConfig = {
  services: {
    gtag: { gtagUa: 'G-XXXXXXX' },
    youtube: {},
    matomocloud: { matomoId: 1, matomoHost: 'https://example.matomo.cloud/' },
  },
  privacyUrl: '/privacy',
};

import { parseConsentCookie } from '@zeste/svelte';

export const load = ({ cookies }) => ({
  consent: parseConsentCookie(cookies.get('tarteaucitron')),
});

import { cookies } from 'next/headers';
import { parseConsentCookie } from '@zeste/react';

export default async function RootLayout({ children }) {
  const consent = parseConsentCookie((await cookies()).get('tarteaucitron')?.value);
  return <html lang="en"><body><Consent initial={consent}>{children}</Consent></body></html>;
}

// useCookie also reads the cookie during server rendering
const cookie = useCookie('tarteaucitron', { decode: (v) => v });
const consent = parseConsentCookie(cookie.value);

<script lang="ts">
  import { createZeste, ZesteProvider } from '@zeste/svelte';
  import { messages } from '@zeste/services/i18n/en';
  import { CookieBanner, CookiePreferences } from '$lib/components/zeste';
  import { services } from '$lib/consent';

  let { data, children } = $props();
  const zeste = createZeste({ services: services(), initial: data.consent, messages });
</script>

<ZesteProvider {zeste}>
  {@render children()}
  <CookieBanner />
  <CookiePreferences />
  <!-- a permanent link to change the choice -->
  <button {@attach zeste.actions.openPreferences}>Cookie settings</button>
</ZesteProvider>

'use client';
import { useState } from 'react';
import { createZeste, ZesteProvider } from '@zeste/react';
import { messages } from '@zeste/services/i18n/en';
import { CookieBanner, CookiePreferences } from '@/components/zeste';
import { services } from './consent';

export function Consent({ initial, children }) {
  const [zeste] = useState(() => createZeste({ services: services(), initial, messages }));
  return (
    <ZesteProvider zeste={zeste}>
      {children}
      <CookieBanner />
      <CookiePreferences />
      {/* a permanent link to change the choice */}
      <button {...zeste.actions.openPreferences}>Cookie settings</button>
    </ZesteProvider>
  );
}

<script setup lang="ts">
import { createZeste, parseConsentCookie, ZesteProvider } from '@zeste/vue';
import { messages } from '@zeste/services/i18n/en';
import { CookieBanner, CookiePreferences } from '~/components/zeste';
import { services } from './consent';

const cookie = useCookie('tarteaucitron', { decode: (v) => v });
const zeste = createZeste({ services: services(), initial: parseConsentCookie(cookie.value), messages });
</script>

<template>
  <ZesteProvider :zeste="zeste">
    <NuxtPage />
    <CookieBanner />
    <CookiePreferences />
    <!-- a permanent link to change the choice -->
    <button v-bind="zeste.actions.openPreferences">Cookie settings</button>
  </ZesteProvider>
</template>

<script src="/zeste.config.js"></script>
<script src="/zeste/zeste.js"></script>

<!-- anywhere on the page, a link to change the choice -->
<a href="#zeste">Cookie settings</a>