Políticas de cookies e de privacidade automáticas

Escrever uma política de cookies não é a ideia de diversão de ninguém. Faz o levantamento dos cookies à mão, redige uma parede de texto jurídico, traduz, cola numa página e depois reza para que nada mude. Spoiler: muda sempre. Um programador adiciona um novo píxel de analítica, o marketing mete uma tag de retargeting, e a sua política cuidadosamente escrita fica desatualizada antes de a tinta secar.

O Katla segue outro caminho: as suas políticas são geradas a partir dos cookies que o seu site realmente usa, analisados, classificados e mantidos sincronizados automaticamente.

Três formatos, uma única fonte de verdade

Cada site no Katla recebe políticas geradas automaticamente em três formatos:

O formato tabela é especialmente útil se já tem uma política de privacidade e só precisa de uma lista exata e sempre atual dos cookies do seu site.

Incorpore com um único snippet

A forma mais rápida de pôr uma política na sua página é a incorporação em JavaScript. Adicione duas linhas de HTML:

<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Mais nada. O script vai buscar a sua política mais recente e renderiza-a no contentor. Quando os seus cookies mudam, a política atualiza-se automaticamente, sem novo deploy.

Escolher um formato

Acrescente um parâmetro format ao URL para controlar o que é renderizado:

<!-- Full privacy + cookie policy (default) -->
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>
 
<!-- Cookie policy only -->
<script src="https://cdn.katla.app/{siteId}/policy.js?format=cookie"></script>
 
<!-- Cookie table only -->
<script src="https://cdn.katla.app/{siteId}/policy.js?format=table"></script>

Definir o idioma

O Katla suporta 13 locales de origem: inglês, alemão, francês, espanhol, italiano, neerlandês, português, sueco, norueguês, dinamarquês, polaco e finlandês. Defina o locale com um parâmetro no URL:

<script src="https://cdn.katla.app/{siteId}/policy.js?locale=de-DE"></script>

Quando não é indicado nenhum locale, o script deteta o idioma do navegador do visitante e, se não o suportar, usa o inglês.

Com o estilo que quiser

A incorporação renderiza HTML semântico simples: títulos, parágrafos, tabelas e listas. Não é injetado CSS com opiniões próprias, por isso herda por predefinição os estilos que o seu site já tem.

Para ter mais controlo, configure window.KatlaPolicy antes de o script carregar e associe classes CSS ou estilos inline a cada tipo de elemento.

Com Tailwind ou classes utilitárias

<script>
  window.KatlaPolicy = {
    classes: {
      wrapper: "prose prose-slate max-w-none",
      h1: "text-4xl font-bold mb-6",
      h2: "text-2xl font-semibold mt-8 mb-4",
      p: "text-gray-600 leading-relaxed mb-4",
      table: "w-full border-collapse",
      thead: "bg-gray-100",
      th: "text-left p-2 font-medium",
      td: "p-2 border-b",
      a: "text-blue-600 underline hover:text-blue-800",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Com estilos inline

<script>
  window.KatlaPolicy = {
    styles: {
      h1: "font-size: 2rem; color: #111;",
      h2: "font-size: 1.5rem; margin-top: 2rem;",
      p: "color: #444; line-height: 1.6;",
      table: "width: 100%; border-collapse: collapse;",
      th: "text-align: left; padding: 8px; background: #f5f5f5;",
      td: "padding: 8px; border-bottom: 1px solid #eee;",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Também pode combinar as duas coisas: classes e styles são aplicados em conjunto quando ambos estão definidos para o mesmo elemento.

Use o SDK para ter controlo total

Se trabalha com React (ou qualquer framework JavaScript), o SDK entrega-lhe a política em markdown puro, que pode renderizar como quiser:

import { createKatlaClient } from "@katla/sdk";
 
const client = createKatlaClient({ siteId: "your-site-id" });
 
// Get the cookie table as markdown
const { markdown } = await client.getPolicy({
  locale: "en-GB",
  format: "table",
});

Componente React

O pacote @katla/sdk inclui um componente React pronto a usar que renderiza o markdown com suporte para GitHub Flavored Markdown (tabelas, texto riscado, etc.):

import { KatlaPolicy } from "@katla/sdk/react";
 
export function CookiePolicyPage({ markdown }: { markdown: string }) {
  return (
    <KatlaPolicy
      markdown={markdown}
      className="prose max-w-3xl mx-auto"
    />
  );
}

Como o componente aceita as substituições de componentes habituais do react-markdown, pode trocá-los pelos componentes do seu próprio design system:

<KatlaPolicy
  markdown={markdown}
  components={{
    h1: ({ children }) => <Heading size="xl">{children}</Heading>,
    table: ({ children }) => <Table variant="striped">{children}</Table>,
    a: ({ href, children }) => <Link href={href}>{children}</Link>,
  }}
/>

URLs diretos para qualquer fluxo de trabalho

Cada política está também disponível como ficheiro independente, útil para criar links, transferir ou ir buscar a partir de qualquer backend:

Todos os URLs aceitam os mesmos parâmetros locale e format. Use o URL de markdown para trazer a política em bruto para um CMS, um site de documentação ou uma app móvel. Use o endpoint JSON para construir uma lógica de renderização totalmente sua.

Sempre exata, sempre atual

A grande vantagem em relação às políticas escritas à mão é que a sua política reflete a realidade. O Katla analisa o seu site com um navegador headless e deteta os cookies definidos por JavaScript, e não apenas os que vêm nos cabeçalhos HTTP. Quando um cookie é adicionado ou removido, a política gerada atualiza-se em conformidade.

Acabaram-se as políticas desatualizadas. Acabaram-se os cookies em falta. Acabaram-se as falhas de conformidade.

Começar

1. Registe-se em katla.app e adicione o seu site
2. Faça uma análise para descobrir e classificar todos os cookies
3. Configure os dados da sua empresa: nome, email de contacto e, opcionalmente, o email do encarregado da proteção de dados
4. Incorpore a política com um snippet, com o SDK ou com um URL direto
5. Esqueça o assunto: a sua política mantém-se sincronizada à medida que o site evolui

Pronto para deixar de manter políticas de cookies à mão? Comece gratuitamente.