Please note: 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?
- Log in to your account https://manage.cookiebot.com/goto/login
- Go to the menu point ‘Settings’ and the tab ‘Dialog’
- From the ‘Template’ drop-down menu choose ‘Custom’ at the very bottom
What can I use to build my banner?
Please note: 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 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).
Comments
1 comment
Don't have coding skills and knowledge of HTML, CSS and Javascript. ? We have developed some custom banner designs you may like. You can further style these cookie banner designs to your look and feel. Have a look at https://cookiemagic.eu/cookiebot-custom-banner-designs/
Please sign in to leave a comment.