Skip to main content

Customise Your Web Consent Banner

How to customize your consent banner: styling, behaviour and text

Updated over a week ago

Make your cookie banner your own with the Consent Studio customisation options

Automatic styling during registration

When you create an account, our Martin AI automatically scans your website during the registration process. Based on this scan, it detects commonly used colors and applies a matching color scheme to your cookie banner.

So when you first enter the Consent Studio dashboard, your banner is already styled to fit the look and feel of your website.

Customizing the banner behaviour

The Behaviour tab under Banner in Consent Studio gives you full control over how your cookie banner behaves on your website.

At the top of this page, you'll find a preview of your cookie banner. The preview updates in real-time as you adjust the settings, allowing you to instantly see how your banner will look and behave for your users.

Default behavior

The Default behavior tab in Consent Studio is where you configure how your cookie banner behaves by default. This includes which cookie categories are available and how the banner’s buttons and interactions appear to your users.

Here you can select which cookie categories (Functional, Analytics, Marketing & Social Media) are displayed and whether they are pre-selected. You also control important interface elements such as the visibility of the “Reject all” button, the presence of a “Customize” button, and options like highlighting the “Accept all” button or adding a close icon.

Informed Consent

The Informed Consent tab allows you to

Consent Modes

The Consent modes tab lets you enable tracking options for different external platforms, such as Google Consent Mode and Microsoft UET Consent Mode.

Multilanguage

The Multilanguage tab allows you to manage and add the languages supported by your cookie banner. You can also set the fallback language for the banner.

Accessibility

The accessibility tab allows you to customise accessibility settings for the banner, such as focus behaviour, heading elements and escape key actions.

Advanced

The Advanced tab contains additional technical options to fine-tune the behavior of your cookie banner, such as hiding the banner within iframe windows and reloading frames when the consent state updates.

Translations

The Translations tab under banner allows you to customize the text of your cookie banner for each language you’ve added in the Multilanguage (Web CMP > Behaviour > Multilanguage) settings.

Styling

At the top of the Styling page, you’ll find a live preview of your cookie banner. This preview updates in real-time as you adjust the styling settings, allowing you to see exactly how your banner will look on your website.

Banner Modal

In the Banner modal tab you can adjust the position, width and corner roundness of your cookie banner. You can also choose how the color mode is applied: always dark, always light, or based on the user’s system preferences

Buttons

In the Buttons tab you can customize the colors of primary and secondary buttons, including hover and text colors. You can also style header actions by setting static and hover colors, and adjust the roundness of all buttons.

Typography

In the Typography tab you can adjust the font size for headings and body text, and customize text colors for headings, regular text and links.

Sticky toggle

In the Sticky toggle tab you can enable or disable the consent toggle for desktop and mobile devices, and choose whether the icon appears on the left or right side of the screen. You can also customise the size, icon and color of the sticky toggle.

Logo (Professional only)

Here you can choose to enable or disable the Consent Studio logo or upload your own logo.

Custom CSS

In the Custom CSS tab you can add your own CSS to further customize the styling of your cookie banner beyond the available settings.

Geotargeting

For more information on how to use Geotargeting, please refer to this article.

Installing the Consent Studio Banner

For information about how to install the banner on your site, please refer to this article.

Did this answer your question?