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

​
Prerequisites

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

​
Installation

Add the script tag to your website, either in the <head> or before </body>: 
<script src="https://dist.katla.app/{siteId}.js"></script>
Replace {siteId} with your site ID. You can find the full embed code by running katla install example.com or in your site settings.

​
Script parameters

You can customize the script behavior with query parameters:
ParameterValuesDescription
localeen-GBLanguage for the widget UI
themelight, darkOverride the theme setting
headlesstrueCookie guard only, no visible widget
debugtrueEnable console logging
<script src="https://dist.katla.app/{siteId}.js?theme=dark&debug=true"></script>

​
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:
OptionValuesDefault
Layoutbox, bannerbox
Positiontop-left, top-right, bottom-left, bottom-rightbottom-right
Themesystem, light, darksystem
Border radius0 – 10—
ColorsCustom hex values for primary, secondary, accent, foreground, muted—
Google Consent Modeenabled, disableddisabled
Regulationauto, gdpr, ccpaauto
DMA Complianttrue, falsefalse
Privacy Policy URLAny valid URL—
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:
FormatURLUse case
HTMLhttps://dist.katla.app/{siteId}.htmlEmbed as iframe for a standalone cookie settings page
JSONhttps://dist.katla.app/{siteId}.jsonFetch cookie data for custom integrations
Manifesthttps://dist.katla.app/{siteId}/manifest.jsonDiscover all available resources

​
Example

Widget example

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