Esittelyssä Katlan esimerkkirepo

Julkaisimme juuri katla-app/examples-repon: kokoelman kuudesta aloitusprojektista, jotka näyttävät, miten Katlan evästesuostumus integroidaan oikeisiin sovelluksiin. Jokainen esimerkki on itsenäinen, toimii paikallisesti ja kattaa eri integraatiotavan.

Miksi esimerkkejä

Dokumentaatio selittää API:n. Esimerkit näyttävät, miten palaset sopivat yhteen. Lisäätpä suostumuswidgetin markkinointisivustolle tai rakennat omaa suostumuskäyttöliittymää React-sovellukseen, nämä projektit antavat toimivan lähtökohdan, jota voit muokata.

Mitä mukana on

Widget

Viten monisivuinen sivusto, joka lataa Katlan isännöidyn widgetin script-tagilla ja upottaa evästekäytäntösivun iframeen. Ei SDK:ta, ei kehystä: pelkkää HTML:ää ja CDN.

Sopii parhaiten: staattisille sivustoille, sisällönhallintajärjestelmän renderöimille sivuille tai mihin tahansa, missä haluat suostumuksen ilman build-vaihetta.

Katso esimerkki · Widget-dokumentaatio

Next.js: dynaaminen SSR

Next.js 16 App Router -projekti, joka hakee evästeet palvelimella getCachedCookies-funktiolla paketista @katla.app/sdk/next/server. Selain saa valmiiksi ladatut tiedot ilman ylimääräistä verkkopyyntöä.

Sopii parhaiten: palvelimella renderöityihin Next.js-sovelluksiin, jotka haluavat tuoreet evästetiedot jokaisella pyynnöllä.

Katso esimerkki · Next.js-dokumentaatio

Next.js: staattinen, buildin aikana

Next.js 16 App Router -projekti, joka ajaa katla pull -komennon buildin aikana. Evästetiedot ja evästevahdin skripti paketoidaan staattisiksi tiedostoiksi, eikä ajonaikaisia hakuja ole lainkaan.

Sopii parhaiten: staattisesti vietyihin Next.js-sivustoihin tai silloin, kun haluat nopeimman mahdollisen latauksen.

Katso esimerkki · Staattisten evästeiden dokumentaatio

Vite + React: dynaaminen haku

Vite 7 + React 19 -sovellus, joka hakee evästeet ja käytäntötiedot ajon aikana SDK:n hookeilla. Mukana CookieBanner- ja CookieCatalog-komponentit.

Sopii parhaiten: SPA-sovelluksiin, jotka haluavat aina uusimmat evästetiedot CDN:stä.

Katso esimerkki · React-dokumentaatio

Vite + React: staattinen, buildin aikana

Vite 7 + React 19 -sovellus, joka hakee evästetiedot buildin aikana katla pull -komennolla. JSON tuodaan suoraan, joten ajonaikaista hakua ei tarvita.

Sopii parhaiten: SPA-sovelluksiin, joilla on build-putki ja jotka haluavat eroon selainpuolen pyynnöistä.

Katso esimerkki · Staattisten evästeiden dokumentaatio

Vite + React: oma suostumuskäyttöliittymä

Vite 7 + React 19 -sovellus, joka rakentaa täysin oman suostumuskäyttöliittymän useConsentManager-hookilla. Ei valmista bannerikomponenttia: vain oma merkintäsi ja logiikkasi.

Sopii parhaiten: tiimeille, jotka tarvitsevat täyden hallinnan suostumuskokemukseen ja haluavat sen vastaavan designjärjestelmäänsä.

Katso esimerkki · useConsentManager-dokumentaatio

Näin pääset alkuun

Jokainen esimerkki otetaan käyttöön samalla tavalla:

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

Korvaa paikkamerkkinä oleva Site ID omallasi (osoitteesta katla.app) ja käynnistä kehityspalvelin. Jokaisen projektin README kertoo tarkemmat yksityiskohdat.

Tutustu repoon

Selaa kaikkia kuutta esimerkkiä GitHubissa: katla-app/examples