Style the Cookiebot consent banner

The cookie consent banner can be styled in a few ways which we explain below.

Alternatively, you can use one of the CookieInfo custom cookie banner designs. Have a look here.

1. Use style options that are available in the Cookiebot manager:

With a premium subscription you can easily style the banner using the built-in templates.

Choose from 2 pre-defined color schemes (white and black) or a custom color scheme. The custom color scheme allows you to easily adjust the colors of the cookie consent banner’s backgrounds, text, buttons, button texts and borders. You can choose a color you like from the color palette or enter a HEX code.

You can also upload your logo – as drag-and-drop or by uploading a file.

In the free subscription, a standard color scheme is available and no option to upload a logo.

It is not possible to make changes to logo and color schemes in the FREE version.

Follow the steps below:

1. Log in on your cookiemanager account https://manage.cookiebot.com/goto/login 
2. Got to the “settings”menu item and select the tab “dialog”
3. From the “Theme” drop-down menu select “white”, “dark” or “custom”.

Adjusting the colors:

1. In the custom template, you can change the colors by clicking on the small arrow next to each box or by clicking on the colored area.
2. Choose the color you like – either by clicking anywhere on the color palette, by using the slider or by entering a HEX code.
3. Click ‘apply’ to apply the chosen color.
4. Preview the styling to see what it would look like on your website (screen icon in the blue bar on the left-hand side).
5. If you are happy with the styling, save your settings (tick mark in the blue bar on the left-hand side).

To customize or add a logo:

1. Choose if you want to display a logo on the cookie consent banner or not (tick or un-tick the box).
2. Make use of the logo icon that is already on there. You can change its color from the color menu just below it (works just like the color palette above).
3. Use your own logo. Drag and drop the file to the grey shaded area or select a file to upload
4. Save your settings (tick mark in the blue bar on the left-hand side).

2. Styling possible using the CSS !important rule:

Alternatively – or in addition to the built-in styling options – you can style the cookie consent banner further by overriding the CSS styling in your website’s own style sheet/CSS file. You can do this by using the CSS !important rule. For example, to change the font:

#CybotCookiebotDialog { font-family: Helvetica!important; }

3.Build your own Cookiebot cookie consent banner exactly the way you want it:

There is a custom template available from the ‘Template’ drop-down menu. With this you can build your banner using HTML, CSS and Javascript and applying your own logic. HTML placeholders and naming conventions are provided. You should choose this option only if you have coding skills.

4. Use a CookieInfo custom banner design template

We developed several Cookiebot custom banner designs. Are you interested in a cookie banner that has a different look and feel than the Cookiebot designs? Don’t have the time or resources to develop a custom cookie banner? Have a look at the possibilities.

These custom banners are of course also available to existing Cookiebot users.