Przedstawiamy repozytorium przykładów Katli

Właśnie opublikowaliśmy katla-app/examples, zbiór sześciu projektów startowych, które pokazują, jak zintegrować Katlę z prawdziwymi aplikacjami i obsłużyć w nich zgodę na pliki cookie. Każdy przykład jest samodzielny, działa lokalnie i pokazuje inny wzorzec integracji.

Dlaczego przykłady

Dokumentacja wyjaśnia API. Przykłady pokazują, jak elementy do siebie pasują. Niezależnie od tego, czy dodajesz widget zgody do strony marketingowej, czy budujesz własny interfejs zgody w aplikacji React, te projekty dają Ci działający punkt wyjścia, który możesz dopasować do siebie.

Co zawiera repozytorium

Widget

Wielostronicowa strona na Vite, która ładuje hostowany widget Katli przez tag script i osadza stronę z polityką cookies w iframe. Bez SDK i bez frameworka: tylko HTML i CDN.

Najlepszy dla: stron statycznych, stron renderowanych przez CMS i wszędzie tam, gdzie chcesz obsługi zgody bez kroku budowania.

Zobacz przykład · Dokumentacja widgetu

Next.js: dynamiczny SSR

Projekt Next.js 16 z App Routerem, który używa getCachedCookies z @katla.app/sdk/next/server do pobierania plików cookie na serwerze. Klient dostaje wstępnie załadowane dane bez dodatkowego żądania sieciowego.

Najlepszy dla: aplikacji Next.js renderowanych na serwerze, które przy każdym żądaniu potrzebują świeżych danych o plikach cookie.

Zobacz przykład · Dokumentacja Next.js

Next.js: statycznie, w czasie buildu

Projekt Next.js 16 z App Routerem, który uruchamia katla pull w czasie buildu. Dane o plikach cookie i skrypt blokady są dołączane jako zasoby statyczne: zero pobrań w runtime.

Najlepszy dla: statycznie eksportowanych stron Next.js albo sytuacji, gdy zależy Ci na możliwie najszybszym ładowaniu.

Zobacz przykład · Dokumentacja danych statycznych

Vite + React: pobieranie dynamiczne

Aplikacja Vite 7 + React 19, która pobiera dane o plikach cookie i politykach w runtime za pomocą hooków SDK. Zawiera komponenty CookieBanner i CookieCatalog.

Najlepszy dla: aplikacji SPA, które zawsze chcą mieć najnowsze dane o plikach cookie z CDN.

Zobacz przykład · Dokumentacja Reacta

Vite + React: statycznie, w czasie buildu

Aplikacja Vite 7 + React 19, która używa katla pull do pobrania danych o plikach cookie w czasie buildu. JSON jest importowany bezpośrednio: pobieranie w runtime nie jest potrzebne.

Najlepszy dla: aplikacji SPA z pipeline’em buildu, które chcą wyeliminować żądania po stronie klienta.

Zobacz przykład · Dokumentacja danych statycznych

Vite + React: własny interfejs zgody

Aplikacja Vite 7 + React 19, która używa hooka useConsentManager do zbudowania w pełni własnego interfejsu zgody. Bez gotowego komponentu banera: tylko Twój własny markup i Twoja logika.

Najlepszy dla: zespołów, które potrzebują pełnej kontroli nad obsługą zgody i chcą ją dopasować do swojego design systemu.

Zobacz przykład · Dokumentacja useConsentManager

Pierwsze kroki

Każdy przykład konfiguruje się tak samo:

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

Zastąp przykładowy identyfikator strony (site ID) własnym (z katla.app), a potem uruchom serwer deweloperski. Szczegóły znajdziesz w pliku README każdego projektu.

Przejrzyj repozytorium

Wszystkie sześć przykładów znajdziesz na GitHubie: katla-app/examples