Skip to main content

Can I build my own fully customized cookie consent banner?

Cookiebot support
  • Updated

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).

Before you start, please note that this requires some coding skills and knowledge of HTML, CSS and Javascript. You need to apply your own coding logic to how the banner looks and behaves, and we are not able to offer you individual support on custom built templates.

 

How do I get started with the custom template?

  1. Log in to your account https://manage.cookiebot.com/goto/login
  2. Go to the menu point ‘Settings’ and the tab ‘Dialog’
  3. From the ‘Template’ drop-down menu choose ‘Custom’ at the very bottom

Custom_banner_choose_template.png

 

What can I use to build my banner?

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).

Custom_banner_html_css_js_examples.png

 

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

custom_banner_name_functions_hide_show.png

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.

Custom_banner_html_placeholders.png

 

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

Custom_banner_ID_attributes.png

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

 

3. Cookiebot API 

If you prefer, you can use the Cookiebot API to trigger the relevant API functions. The API 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).

Related articles

Comments

1 comment

Date Votes

Article is closed for comments.