How to Customize the Look and Behavior of the Cookie Banner (Beginner’s Guide)

You can easily modify the standard look and functionality of the cookie consent banner on your website — this includes background color, dimensions, content, position, “Accept” and “Customize” buttons, and basic functionality.

To begin making customizations to your cookie notice, go to Dashboard > [your website/app], then click on Edit under the Cookie Solution area. This will take you directly to the customization panel:

Here you can immediately:

• Change the banner position (top, bottom, top left/right floated, bottom left/right floated, center floated or top/bottom center floated).
• Add an optional “lightbox” effect via the background overlay?feature.
• Change basic banner visuals such as theme color (dark, light or custom).
• Customize the header with your brand colors and logo (see below).
• Remove the iubenda branding from the second layer by selecting the White label checkbox.
• Activate/deactivate “Accept” and “Customize” buttons.
• Activate/deactivate the “Reject” button (see below).
• Activate/deactivate the banner’s close button (“x”).
• Activate/deactivate consent on continued browsing. Deselect it if you don’t want to collect consent by scrolling and continued browsing activity. When this option is deselected consents are only registered when the user explicitly closes the banner/modal or clicks on the “Continue to browse” button (within the modal).
• Activate/deactivate consent on scroll. Deselect it if you don’t want to collect consent by scrolling (details in Cookies and the GDPR: What’s Really Required?).
• Activate/deactivate consent on page interaction. Deselect it if you don’t want to collect consent by clicking on a button/link on the page.
• Activate/deactivate per-category consent. Select it if you want to give users more granular control on which categories of cookies or other identifiers to give consent to. Read the documentation for proper set up.
• Enable the IAB Transparency and Consent Framework, recommended if you are a first-party publisher who work with third-party advertisers (like Google Ads).

Custom branding options

You can customize the header of the cookie banner with your brand colors and logo. For example, for our site we’ve used our company’s colors and logo:

To enable this feature, check the Custom logo and colors option on the configurator:

Once you’ve added your logo and chosen your text and background colors, brandTextColor, brandBackgroundColor and logo parameters will be added to your Cookie Solution code snippet.

View the demo on CodePen or read our advanced guide to learn more about custom branding options.

Reject button

Once enabled, this feature will allow your users to refuse giving consent to cookies by clicking on the explicit reject button instead of on the standard close icon. This option is particularly relevant to users who operate in the UK as the ICO now requires that a reject button be displayed.

To enable this feature, check the “Explicit Reject button” option on the configurator:

As a result, "rejectButtonDisplay": true will be added to your Cookie Solution code snippet.

*Please note that once this option is enabled, the close icon in the upper right corner of the cookie banner will be disabled.

As with most other elements in the Cookie Solution, the color and text of the button are fully customizable. View the demo on CodePen or read our advanced guide to learn more about customization and callbacks.

Advanced view

Clicking on Advanced view will open up a full list of advanced options that will allow you to customize everything from banner animation, cookie policy link text, buttons and banner content to banner css, cookie expiration time and callbacks.

See also

• The advanced guide further explains how to make advanced modifications to the cookie banner and its behaviour
• iubenda Cookie Solution – Introduction and Getting Started
• Introduction to the Prior Blocking of Cookie Scripts
• Cookies and the GDPR: What’s Really Required?
• Questions and answers regarding cookie consent management