> ## Documentation Index > Fetch the complete documentation index at: https://docs.katla.app/llms.txt > Use this file to discover all available pages before exploring further. # Widget > Install and customize the Katla consent widget on your website. 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 `` or before ``: ```html theme={null} ``` 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: | Parameter | Values | Description | | ---------- | --------------- | ------------------------------------ | | `locale` | `en-GB` | Language for the widget UI | | `theme` | `light`, `dark` | Override the theme setting | | `headless` | `true` | Cookie guard only, no visible widget | | `debug` | `true` | Enable console logging | ```html theme={null} ``` ## 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: | Option | Values | Default | | ----------------------- | ------------------------------------------------------------------- | -------------- | | **Layout** | `box`, `banner` | `box` | | **Position** | `top-left`, `top-right`, `bottom-left`, `bottom-right` | `bottom-right` | | **Theme** | `system`, `light`, `dark` | `system` | | **Border radius** | `0` – `10` | — | | **Colors** | Custom hex values for primary, secondary, accent, foreground, muted | — | | **Google Consent Mode** | `enabled`, `disabled` | `disabled` | | **Regulation** | `auto`, `gdpr`, `ccpa` | `auto` | | **DMA Compliant** | `true`, `false` | `false` | | **Privacy Policy URL** | Any 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](/ccpa) and [DMA guide](/dma) 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](/google-consent-mode) for details. ## Other embed formats Besides the JavaScript widget, Katla provides additional endpoints for your site: | Format | URL | Use case | | ------------ | ----------------------------------------------- | ----------------------------------------------------- | | **HTML** | `https://dist.katla.app/{siteId}.html` | Embed as iframe for a standalone cookie settings page | | **JSON** | `https://dist.katla.app/{siteId}.json` | Fetch cookie data for custom integrations | | **Manifest** | `https://dist.katla.app/{siteId}/manifest.json` | Discover all available resources | ## Example A Vite multipage example that loads the hosted widget and embeds the policy page.