Skip to main content
The Katla widget collects cookie consent from your visitors and blocks non-consented cookies from being set.

​
Prerequisites

  • A domain added in Katla
  • At least one completed scan

​
Installation

Add the script tag to your website, either in the <head> or before </body>:
Replace {siteId} with your site ID. You can find the full embed code by running katla install example.com or in your site settings. This URL carries every supported language and picks the visitor’s automatically, so it works anywhere with no configuration. It is also the right choice for self-hosting, since it is a single file with nothing else to fetch.

​
Automatic language, smaller script

If you want the same automatic behaviour without shipping every language, use the loader:
It is under half a kilobyte. It reads the visitor’s browser languages, then loads only the matching one — about 15 KB over the wire instead of 19 KB, at the cost of one extra request. Any theme or debug parameter you put on the loader is carried across.
The loader needs a second request before the cookie guard exists. If you would rather the guard run on the first round trip, use {siteId}.js with a fixed locale, or the all-languages URL above.

​
Script parameters

You can customize the script behavior with query parameters:

​
Content Security Policy

If your site sends a Content-Security-Policy header, script-src must allow https://dist.katla.app, and connect-src must allow https://consent.katla.app so consent records can be stored.
Using the {siteId}.init.js loader under a nonce-based policy works without extra configuration — the loader copies its own nonce onto the script it injects. If the injected script is blocked for any other reason, the loader falls back to the all-languages file, so a visitor is never left without a cookie guard.

​
How it works

  1. The script installs a cookie guard that intercepts document.cookie writes.
  2. If the visitor hasn’t given consent yet, the widget appears.
  3. The visitor chooses their preferences (accept all, reject all, or select categories).
  4. A _katla_consent cookie is stored for 365 days with their choice.
  5. Non-consented cookies are blocked and any existing disallowed cookies are removed.
Functional cookies are always allowed and cannot be rejected.

​
Customization

You can customize the widget appearance in your site settings. Available options: Both light and dark mode colors can be configured independently. When Regulation is set to auto, the widget detects the visitor’s region at runtime using timezone and GPC signals. See the CCPA guide and DMA guide for details. When Google Consent Mode is enabled, the widget script automatically signals consent state to Google Analytics and Google Ads tags. See the Google Consent Mode guide for details.

​
Other embed formats

Besides the JavaScript widget, Katla provides additional endpoints for your site:

​
Example

Widget example

A Vite multipage example that loads the hosted widget and embeds the policy page.