Maak kennis met de Katla-voorbeeldrepo

We hebben net katla-app/examples gepubliceerd: een verzameling van zes starterprojecten die laten zien hoe je cookietoestemming van Katla in echte apps integreert. Elk voorbeeld staat op zichzelf, draait lokaal en behandelt een ander integratiepatroon.

Waarom voorbeelden

Documentatie legt de API uit. Voorbeelden laten zien hoe de onderdelen in elkaar passen. Of je nu een consentwidget aan een marketingsite toevoegt of een eigen consent-UI in een React-app bouwt, deze projecten geven je een werkend vertrekpunt dat je kunt aanpassen.

Wat erin zit

Widget

Een Vite-site met meerdere pagina’s die de gehoste Katla-widget via een scripttag laadt en de pagina met het cookiebeleid in een iframe insluit. Geen SDK, geen framework: alleen HTML en het CDN.

Het best voor: statische sites, pagina’s uit een CMS, of overal waar je toestemming wilt zonder buildstap.

Bekijk het voorbeeld · Documentatie widget

Next.js: dynamische SSR

Een Next.js 16-project met de App Router dat getCachedCookies uit @katla.app/sdk/next/server gebruikt om cookies op de server op te halen. De client krijgt vooraf geladen data zonder extra netwerkverzoek.

Het best voor: Next.js-apps die op de server renderen en bij elk verzoek verse cookiegegevens willen.

Bekijk het voorbeeld · Documentatie Next.js

Next.js: statisch tijdens de build

Een Next.js 16-project met de App Router dat katla pull tijdens de build uitvoert. Cookiegegevens en het cookieblokker-script worden als statische assets meegebundeld: nul fetches tijdens runtime.

Het best voor: statisch geëxporteerde Next.js-sites, of als je de snelst mogelijke laadtijd wilt.

Bekijk het voorbeeld · Documentatie statische cookies

Vite + React: dynamisch ophalen

Een app met Vite 7 en React 19 die cookies en beleidsgegevens tijdens runtime ophaalt met de hooks van de SDK. Inclusief de componenten CookieBanner en CookieCatalog.

Het best voor: SPA’s die altijd de nieuwste cookiegegevens van het CDN willen.

Bekijk het voorbeeld · Documentatie React

Vite + React: statisch tijdens de build

Een app met Vite 7 en React 19 die katla pull gebruikt om cookiegegevens tijdens de build op te halen. De JSON wordt direct geïmporteerd: geen fetch tijdens runtime nodig.

Het best voor: SPA’s met een buildpipeline die verzoeken aan de clientkant willen schrappen.

Bekijk het voorbeeld · Documentatie statische cookies

Vite + React: eigen consent-UI

Een app met Vite 7 en React 19 die de hook useConsentManager gebruikt om een volledig eigen consent-UI te bouwen. Geen kant-en-klaar bannercomponent: alleen je eigen markup en logica.

Het best voor: teams die de toestemmingservaring volledig in de hand willen hebben en die op hun design system willen laten aansluiten.

Bekijk het voorbeeld · Documentatie useConsentManager

Aan de slag

Elk voorbeeld heeft dezelfde setup:

git clone https://github.com/katla-app/examples.git
cd examples/<project>
npm install

Vervang de placeholder voor de Site-ID door je eigen ID (van katla.app) en start daarna de devserver. De README van elk project bevat de specifieke details.

Verken de repo

Bekijk alle zes voorbeelden op GitHub: katla-app/examples