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.
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, you can also craft your own custom banner (Premium subscriptions only)
How do I get started with the custom template?
- Log into the Admin.
- Select "Configuration" from the left-hand menu.
- Click "Templates" in the upper left corner.
- Check the option labeled "Custom code" and click the "Next >" button.
- You can now craft your banner using HTML, CSS, and JavaScript.
- Remember to save your changes using the "Save changes" button in the upper right corner.
HTML placeholders and naming conventions
You have placeholders at your disposal when crafting a custom banner. These HTML placeholders will dynamically be replaced with the relevant content from the "Content" tab under the "Configuration" section of the Admin.
Here is the list of these HTML content placeholders:
| Placeholder name | Description |
|---|---|
| [#TITLE#] | Banner headline |
| [#TEXT#] | Banner text |
| [#ACCEPT#] | Accept button text |
| [#DECLINE#] | Decline button text |
| [#LEVELOPTIN_ALLOWALL#] | Text in [Allow all] button |
| [#LEVELOPTIN_ALLOW_SELECTION#] | Text in [Allow selection] button |
| [#DETAILS#] | Show details label |
| [#DETAILSHIDE#] | Hide details label |
| [#LANGUAGE#] | Current language code |
| [#TEXTDIRECTION#] | Current language text direction (LTR or RTL) |
| [#COOKIESGENERALINTRO#] | General cookie introduction |
| [#ABOUTCOOKIES#] | About Cookies label |
| [#COOKIESOVERVIEW#] | Cookies Declaration label |
| [#LASTUPDATED#] | Declaration last updated date label |
| [#COOKIETYPE_NECESSARY#] | Necessary cookies category title - Including cookie type count |
| [#COOKIETYPE_NECESSARY_RAW#] | Necessary cookies category title |
| [#COOKIETYPEINTRO_NECESSARY#] | Necessary cookies introduction |
| [#COOKIETABLE_NECESSARY#] | Table with details on cookies of this type |
| [#COOKIETYPE_PREFERENCE#] | Preference cookies category title - Including cookie type count |
| [#COOKIETYPE_PREFERENCE_RAW#] | Preference cookies category title |
| [#COOKIETYPEINTRO_PREFERENCE#] | Preference cookies introduction |
| [#COOKIETABLE_PREFERENCE#] | Table with details on cookies of this type |
| [#COOKIETYPE_STATISTICS#] | Statistics cookies category title - Including cookie type count |
| [#COOKIETYPE_STATISTICS_RAW#] | Statistics cookies category title |
| [#COOKIETYPEINTRO_STATISTICS#] | Statistics cookies introduction |
| [#COOKIETABLE_STATISTICS#] | Table with details on cookies of this type |
| [#COOKIETYPE_ADVERTISING#] | Marketing cookies category title - Including cookie type count |
| [#COOKIETYPE_ADVERTISING_RAW#] | Marketing cookies category title |
| [#COOKIETYPEINTRO_ADVERTISING#] | Marketing cookies introduction |
| [#COOKIETABLE_ADVERTISING#] | Table with details on cookies of this type |
| [#COOKIETYPE_UNCLASSIFIED#] | Unclassified cookies category title - Including cookie type count |
| [#COOKIETYPE_UNCLASSIFIED_RAW#] | Unclassified cookies category title |
| [#COOKIETYPEINTRO_UNCLASSIFIED#] | Unclassified cookies introduction |
| [#COOKIETABLE_UNCLASSIFIED#] | Table with details on cookies of this type |
To automatically hook up button events on your HTML elements, use one or more of the following ID-attribute-values on the relevant HTML elements. Alternatively you must trigger the appropriate Cookiebot API-function when the user clicks your element to submit a consent.
| Element ID-attribute | Type | Description |
|---|---|---|
| CybotCookiebotDialogBodyButtonAccept | Any | Submits a consent (opt-in) by triggering Cookiebot.dialog.submitConsent(). |
| CybotCookiebotDialogBodyButtonDecline | Any | Submits an opt-out by triggering Cookiebot.dialog.submitDecline(). |
| CybotCookiebotDialogBodyLevelButtonAccept | Any | Submits a consent for the selected cookie categories (opt-in) by triggering Cookiebot.dialog.submitConsent() |
| CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll | Any | Submits an opt-out by triggering Cookiebot.dialog.submitDecline(). |
| CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection | Any | Submits a consent for the selected cookie categories (opt-in) by triggering Cookiebot.dialog.submitConsent() |
| CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll | Any | Submits a full consent (opt-in) by triggering Cookiebot.dialog.submitConsent() |
| CybotCookiebotDialogBodyLevelButtonNecessary | Checkbox | The value of this checkbox indicates whether the user accepts this type of cookies when submitting a consent. |
| CybotCookiebotDialogBodyLevelButtonPreferences | Checkbox | The value of this checkbox indicates whether the user accepts this type of cookies when submitting a consent. |
| CybotCookiebotDialogBodyLevelButtonStatistics | Checkbox | The value of this checkbox indicates whether the user accepts this type of cookies when submitting a consent. |
| CybotCookiebotDialogBodyLevelButtonMarketing | Checkbox | The value of this checkbox indicates whether the user accepts this type of cookies when submitting a consent. |
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
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.