Where to set up the design

You can configure the cookie banner design in the Consentio dashboard under the Designer section of your website. Changes take effect immediately on your site.

Available layouts

Choose from several predefined layouts:

Box (modal)

A classic modal window in the centre of the screen. Suitable for websites that want to ensure users notice the banner.

Bar (banner)

A horizontal bar at the bottom or top of the screen. A less intrusive option that does not obstruct content browsing.

Cloud (floating)

A compact floating window in a corner of the screen. A minimalist option for websites that prefer a subtle design.

Position

Depending on the chosen layout, you can set the position:

Colour scheme

Customise the banner colours to match your brand:

Predefined themes

• Light - Light background, dark text
• Dark - Dark background, light text
• Auto - Automatically based on the user's system setting

Custom colours

Set custom colours for individual elements:

• Background - Banner background colour
• Text - Main text colour
• Primary button - "Accept all" button colour
• Secondary button - "Reject" button colour
• Links - Link colour

Typography

Set fonts for the banner text:

• Font family - Choose from Google Fonts or use a system font
• Text size - Main text size
• Heading size - Banner heading size

Animations

Set the animation for showing and hiding the banner:

• Fade - Gradual fade in/out
• Slide - Slide from the screen edge
• None - No animation

Border radius

Set the border radius for the banner and buttons:

• None - Sharp corners (0px)
• Small - Slight rounding (4px)
• Medium - Medium rounding (8px)
• Large - Pronounced rounding (16px)
• Full - Maximum rounding (999px)

Plan limitations

Some customisation options are only available on paid plans:

Banner text

Edit the text displayed on the banner:

• Heading - Main banner heading
• Description - Explanatory text about cookies
• Accept button - Text for the accept all cookies button
• Reject button - Text for the reject button
• Settings link - Text for opening preferences

Preview changes

In the designer, you can see a live preview of the banner. You can:

• Switch between desktop and mobile views
• Test different states (first display, preference centre)
• Check the appearance in light/dark mode

CSS customisation

For advanced customisation, you can use custom CSS. The widget uses CSS variables:

/* Example style overrides */
.consentio-banner {
  --consentio-bg: #ffffff;
  --consentio-text: #1a1a1a;
  --consentio-primary: #10b981;
  --consentio-primary-hover: #059669;
  --consentio-border-radius: 12px;
}