Skip to main content
The Katla policy embed renders a fully localized cookie or privacy policy directly on your website using a lightweight JavaScript snippet.

​
Basic embed

Add the following HTML to any page where you want the policy displayed: 
<div id="katla-policy"></div>
<script src="https://dist.katla.app/{siteId}/policy.js"></script>
Replace {siteId} with your site ID. The script fetches the policy content and renders it inside the #katla-policy element.

​
Formats

Control which policy content is rendered with the format query parameter:
ParameterDescription
fullFull cookie + privacy policy (default)
cookieCookie policy only
tableCookie table only
<script src="https://dist.katla.app/{siteId}/policy.js?format=cookie"></script>

​
Locale

Set the language with the locale 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.

​
Custom styling

You can apply CSS classes and inline styles to every generated HTML element by setting window.KatlaPolicy before the script loads.

​
Supported element keys

KeyElement
wrapperOuter <div> wrapping all content
h1<h1> headings
h2<h2> headings
h3<h3> headings
p<p> paragraphs
table<table> elements
thead<thead> elements
tbody<tbody> elements
tr<tr> rows
th<th> header cells
td<td> data cells
ul<ul> lists
li<li> list items
a<a> links
strong<strong> bold text
em<em> italic text
All keys are optional. Omitted keys produce elements with no class or style attributes.

​
Using CSS classes

Ideal for Tailwind or other utility-first frameworks: 
<script>
  window.KatlaPolicy = {
    classes: {
      wrapper: "container mx-auto px-4",
      h1: "text-4xl font-bold mb-6",
      h2: "text-2xl font-semibold mt-8 mb-4",
      h3: "text-lg font-medium mt-6 mb-2",
      p: "text-gray-600 leading-relaxed mb-4",
      table: "w-full border-collapse",
      thead: "bg-gray-100",
      th: "text-left p-2 font-medium",
      tr: "border-b",
      td: "p-2",
      ul: "list-disc pl-6 mb-4",
      li: "mb-2 text-gray-600",
      a: "text-blue-600 underline hover:text-blue-800",
      strong: "font-semibold",
      em: "italic",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://dist.katla.app/{siteId}/policy.js"></script>

​
Using inline styles

For sites without a CSS framework: 
<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>

​
Combining classes and styles

Both classes and styles can be used together. When both are set for the same element, both the class and style attributes are applied: 
<script>
  window.KatlaPolicy = {
    classes: { table: "w-full" },
    styles: { table: "border-collapse: collapse;" }
  };
</script>

​
JavaScript API

After the script loads, window.KatlaPolicy exposes the following methods:
MethodDescription
render(selector?)Re-render the policy into the given CSS selector (defaults to #katla-policy)
getMarkdown()Returns a Promise that resolves with the raw markdown string
getLocale()Returns the detected or configured locale string
// Re-render into a different element
window.KatlaPolicy.render("#my-policy");

// Get the raw markdown
window.KatlaPolicy.getMarkdown().then(function (md) {
  console.log(md);
});

// Check the active locale
console.log(window.KatlaPolicy.getLocale());

​
Direct URLs

Policy content is also available as standalone files:
FormatURL
HTMLhttps://dist.katla.app/{siteId}/policy.html
JSONhttps://dist.katla.app/{siteId}/policy.json
Markdownhttps://dist.katla.app/{siteId}/policy.md
JavaScripthttps://dist.katla.app/{siteId}/policy.js
All direct URLs accept the same locale and format query parameters.