Automatisch gegenereerd cookie- en privacybeleid

Een cookiebeleid schrijven is voor niemand een feestje. Je brengt je cookies met de hand in kaart, schrijft een muur van juridische tekst, vertaalt die, plakt hem op een pagina en hoopt dan maar dat er niets verandert. Spoiler: er verandert altijd iets. Een developer voegt een nieuwe analyticspixel toe, marketing zet er een retargetingtag bij, en je zorgvuldig opgestelde beleid is verouderd voordat de inkt droog is.

Katla pakt het anders aan: je beleid wordt gegenereerd uit je echte cookies, gescand, geclassificeerd en automatisch actueel gehouden.

Drie formaten, één bron van waarheid

Elke Katla-site krijgt automatisch gegenereerd beleid in drie formaten:

Het formaat tabel is vooral handig als je al een privacybeleid hebt en alleen een nauwkeurige, altijd actuele lijst nodig hebt van de cookies op je site.

Insluiten met één snippet

De snelste manier om beleid op je pagina te krijgen is de JavaScript-embed. Voeg twee regels HTML toe:

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

Dat is alles. Het script haalt je nieuwste beleid op en rendert het in de container. Veranderen je cookies, dan werkt het beleid zichzelf automatisch bij, zonder nieuwe deploy.

Een formaat kiezen

Voeg een queryparameter format toe om te bepalen wat er wordt gerenderd:

<!-- 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>

De taal instellen

Katla ondersteunt standaard 13 locales: Engels, Duits, Frans, Spaans, Italiaans, Nederlands, Portugees, Zweeds, Noors, Deens, Pools en Fins. Stel de locale in met een queryparameter:

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

Geef je geen locale op, dan detecteert het script automatisch de browsertaal van de bezoeker en valt het terug op Engels.

Style het zoals jij wilt

De embed rendert gewone semantische HTML: koppen, alinea’s, tabellen en lijsten. Er wordt geen eigenzinnige CSS geïnjecteerd, dus standaard neemt het de bestaande stijlen van je site over.

Wil je meer controle, stel dan window.KatlaPolicy in voordat het script laadt, en koppel CSS-classes of inline styles aan elk type element.

Met Tailwind of utility classes

<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>

Met inline styles

<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>

Je kunt ook allebei combineren: classes en styles worden samen toegepast als ze voor hetzelfde element zijn ingesteld.

Gebruik de SDK voor volledige controle

Bouw je met React (of een ander JavaScript-framework), dan geeft de SDK je het beleid als ruwe markdown die je kunt renderen zoals je wilt:

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",
});

React-component

Het pakket @katla/sdk bevat een kant-en-klaar React-component dat de markdown rendert met ondersteuning voor GitHub Flavored Markdown (tabellen, doorhalen, enzovoort):

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

Omdat het component de gewone component-overrides van react-markdown accepteert, kun je er de componenten van je eigen design system in zetten:

<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>,
  }}
/>

Directe URL’s voor elke workflow

Elk beleid is ook beschikbaar als los bestand, handig om naar te linken, te downloaden of op te halen vanuit een willekeurige backend:

Alle URL’s accepteren dezelfde queryparameters locale en format. Gebruik de markdown-URL om het ruwe beleid in een CMS, documentatiesite of mobiele app te halen. Gebruik het JSON-endpoint om volledig eigen renderlogica te bouwen.

Altijd juist, altijd actueel

Het grote voordeel ten opzichte van handgeschreven beleid is dat je beleid de werkelijkheid weergeeft. Katla scant je site met een headless browser en ontdekt cookies die door JavaScript worden gezet, niet alleen via HTTP-headers. Komt er een cookie bij of verdwijnt er een, dan past je gegenereerde beleid zich daarop aan.

Geen verouderd beleid meer. Geen ontbrekende cookies meer. Geen gaten meer in je compliance.

Aan de slag

1. Meld je aan op katla.app en voeg je site toe
2. Start een scan om elke cookie te vinden en te classificeren
3. Vul je bedrijfsgegevens in: naam, contact-e-mailadres en eventueel het e-mailadres van je functionaris voor gegevensbescherming
4. Sluit het beleid in met een snippet, de SDK of een directe URL
5. Vergeet het: je beleid blijft in de pas terwijl je site verandert

Klaar met cookiebeleid met de hand bijhouden? Begin gratis.