Autogenererte cookie- og personvernerklæringer

Ingen synes det er gøy å skrive en cookie-erklæring. Du går gjennom informasjonskapslene (cookies) for hånd, skriver en vegg av juridisk tekst, oversetter den, limer den inn på en side og håper at ingenting endrer seg. Spoiler: noe endrer seg alltid. En utvikler legger til en ny analysepiksel, markedsføring slenger inn en retargeting-tagg, og den nøye formulerte erklæringen din er utdatert før blekket har tørket.

Katla gjør det annerledes: erklæringene dine genereres fra de faktiske cookiene dine, skannet, klassifisert og holdt i synk automatisk.

Tre formater, én kilde til sannhet

Hvert nettsted i Katla får automatisk genererte erklæringer i tre formater:

Formatet table er særlig nyttig hvis du allerede har en personvernerklæring og bare trenger en nøyaktig liste over cookiene på nettstedet ditt som alltid er oppdatert.

Bygg inn med én kodesnutt

Den raskeste måten å få en erklæring på siden på er JavaScript-innbyggingen. Legg til to linjer HTML:

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

Det er alt. Skriptet henter den nyeste erklæringen din og rendrer den i containeren. Når cookiene dine endres, oppdateres erklæringen automatisk, uten ny utrulling.

Velg format

Legg til en format-parameter i URL-en for å styre hva som rendres:

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

Velg språk

Katla støtter 13 språkvarianter rett ut av boksen: engelsk, tysk, fransk, spansk, italiensk, nederlandsk, portugisisk, svensk, norsk, dansk, polsk og finsk. Angi språket med en parameter i URL-en:

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

Når du ikke angir noe språk, oppdager skriptet selv språket i den besøkendes nettleser og faller tilbake til engelsk.

Style det på din måte

Innbyggingen rendrer ren, semantisk HTML: overskrifter, avsnitt, tabeller og lister. Det injiseres ingen CSS med egne meninger, så den arver stilene nettstedet ditt allerede har.

Vil du ha mer kontroll, konfigurerer du window.KatlaPolicy før skriptet lastes, og kobler CSS-klasser eller inline-stiler til hver elementtype.

Med Tailwind eller utility-klasser

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

Med inline-stiler

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

Du kan også kombinere begge: classes og styles brukes sammen når begge er satt for det samme elementet.

Bruk SDK-et for full kontroll

Bygger du med React (eller et hvilket som helst JavaScript-rammeverk), gir SDK-et deg erklæringen som rå markdown som du kan rendre akkurat slik du vil:

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

Pakken @katla/sdk har en ferdig React-komponent som rendrer markdownen med støtte for GitHub Flavored Markdown (tabeller, gjennomstreking og så videre):

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

Fordi komponenten tar imot vanlige komponentoverstyringer fra react-markdown, kan du bytte inn komponentene fra ditt eget designsystem:

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

Direkte URL-er for enhver arbeidsflyt

Hver erklæring er også tilgjengelig som en frittstående fil, nyttig for lenking, nedlasting eller henting fra en hvilken som helst backend:

Alle URL-ene tar de samme parameterne locale og format. Bruk markdown-URL-en til å hente den rå erklæringen inn i et CMS, et dokumentasjonsnettsted eller en mobilapp. Bruk JSON-endepunktet til å bygge helt egen logikk for rendringen.

Alltid nøyaktig, alltid oppdatert

Den store fordelen framfor håndskrevne erklæringer er at erklæringen din gjenspeiler virkeligheten. Katla skanner nettstedet ditt med en headless nettleser og oppdager cookies som settes av JavaScript, ikke bare av HTTP-hoder. Når en cookie legges til eller fjernes, oppdateres den genererte erklæringen din tilsvarende.

Ikke flere utdaterte erklæringer. Ikke flere manglende cookies. Ikke flere hull i etterlevelsen.

Kom i gang

1. Registrer deg på katla.app og legg til nettstedet ditt
2. Kjør en skanning for å finne og klassifisere hver cookie
3. Fyll inn firmaopplysningene: navn, e-postadresse for kontakt og eventuelt e-postadressen til personvernombudet
4. Bygg inn erklæringen med en kodesnutt, SDK-et eller en direkte URL
5. Glem det: erklæringen holder seg i synk mens nettstedet ditt utvikler seg

Klar til å slutte å vedlikeholde cookie-erklæringer for hånd? Kom i gang gratis.