← Alla inlägg
exempel10 mars 20262 min läsning

Nu finns Katlas exempelrepo

Sex färdiga exempelprojekt som visar hur du integrerar cookiesamtycke från Katla med Next.js, Vite och vanlig HTML, redo att köra direkt.

Katla-teamet

Vi har precis publicerat katla-app/examples, en samling med sex startprojekt som visar hur du integrerar cookiesamtycke från Katla i riktiga appar. Varje exempel är fristående, körs lokalt och täcker ett eget integrationsmönster.

Varför exempel

Dokumentationen förklarar API:t. Exemplen visar hur delarna hänger ihop. Oavsett om du lägger till en samtyckeswidget på en marknadsföringssajt eller bygger ett eget samtyckesgränssnitt i en React-app ger de här projekten dig en fungerande startpunkt som du kan anpassa.

Det här ingår

Widget

En Vite-sajt med flera sidor som laddar Katlas hostade widget via en script-tagg och bäddar in sidan med cookiepolicyn i en iframe. Inget SDK, inget ramverk, bara HTML och CDN:et.

Passar bäst för: statiska sajter, sidor som renderas av ett CMS eller var som helst där du vill ha samtycke utan byggsteg.

Visa exemplet · Widgetdokumentation

Next.js: dynamisk SSR

Ett Next.js 16-projekt med App Router som använder getCachedCookies från @katla.app/sdk/next/server för att hämta cookies på servern. Klienten får förladdad data utan någon extra nätverksförfrågan.

Passar bäst för: serverrenderade Next.js-appar som vill ha färsk cookiedata vid varje förfrågan.

Visa exemplet · Next.js-dokumentation

Next.js: statiskt vid byggtid

Ett Next.js 16-projekt med App Router som kör katla pull vid byggtid. Cookiedata och guard-skriptet paketeras som statiska filer, helt utan hämtningar vid körning.

Passar bäst för: statiskt exporterade Next.js-sajter, eller när du vill ha snabbast möjliga laddning.

Visa exemplet · Dokumentation om statiska cookies

Vite + React: dynamisk hämtning

En app med Vite 7 och React 19 som hämtar cookie- och policydata vid körning med SDK:ts hooks. Innehåller komponenterna CookieBanner och CookieCatalog.

Passar bäst för: SPA:er som alltid vill ha den senaste cookiedatan från CDN:et.

Visa exemplet · React-dokumentation

Vite + React: statiskt vid byggtid

En app med Vite 7 och React 19 som använder katla pull för att hämta cookiedata vid byggtid. JSON-filen importeras direkt, ingen hämtning vid körning behövs.

Passar bäst för: SPA:er med en byggpipeline som vill bli av med förfrågningar från klientsidan.

Visa exemplet · Dokumentation om statiska cookies

Vite + React: eget samtyckesgränssnitt

En app med Vite 7 och React 19 som använder hooken useConsentManager för att bygga ett helt eget samtyckesgränssnitt. Ingen färdig bannerkomponent, bara din egen markup och logik.

Passar bäst för: team som behöver full kontroll över samtyckesupplevelsen och vill matcha sitt designsystem.

Visa exemplet · Dokumentation för useConsentManager

Kom igång

Alla exempel sätts upp på samma sätt:

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

Byt ut platshållaren för webbplats-ID mot ditt eget (från katla.app) och starta sedan utvecklingsservern. Varje projekts README har detaljerna.

Utforska repot

Bläddra bland alla sex exempel på GitHub: katla-app/examples