# Configure the banner

Configure the banner through Consent settings in `app.lepsto.com` or the corresponding MCP tools. You can change its theme, logo and placement, preferences trigger, and consent cookie domain.

Theme and customization changes merge with saved settings. The banner reads configuration on each page load, but caches can delay what visitors see by up to five minutes.

## Before you start

- Member access with product `write` scope for theme, customization and floating-icon changes.
- Admin access for cookie domain changes, which can leave existing choices stored on the previous domain.
- A brand color in hex, `rgb()`/`rgba()` or `hsl()`/`hsla()` form. Named CSS colors are rejected because their contrast cannot be calculated.
- Any logo or cover image hosted at an absolute `https` URL, no longer than 2048 characters.

## Set the theme

Use the appearance panel in the app, or follow these MCP steps. Replace the example color and `example.com` asset URL with your own.

1. Set the theme with `consent_config_theme_upsert`:

   ```text
   consent_config_theme_upsert
     brandColor: "#2F6BFF"
     surface: "dark"
     corners: "rounded"
   ```

   The tool also accepts `font` and an `overrides` object for slots such as `textColor`, `backgroundColor`, `primaryTextColor`, `borderColor` and `focusColor`. Valid `corners` values are `sharp`, `rounded` and `pill`. Consent derives the remaining theme values from your settings.

2. Set images and placement with `consent_config_customization_upsert`:

   ```text
   consent_config_customization_upsert
     logoUrl: "https://example.com/logo.svg"
     position: "bottom"
   ```

   Other fields include `coverUrl`, `logoAlign` and `contentAlign`.

3. Read back the saved configuration with `consent_dashboard_config_get`. Each successful update saves immediately; no separate publish operation is needed. Omitted fields keep their values.
4. Reload your site and check the banner, allowing for the [cache windows](#freshness) below.

The banner lives in a shadow root and sets its own CSS custom properties. Page styles cannot be used to customize it; use the configuration settings.

### Two rules the resolver enforces

**Image URLs must use HTTPS.** Invalid or non-HTTPS URLs, including `http:`, `data:` and `javascript:`, are dropped. Images load from the host you supply, exposing the visitor's IP address to that host; Consent does not store the assets.

**An explicit primary text color must pass a contrast check.** The resolver rejects a contrast ratio below **3.0** against the button fill and reports the measured ratio. This is the threshold used for large text and UI components, not a claim that every text style meets every accessibility requirement. Colors whose contrast cannot be computed are also rejected.

If you omit the text color, Consent derives it from the brand color. The bundle and configuration response use the same derivation.

## Keep the choice reopenable

After a visitor decides, the floating icon reopens their preferences. To use your own trigger instead:

1. Add the trigger element to your site.
2. Call `consent_config_floating_icon_upsert` with product `write` scope, or change the floating-icon settings in the app:

   ```text
   consent_config_floating_icon_upsert
     floatingIcon:
       enabled: false
       position: "bottom-right"
       customSelector: "#cookie-settings"
   ```

3. Replace `#cookie-settings` with your element's selector and confirm that clicking it opens preferences after a decision.

The `floatingIcon` object requires `enabled`, `position` and `customSelector`. Disabling the icon without a custom trigger is rejected. The selector must be valid CSS and contain 1 to 256 printable ASCII characters.

## Narrow the cookie perimeter

By default, the runtime probes the browser to find your registrable domain and writes `lepsto_consent` there. Use an override when separate products on subdomains need separate choices.

1. With Admin access, call:

   ```text
   consent_config_cookie_domain_upsert
     cookieDomain: "docs.example.com"
   ```

2. Replace `docs.example.com` with the host that should receive the cookie.
3. Make a decision on that host and inspect the cookie's `Domain` in the browser.

Send `cookieDomain: null` or an empty string to restore automatic derivation.

The override must be lowercase, have at least one dot, be at most 253 characters and not be an IP address. It cannot equal or be an ancestor of a platform deployment domain, which would allow a cookie to cover other tenants.

The browser also checks the actual page hostname. If the override is not its suffix, the runtime ignores it and derives the domain automatically.

Changing the domain does not remove wider cookies already stored on neighboring subdomains. They expire on their original schedule. On the current host, the most recent decision takes precedence.

## Check it worked

1. Call `consent_dashboard_config_get` to check the saved theme, customization and floating-icon settings. It does not return the cookie domain override.
2. Open your site in a fresh browser profile. Check appearance after allowing up to five minutes for a current bundle, then hard-reload if needed.
3. Make a decision and reopen preferences using the floating icon or your custom trigger.
4. Inspect `lepsto_consent` in the browser's application panel. Its `Domain` should match the valid override or the automatically derived domain.

## Freshness

The configuration response is cached for **one minute** in the browser and any CDN, with an `ETag`. A revalidation with no changes returns `304`.

The banner bundle embeds the theme and is cached for **five minutes**. A stale bundle can briefly show previous colors until the configuration fetch applies the new theme. Allow five minutes for a current first frame.

An unconfigured product receives the default theme, customization and floating icon, no cookie domain override, and the built-in Consent provider.

## Next steps

- [The banner runtime](/privacy/banner-runtime): how automatic cookie domain selection works.
- [Declare your providers and cookies](/privacy/providers-and-cookies): configure the resources disclosed and blocked.
