Skip to content

Customize a Banner Safely ​

Use the banner style settings to change colors, typography, position and animation. These changes are saved as a draft. Preview the draft on the intended page, then publish when you are ready.

Match your website ​

Use readable text and button colors, with at least 4.5:1 contrast for normal text. Keep accept, reject and preferences controls easy to find. Check the preferences dialog and its toggles as well as the initial banner.

“Inherit from site” uses the website's font. A custom font stack saved through your AI assistant remains available in the Web App, but the website must already load that font. Saving a font name does not download a font or install a stylesheet. A dashboard preview may use the fallback font if the custom font is unavailable there.

On Webflow sites with custom banner components, keep the existing fs-consent-* attributes and their values on the elements they describe. See the HTML attributes reference before changing the component structure. Preserve the banner and preferences containers, form controls, category toggles, action buttons, and the control that reopens preferences after a choice.

Change classes, spacing and visual styles without replacing consent buttons with decorative elements. Keep controls keyboard accessible, retain visible focus, and do not hide essential actions behind hover. Preserve labels and accessible names. Avoid CSS that overrides the runtime's visibility behavior or permanently hides the preferences dialog.

Banner style edits do not authorize changing regions, page targeting, tracker categories, script loading or Google Consent Mode. Review those settings separately when needed.

Preview and verify ​

  1. Preview the saved draft on the intended page. A preview link does not prove that targeting or installation is correct on the published site.
  2. Check narrow and wide screens, keyboard navigation, text readability and long translations.
  3. Exercise rejection, partial acceptance, full acceptance and reopening preferences to withdraw consent. Verify subsequent requests and persistence after reload; appearance alone cannot establish blocking.
  4. Publish only the reviewed changes. Browser caching and already-open pages can delay delivery.
  5. Verify the ordinary published page without preview overrides. Record anything that could not be tested, including regional delivery and business-event triggers.

For installation and enforcement details, see Script Loading, Automatic Blocking and Events.