Automatiskt genererade cookie- och integritetspolicyer

Ingen tycker att det är roligt att skriva en cookiepolicy. Du går igenom dina cookies för hand, skriver ihop en vägg av juridisk text, översätter den, klistrar in den på en sida och hoppas sedan att inget ändras. Spoiler: något ändras alltid. En utvecklare lägger till en ny analyspixel, marknadsavdelningen slänger in en retargeting-tagg, och din omsorgsfullt formulerade policy är inaktuell innan bläcket hunnit torka.

Katla gör det på ett annat sätt: dina policyer genereras från dina faktiska cookies, skannade, klassificerade och automatiskt hållna i synk.

Tre format, en sanningskälla

Varje webbplats i Katla får automatiskt genererade policyer i tre format:

Formatet tabell är särskilt användbart om du redan har en integritetspolicy och bara behöver en korrekt och alltid aktuell lista över cookies på din webbplats.

Bädda in med en enda kodsnutt

Det snabbaste sättet att få en policy på din sida är JavaScript-inbäddningen. Lägg till två rader HTML:

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

Det är allt. Skriptet hämtar din senaste policy och renderar den i containern. När dina cookies ändras uppdateras policyn automatiskt, utan att något behöver driftsättas på nytt.

Välj format

Lägg till query-parametern format för att styra vad som renderas:

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

Ställ in språket

Katla stöder 13 locales direkt från start: engelska, tyska, franska, spanska, italienska, nederländska, portugisiska, svenska, norska, danska, polska och finska. Ange locale med en query-parameter:

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

Om ingen locale anges känner skriptet automatiskt av språket i besökarens webbläsare och faller tillbaka på engelska.

Styla den som du vill

Inbäddningen renderar enkel semantisk HTML: rubriker, stycken, tabeller och listor. Ingen egensinnig CSS injiceras, så den ärver som standard din webbplats befintliga stilar.

Vill du ha mer kontroll kan du konfigurera window.KatlaPolicy innan skriptet laddas och koppla CSS-klasser eller inline-stilar till varje elementtyp.

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

<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 också kombinera båda: classes och styles tillämpas tillsammans när båda är satta för samma element.

Använd SDK:t för full kontroll

Bygger du med React (eller något annat JavaScript-ramverk) ger SDK:t dig policyn som rå markdown som du kan rendera precis som du vill:

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

Paketet @katla/sdk innehåller en färdig React-komponent som renderar markdown med stöd för GitHub Flavored Markdown (tabeller, genomstrykning och så vidare):

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

Eftersom komponenten tar emot vanliga komponent-overrides från react-markdown kan du byta in komponenter från 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>,
  }}
/>

Direkta URL:er för alla arbetsflöden

Varje policy finns också som en fristående fil, användbar för att länka till, ladda ner eller hämta från vilken backend som helst:

Alla URL:er tar samma query-parametrar locale och format. Använd markdown-URL:en för att hämta in den råa policyn i ett CMS, en dokumentationssajt eller en mobilapp. Använd JSON-endpointen för att bygga helt egen renderingslogik.

Alltid korrekt, alltid aktuell

Den stora fördelen jämfört med handskrivna policyer är att din policy speglar verkligheten. Katla skannar din webbplats med en headless-webbläsare och upptäcker cookies som sätts av JavaScript, inte bara via HTTP-headers. När en cookie läggs till eller tas bort uppdateras din genererade policy så att den stämmer.

Inga fler inaktuella policyer. Inga fler saknade cookies. Inga fler luckor i efterlevnaden.

Kom igång

1. Registrera dig på katla.app och lägg till din webbplats
2. Kör en skanning för att hitta och klassificera varje cookie
3. Fyll i dina företagsuppgifter: namn, kontakt-e-post och eventuellt e-post till dataskyddsombudet
4. Bädda in policyn med en kodsnutt, SDK:t eller en direkt URL
5. Glöm bort den: din policy hålls i synk medan din webbplats utvecklas

Redo att sluta underhålla cookiepolicyer för hand? Kom igång gratis.