Banner Layouts

CookieBoss offers three banner layouts. Choose the one that best fits your site’s design and compliance needs.

Bottom Bar

A non-intrusive bar fixed to the bottom of the viewport. Best for sites that want to minimize disruption.

• Sticks to the bottom of the screen
• Compact design with accept/reject/customize buttons
• Doesn’t block page content (visitors can scroll behind it)
• Most common layout for informational sites and blogs

Modal

A centered overlay that requires interaction before the visitor can use the site. Best for strict GDPR compliance.

• Centered dialog with a semi-transparent backdrop
• Blocks interaction with the page until a choice is made
• Larger area for detailed consent text
• Recommended when you need explicit, informed consent

Preference Center

A full-featured panel showing all cookie categories with toggles. Best for transparency and user control.

• Slide-in panel (typically from the right)
• Individual toggles for each cookie category
• Category descriptions and cookie lists visible
• “Necessary” category always on and non-toggleable
• Accept All / Reject All / Save Preferences buttons

Choosing a layout

Layout	Best for	GDPR strictness
Bottom Bar	Blogs, informational sites	Good
Modal	E-commerce, apps with EU audience	Strict
Preference Center	Privacy-focused sites, enterprise	Most transparent

Shadow DOM isolation

All layouts render inside a Shadow DOM attached to a dedicated container element. This means:

• Your CSS doesn’t affect the banner — no style conflicts
• The banner CSS doesn’t leak — your page styles stay untouched
• Banner styles are self-contained and consistent across any website

This is why CookieBoss banners look the same regardless of what CSS framework or design system your site uses.

Changing layout via API

You can also change the layout programmatically through the REST API:

PUT /api/v1/sites/:siteId/config
{
  "banner": {
    "layout": "modal"
  }
}

See the Configuration API docs for the full API reference.