Custom CSS for Consent Experiences

Custom CSS lets you load an external stylesheet alongside a Consent Experiences theme. Use it when the Theme Editor controls are not enough and you need finer visual overrides.

When Custom CSS is enabled, Transcend also pins your Consent Manager UI version. That keeps the look and structure of the consent UI stable, so your custom styling does not break when Transcend ships new Consent Manager UI releases.

This guide applies only to Consent Experiences. For the legacy banner stylesheet, see Configuring the Pre-Built Consent Experience UI.

Before you configure Custom CSS:

  1. Enable Consent Experiences. See Enabling Consent Experiences
  2. Confirm your airgap.js version is at least 9.0.0. Custom CSS requires a Consent Manager UI version that is compatible with your airgap.js version.
  3. Host your stylesheet on a URL your visitors can reach. Prefer HTTPS for production.

If you do not see Use Custom CSS under Developer Settings > Visual Editor after Consent Experiences is enabled, contact Transcend Support to enable Custom CSS for your organization.

  1. In the Admin Dashboard, go to Consent Management > Developer Settings.
  2. Open the Visual Editor tab.
  3. Confirm Use New Consent Experience is on.
  4. Toggle on Use Custom CSS.
  5. Choose a Consent Manager UI version from the dropdown. Transcend pins that version line so automatic updates cannot change the consent UI structure your custom styling depends on without your approval.
  6. Review the Consent Manager UI changelog shown under the toggle so you know what changed in each version.
  7. Click Review Changes & Publish and publish your airgap bundle.

Turning Use Custom CSS on pins a Consent Manager UI version. Turning it off clears the pin and returns you to automatic Consent Manager UI updates for your airgap.js version.

If your pinned Consent Manager UI version is incompatible with your current airgap.js version, the Admin Dashboard blocks deploy until you update airgap.js or choose a compatible Consent Manager UI version.

After Custom CSS is enabled, each theme can link its own stylesheet.

  1. Go to Consent Management > Consent Experiences.
  2. Open the Themes tab and select the theme you want to customize (or create a new theme).
  3. Open General Settings in the theme editor side panel.
  4. Under Custom CSS URL, enter the Stylesheet URL for your hosted CSS file (for example, https://example.com/custom-theme.css).
  5. Click Save Changes.
  6. Click Review Changes & Publish and publish your airgap bundle so the live consent UI loads the stylesheet.

You can set a different stylesheet URL per theme. Themes without a URL continue to use Theme Editor styling only.

Browsers block HTTP stylesheets on HTTPS sites by default. Use HTTPS before deploying to production.

When Use Custom CSS is OFF, Transcend keeps your Consent Manager UI up to date automatically for your airgap.js version.

When Use Custom CSS is ON:

  • You choose a Consent Manager UI version and stay on that version line until you change it.
  • Transcend can still apply smaller fixes within that line, but it will not move you to a newer line without you updating the pin and retesting your CSS.

If you still use the legacy consent UI and would like to move to Consent Experiences using Custom CSS, review Migrating from legacy custom CSS.