Auto-Generated Cookie and Privacy Policies That Stay Up to Date

Writing a cookie policy is nobody's idea of a good time. You audit your cookies by hand, draft a wall of legal text, translate it, paste it into a page, and then pray nothing changes. Spoiler: it always changes. A developer adds a new analytics pixel, marketing drops in a retargeting tag, and your carefully crafted policy is out of date before the ink dries.

Katla takes a different approach: your policies are generated from your actual cookies — scanned, classified, and kept in sync automatically.

Three Formats, One Source of Truth

Every Katla site gets auto-generated policies in three formats:

The table format is particularly useful if you already have a privacy policy and just need an accurate, always-current list of cookies on your site.

Embed With a Single Snippet

The fastest way to get a policy on your page is the JavaScript embed. Add two lines of HTML:

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

That's it. The script fetches your latest policy and renders it into the container. When your cookies change, the policy updates automatically — no redeployment needed.

Choosing a format

Append a format query parameter to control what gets rendered:

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

Setting the language

Katla supports 13 locales out of the box — English, German, French, Spanish, Italian, Dutch, Portuguese, Swedish, Norwegian, Danish, Polish, and Finnish. Set the locale with a query parameter:

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

When no locale is specified, the script auto-detects the visitor's browser language and falls back to English.

Style It Your Way

The embed renders plain semantic HTML — headings, paragraphs, tables, and lists. No opinionated CSS is injected, so it inherits your site's existing styles by default.

For more control, configure window.KatlaPolicy before the script loads to map CSS classes or inline styles to every element type.

With Tailwind or 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://dist.katla.app/{siteId}/policy.js"></script>

With 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://dist.katla.app/{siteId}/policy.js"></script>

You can also combine both — classes and styles are applied together when both are set for the same element.

Use the SDK for Full Control

If you're building with React (or any JavaScript framework), the SDK gives you the policy as raw markdown that you can render however you want:

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

The @katla/sdk package includes a ready-made React component that renders the markdown with GitHub Flavored Markdown support (tables, strikethrough, etc.):

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

Because the component accepts standard react-markdown component overrides, you can swap in your own design system components:

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

Direct URLs for Any Workflow

Every policy is also available as a standalone file — useful for linking, downloading, or fetching from any backend:

All URLs accept the same locale and format query parameters. Use the markdown URL to pull the raw policy into a CMS, documentation site, or mobile app. Use the JSON endpoint to build entirely custom rendering logic.

Always Accurate, Always Current

The key advantage over hand-written policies is that your policy reflects reality. Katla scans your site with a headless browser, detecting cookies set by JavaScript — not just HTTP headers. When a cookie is added or removed, your generated policy updates to match.

No more stale policies. No more missing cookies. No more compliance gaps.

Get Started

1. Sign up at katla.app and add your site
2. Run a scan to discover and classify every cookie
3. Configure your company details — name, contact email, and optional DPO email
4. Embed the policy using a snippet, the SDK, or a direct URL
5. Forget about it — your policy stays in sync as your site evolves

Ready to stop maintaining cookie policies by hand? Get started for free.