Skip to main content
 

Can I build my own fully customized cookie consent banner?

Cookiebot support
  • Updated
Coding skills and knowledge of HTML, CSS, and JavaScript are required in order to build a custom banner.
You need to apply your own coding logic to how your custom banner looks and behaves.
We are unable to provide you support with custom built temples.

With a premium subscription, the cookie consent banner can be styled in a number of ways using the built-in templates and CSS styling, see Can I style the cookie consent banner?. However, if you prefer to build your own banner, which you can customize completely to your liking, that is possible, too (premium subscriptions only).

How do I get started with the custom template?

  1. Log in to your account https://manage.cookiebot.com/goto/login
  2. Go to ‘Settings’ and click the ‘Banner’ tab
  3. From the ‘Banner template’ drop-down menu select ‘Custom’

 

What can I use to build my banner?

The code editor is a third party solution named Ace. Therefore there are some known limitations which we are sadly unable to resolve. An example of this is that the CSS editor unjustly identifies CSS variables as erroneous code.

 

1. HTML, CSS and JavaScript

When you have chosen the ‘Custom’ template, you will see examples of the HTML definitions, the CSS and the JavaScript functions you can use to build your banner (do remember to scroll within each one to reveal more lines of code).

You can change the name of functions to show and to hide the cookie consent banner, if you would like.

Remember to save your settings (tick mark in the blue bar on the left-hand side).

 

2. HTML placeholders and naming conventions

By clicking the small grey question mark on the upper right corner, you will get access to the HTML placeholders and naming conventions you can use. Scroll to see all of them.

The HTML placeholders you use will dynamically be replaced with the relevant content from your Cookiebot configuration.

Further down you will find ID attribute values you can use on your HTML elements for various button events.

Remember to save your settings (tick mark in the blue bar on the left-hand side).

 

3. Cookiebot SDK

If you prefer, you can use the Cookiebot SDK to have access to Cookiebot methods and properties. The SDK is available here: https://www.cookiebot.com/goto/developer 

Remember to save your settings (tick mark in the blue bar on the left-hand side).

Comments

1 comment

Date Votes

Please sign in to leave a comment.