Cookie-Richtlinie & Datenschutzerklärung generieren

Eine Cookie-Richtlinie zu schreiben, ist für niemanden ein Vergnügen. Sie prüfen Ihre Cookies von Hand, entwerfen eine Wand aus juristischem Text, übersetzen sie, kopieren sie auf eine Seite und hoffen dann, dass sich nichts ändert. Spoiler: Es ändert sich immer etwas. Ein Entwickler fügt ein neues Analytics-Pixel hinzu, das Marketing baut ein Retargeting-Tag ein, und Ihre sorgfältig formulierte Richtlinie ist veraltet, bevor die Tinte trocken ist.

Katla geht anders vor: Ihre Richtlinien werden aus Ihren tatsächlichen Cookies erstellt, gescannt, klassifiziert und automatisch aktuell gehalten.

Drei Formate, eine Quelle der Wahrheit

Jede Katla-Website erhält automatisch erstellte Richtlinien in drei Formaten:

Das Format Tabelle ist besonders nützlich, wenn Sie bereits eine Datenschutzerklärung haben und nur eine genaue, stets aktuelle Liste der Cookies auf Ihrer Website brauchen.

Einbetten mit einem einzigen Snippet

Der schnellste Weg zu einer Richtlinie auf Ihrer Seite ist die JavaScript-Einbettung. Fügen Sie zwei Zeilen HTML hinzu:

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

Das war's. Das Skript ruft Ihre aktuelle Richtlinie ab und rendert sie in den Container. Wenn sich Ihre Cookies ändern, aktualisiert sich die Richtlinie automatisch, ganz ohne neues Deployment.

Format wählen

Hängen Sie einen Query-Parameter format an, um festzulegen, was gerendert wird:

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

Sprache festlegen

Katla unterstützt von Haus aus 13 Locales: Englisch, Deutsch, Französisch, Spanisch, Italienisch, Niederländisch, Portugiesisch, Schwedisch, Norwegisch, Dänisch, Polnisch und Finnisch. Legen Sie die Locale mit einem Query-Parameter fest:

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

Ist keine Locale angegeben, erkennt das Skript die Browsersprache des Besuchers automatisch und fällt auf Englisch zurück.

Gestalten Sie es nach Ihren Vorstellungen

Die Einbettung rendert schlichtes semantisches HTML: Überschriften, Absätze, Tabellen und Listen. Es wird kein eigenwilliges CSS eingefügt, daher übernimmt sie standardmäßig die bestehenden Styles Ihrer Website.

Für mehr Kontrolle konfigurieren Sie window.KatlaPolicy, bevor das Skript lädt, und ordnen jedem Elementtyp CSS-Klassen oder Inline-Styles zu.

Mit Tailwind oder Utility-Klassen

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

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

Sie können auch beides kombinieren: classes und styles werden zusammen angewendet, wenn beide für dasselbe Element gesetzt sind.

Volle Kontrolle mit dem SDK

Wenn Sie mit React (oder einem beliebigen JavaScript-Framework) arbeiten, liefert Ihnen das SDK die Richtlinie als rohes Markdown, das Sie rendern können, wie Sie wollen:

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

Das Paket @katla/sdk enthält eine fertige React-Komponente, die das Markdown mit Unterstützung für GitHub Flavored Markdown rendert (Tabellen, Durchstreichungen usw.):

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

Weil die Komponente die üblichen Komponenten-Overrides von react-markdown akzeptiert, können Sie Komponenten aus Ihrem eigenen Designsystem einsetzen:

<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 URLs für jeden Workflow

Jede Richtlinie ist auch als eigenständige Datei verfügbar, praktisch zum Verlinken, Herunterladen oder Abrufen aus jedem Backend:

Alle URLs akzeptieren dieselben Query-Parameter locale und format. Nutzen Sie die Markdown-URL, um die rohe Richtlinie in ein CMS, eine Dokumentationsseite oder eine mobile App zu übernehmen. Nutzen Sie den JSON-Endpunkt, um eine komplett eigene Darstellungslogik zu bauen.

Immer korrekt, immer aktuell

Der entscheidende Vorteil gegenüber handgeschriebenen Richtlinien: Ihre Richtlinie bildet die Realität ab. Katla scannt Ihre Website mit einem Headless-Browser und erkennt Cookies, die per JavaScript gesetzt werden, nicht nur solche aus HTTP-Headern. Wird ein Cookie hinzugefügt oder entfernt, zieht Ihre generierte Richtlinie nach.

Keine veralteten Richtlinien mehr. Keine fehlenden Cookies mehr. Keine Compliance-Lücken mehr.

Loslegen

1. Registrieren Sie sich auf katla.app und fügen Sie Ihre Website hinzu
2. Starten Sie einen Scan, um jedes Cookie zu finden und zu klassifizieren
3. Hinterlegen Sie Ihre Unternehmensdaten: Name, Kontakt-E-Mail und optional die E-Mail-Adresse Ihres Datenschutzbeauftragten
4. Betten Sie die Richtlinie ein, per Snippet, SDK oder direkter URL
5. Vergessen Sie das Thema: Ihre Richtlinie bleibt aktuell, während sich Ihre Website weiterentwickelt

Bereit, Cookie-Richtlinien nicht mehr von Hand zu pflegen? Starten Sie kostenlos.