Skip to main content

Banner overview

The OptSens consent banner asks visitors for cookie consent and stores their choice. It has two layers. Layer 1 is the banner the visitor sees first. Layer 2 is the preference center where they review categories and partners.

You configure everything in the dashboard at my.optsens.com under Banner Settings. The same editor appears as the Banner step of the guided onboarding when you set a domain up for the first time. The page shows the editor on the left and a live preview on the right that updates as you change settings.

The two layers

LayerWhat it isButtons
Layer 1The first banner. Title, short text, and the main choices.Accept all, Reject all, Manage
Layer 2The preference center. Cookie categories, the cookie declaration, and partners (IAB mode).Accept all, Reject all, Save / Confirm

Reject all and Accept all carry equal visual weight, which GDPR requires. The banner never auto-dismisses. It stays until the visitor makes a choice.

The banner adapts to the regulation that applies to each visitor. The mode is set per region in Geo rules.

ModeConsent modelUsed for
GDPROpt-in, everything blocked until consentEU/EEA, UK, and similar opt-in regions
IAB TCFOpt-in with a TC string and a partners listEU/EEA when IAB TCF is enabled
CCPAOpt-out, with a "Do Not Sell or Share" linkCalifornia and US state laws
BasicNotice onlyRegions with a notice-only requirement

Set up the banner

  1. Open Banner Settings in the dashboard.
  2. Pick a theme as a starting point.
  3. Set the layout, colors, and shape.
  4. Add a custom logo and the languages you serve.
  5. Set the floating button and, if you need it, dark mode.
  6. Open Geo rules to choose which regulations apply per region.
  7. Click Save Changes.

The editor groups settings into collapsible sections: Theme, Banner Position, Colors, Shape, Style & Font, Branding, Floating button, Dark Mode, Languages, and Advanced. Open one at a time.

Preview

The preview panel renders the real banner component, not a screenshot.

  • The device buttons switch between Desktop, Tablet, and Mobile.
  • When more than one banner mode is active, mode chips let you preview GDPR, IAB, CCPA, or Basic.
  • When dark mode is on, a sun/moon button previews the dark color set.

A header chip shows Unsaved changes while you have edits in progress. Reset to Default restores the default styling. It keeps your languages, since those are content you authored.

How it runs on the site

The banner is delivered by the script you added during installation. It renders inside a Shadow DOM, and the banner's own styles never clash with your site's CSS. On the visitor's first page load it sets Google Consent Mode v2 defaults to denied, then shows the banner. When the visitor chooses, OptSens stores the choice, fires a Consent Mode v2 update, and unblocks the scripts they allowed.

After a visitor consents, a floating button stays on the page to let them reopen the preference center and change their mind. Developers can also open it with OptSens.showPreferences().