Vorgestellt: das Beispiel-Repo von Katla

Wir haben gerade katla-app/examples veröffentlicht: eine Sammlung von sechs Starter-Projekten, die zeigen, wie Sie die Cookie-Einwilligung von Katla in echte Apps integrieren. Jedes Beispiel ist in sich abgeschlossen, läuft lokal und deckt ein anderes Integrationsmuster ab.

Warum Beispiele

Die Dokumentation erklärt die API. Beispiele zeigen, wie die Teile zusammenpassen. Ob Sie ein Consent-Widget auf einer Marketing-Website einbauen oder eine eigene Consent-UI in einer React-App entwickeln: Diese Projekte geben Ihnen einen funktionierenden Ausgangspunkt, den Sie anpassen können.

Was enthalten ist

Widget

Eine Vite-Multipage-Website, die das gehostete Katla-Widget per Script-Tag lädt und die Seite mit der Cookie-Richtlinie in einem iframe einbettet. Kein SDK, kein Framework: nur HTML und das CDN.

Ideal für: statische Websites, von einem CMS gerenderte Seiten oder überall dort, wo Sie Einwilligung ohne Build-Schritt wollen.

Beispiel ansehen · Widget-Doku

Next.js: dynamisches SSR

Ein Next.js-16-Projekt mit App Router, das getCachedCookies aus @katla.app/sdk/next/server nutzt, um Cookies auf dem Server abzurufen. Der Client erhält vorab geladene Daten ohne zusätzliche Netzwerkanfrage.

Ideal für: serverseitig gerenderte Next.js-Apps, die bei jeder Anfrage frische Cookie-Daten wollen.

Beispiel ansehen · Next.js-Doku

Next.js: statisch zur Build-Zeit

Ein Next.js-16-Projekt mit App Router, das katla pull zur Build-Zeit ausführt. Cookie-Daten und das Guard-Skript werden als statische Assets gebündelt: null Fetches zur Laufzeit.

Ideal für: statisch exportierte Next.js-Websites oder wenn Sie die schnellstmögliche Ladezeit wollen.

Beispiel ansehen · Doku zu statischen Cookies

Vite + React: dynamisches Abrufen

Eine App mit Vite 7 und React 19, die Cookie- und Richtliniendaten zur Laufzeit über die SDK-Hooks abruft. Enthält die Komponenten CookieBanner und CookieCatalog.

Ideal für: SPAs, die immer die neuesten Cookie-Daten vom CDN wollen.

Beispiel ansehen · React-Doku

Vite + React: statisch zur Build-Zeit

Eine App mit Vite 7 und React 19, die Cookie-Daten mit katla pull zur Build-Zeit abruft. Das JSON wird direkt importiert: kein Fetch zur Laufzeit nötig.

Ideal für: SPAs mit Build-Pipeline, die clientseitige Anfragen ganz vermeiden wollen.

Beispiel ansehen · Doku zu statischen Cookies

Vite + React: eigene Consent-UI

Eine App mit Vite 7 und React 19, die mit dem Hook useConsentManager eine vollständig eigene Consent-UI baut. Keine vorgefertigte Banner-Komponente: nur Ihr eigenes Markup und Ihre eigene Logik.

Ideal für: Teams, die volle Kontrolle über das Einwilligungserlebnis brauchen und es an ihr Designsystem anpassen wollen.

Beispiel ansehen · Doku zu useConsentManager

Erste Schritte

Jedes Beispiel folgt demselben Setup:

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

Ersetzen Sie die Platzhalter-Site-ID durch Ihre eigene (von katla.app) und starten Sie dann den Dev-Server. Die README des jeweiligen Projekts enthält die Details.

Das Repo erkunden

Alle sechs Beispiele auf GitHub: katla-app/examples