Styling

Customize your consent banner’s colors, position, and branding in the Banner Editor or via the API.

Style properties

Name Type Required Default Description
primaryColor string No #627D98 Primary button and accent color (hex)
accentColor string No #27AB83 Secondary accent color for highlights (hex)
textColor string No #2D3748 Main text color (hex)
backgroundColor string No #FFFFFF Banner background color (hex)
position 'bottom' | 'top' | 'center' No bottom Banner position on screen
showPoweredBy boolean No true Show 'Powered by CookieBoss' badge

Using the Banner Editor

The easiest way to style your banner is through the visual Banner Editor in the dashboard:

  1. Open your site’s Banner Editor
  2. Adjust colors using the color pickers
  3. See changes in the live preview
  4. Click Save then Publish

Setting styles via API

You can also set styles programmatically:

PUT /api/v1/sites/:siteId/config json 
{
"banner": {
  "primaryColor": "#1A73E8",
  "accentColor": "#34A853",
  "textColor": "#202124",
  "backgroundColor": "#FFFFFF",
  "position": "bottom",
  "showPoweredBy": false
}
}

Removing the badge

The “Powered by CookieBoss” badge can be removed on paid plans (Starter and above). Free plans always show the badge.

Color tips

  • Use sufficient contrast between text and background colors for accessibility (WCAG AA: 4.5:1 ratio for normal text)
  • Primary color is used for the “Accept All” button — make it visible
  • Accent color is used for links and the “Customize” button
  • Test your colors in both light and dark environments

Position

PositionDescription
bottomFixed to the bottom of the viewport (default)
topFixed to the top of the viewport
centerCentered overlay (only applies to modal layout)

For bottom bar layout, bottom and top control where the bar appears. For modal layout, the dialog is always centered regardless of this setting.