Apresentamos o repositório de exemplos do Katla
Seis projetos de exemplo prontos a correr que mostram como integrar o consentimento de cookies do Katla com Next.js, Vite e HTML simples.
Acabámos de publicar o katla-app/examples, uma coleção de seis projetos iniciais que mostram como integrar o consentimento de cookies do Katla em apps reais. Cada exemplo é independente, corre localmente e cobre um padrão de integração diferente.
Porquê exemplos
A documentação explica a API. Os exemplos mostram como as peças encaixam. Quer esteja a adicionar um widget de consentimento a um site de marketing, quer a construir uma interface de consentimento personalizada numa app React, estes projetos dão-lhe um ponto de partida funcional que pode adaptar.
O que está incluído
Widget
Um site Vite com várias páginas que carrega o widget alojado do Katla através de uma tag script e incorpora a página da política de cookies num iframe. Sem SDK, sem framework: apenas HTML e a CDN.
Ideal para: sites estáticos, páginas renderizadas por um CMS, ou qualquer sítio onde queira consentimento sem um passo de build.
Ver exemplo · Documentação do widget
Next.js: SSR dinâmico
Um projeto Next.js 16 com App Router que usa getCachedCookies de @katla.app/sdk/next/server para obter os cookies no servidor. O cliente recebe os dados já carregados, sem nenhum pedido de rede adicional.
Ideal para: apps Next.js renderizadas no servidor que querem dados de cookies atualizados a cada pedido.
Ver exemplo · Documentação de Next.js
Next.js: estático, no momento do build
Um projeto Next.js 16 com App Router que corre katla pull durante o build. Os dados dos cookies e o script do bloqueador são incluídos como recursos estáticos: zero pedidos em runtime.
Ideal para: sites Next.js exportados estaticamente, ou quando quer o carregamento mais rápido possível.
Ver exemplo · Documentação dos cookies estáticos
Vite + React: obtenção dinâmica
Uma app Vite 7 + React 19 que obtém os dados dos cookies e da política em runtime, com os hooks do SDK. Inclui os componentes CookieBanner e CookieCatalog.
Ideal para: SPAs que querem sempre os dados de cookies mais recentes da CDN.
Ver exemplo · Documentação de React
Vite + React: estático, no momento do build
Uma app Vite 7 + React 19 que usa katla pull para obter os dados dos cookies durante o build. O JSON é importado diretamente: não é preciso nenhum pedido em runtime.
Ideal para: SPAs com um pipeline de build que querem eliminar os pedidos do lado do cliente.
Ver exemplo · Documentação dos cookies estáticos
Vite + React: interface de consentimento personalizada
Uma app Vite 7 + React 19 que usa o hook useConsentManager para construir uma interface de consentimento totalmente personalizada. Sem componente de banner pré-construído: apenas o seu próprio markup e a sua lógica.
Ideal para: equipas que precisam de controlo total sobre a experiência de consentimento e a querem alinhar com o seu design system.
Ver exemplo · Documentação do useConsentManager
Começar
Todos os exemplos seguem a mesma configuração:
git clone https://github.com/katla-app/examples.git
cd examples/<project>
npm installSubstitua o Site ID de exemplo pelo seu (que encontra em katla.app) e arranque o servidor de desenvolvimento. O README de cada projeto tem os pormenores específicos.
Explore o repositório
Veja os seis exemplos no GitHub: katla-app/examples