Skip to content

Configure the banner

Set banner appearance, a preferences trigger, and the consent cookie domain.

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:

    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:

    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 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:

    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.

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:

    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

Was this page helpful?
Esc

Start typing to search the docs.

↑↓navigate↵select