Iubenda logo

Documentation

Table of Contents

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

In a hurry? Click here to view the Cookie Solution Basic Customizations video 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.

This post focuses on how to make basic changes to the appearance and position of the cookie notice.

For a more in-depth look at full settings and customization, see this complete guide on the installation and full customization of our cookie management solution (includes how to extensively modify banner visuals, general behaviour of the Cookie Solution and the obtaining of consent).

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:

iubenda Cookie Banner - Basic Customization

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.
  • Customize the privacy widget (see below).
  • 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).

Privacy widget

This optional feature allows your users to access and edit tracking preferences at any time after setting their initial preferences.

Unless you manually add the option to edit consent preferences as a link in the footer, if you enable the IAB Transparency and Consent Framework, this feature is automatically displayed as a small widget that hovers on the page.

To customize, click on the Notice dropdown

Cookie Solution configurator - Notice dropdown

and choose your preferred options under “Privacy widget”:

Cookie Solution configurator - Privacy widget

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:

Cookie banner customized with brand colors and logo

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

Cookie banner configurator - Custom logo and colors

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.

💡 Logo tip: use a white SVG on transparent background for best result.

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.

Cookie banner with reject button

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

Cookie Solution configurator - Reject button

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.

iubenda Cookie Solution customization panel - Advanced view

Manage cookie consent with the Cookie Solution

Generate a cookie banner

See also