How to create a custom template
When creating templates remember that js lib waits for specific events, on clicks to happen and they have to be added to templates with exact names.
Important functions
When customizing your own consent solution you must know the important Javascript functions that make up the solution itself. This is useful for when you want to create your own template for a consent pop-up.
Most important JS functions
CookieInformation.submitAllCategories() - Gives consent for all categories. The consent pop-up closes.
<button onclick=
"CookieInformation.submitAllCategories()">
Accept All</button>
CookieInformation.declineAllCategories() - Declines for all categories. The consent pop-up closes.
<button onclick=
"CookieInformation.declineAllCategories()">
Decline All</button>
CookieInformation.submitConsent() - Gives consent for only selected categories if checkboxes are set. But only when the categories set as the name attribute, are present in the template. The pop-up closes., eg: <input name="cookie_cat_statistic" id="cookie_cat_statistic" type="checkbox" />
<button onclick=
"CookieInformation.submitConsent()">
Save settings</button>
CookieInformation.getConsentGivenFor(category) - Returns TRUE or FALSE if the category has been consented to.
if (CookieInformation.getConsentGivenFor
('cookie_cat_statistic'))
{// Do something}
Applying translations for a template
When creating a template, you need to keep in mind that the same template can apply to many domains and languages. That also means that you refrain from hard-coding any text within the template.
Instead, you must use our JS handlebars we have created for each translation field for your solution.
A JS handlebar is is a placeholder that refers to a specific field in our database of translation. This placeholder will get replaced with the correct text based on the chosen translation.
An example of this:
#{{{translations.show_details}}}
The handlebar consists of the word translations followed by a . (dot) and then the name of the field.
A complete example of usage:
<button onclick="CookieInformation.submitAllCategories()">#{{{translations.accept_cookies_button}}}</button>
Available Handlebars
{{{translations.banner_heading}}}
{{{translations.banner_main_text}}}
{{{translations.accept_cookies_button}}}
{{{translations.cookie_declaration_text}}}
{{{translations.decline_cookies_button}}}
{{{translations.about_cookies}}}
{{{translations.show_details}}}
{{{translations.hide_details}}}
{{{translations.cookies_overview}}}
{{{translations.multiaccept}}}
{{{translations.multidecline}}}
{{{translations.cookie_name_header}}}
{{{translations.cookie_provider_header}}}
{{{translations.cookie_purpose_header }}}
{{{translations.cookie_expiry_header}}}
{{{translations.domain_list_explanation}}}
{{{translations.last_updated}}}
{{{translations.no_scan_performed}}}
{{{translations.category_consent_header}}}
{{{translations.update_consent_button}}}
{{{translations.iab_info}}}
{{{translations.iab_privacy_controls}}}
{{{translations.iab_vendors_button}}}
{{{translations.iab_vendors}}}
{{{translations.iab_full_vendors_button}}}
{{{translations.dp_name}}}
{{{translations.dp_privacy_policy}}}
{{{translations.dp_service_specification}}}
{{{translations.iab_show_vendors}}}
{{{translations.iab_show_purposes}}}
{{{translations.iab_features}}}
{{{translations.iab_privacy_policy}}}
{{{translations.iab_legitimate_purposes}}}
{{{translations.iab_no_cookies_in_category}}}
For example, when using the Handlebars template, take note of how each and unless operators are used. Each is used to iterate through categories, and unless uses the boolean value to block the option of disabling the necessary cookies.
<div>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="categories-wrapper">
<span class="page-title">{{{translations.category_consent_header}}}</span>
<div class="categories-list">
{{#each cookie_categories}}
<div class="single-category">
<div class="category-title-area">
<span class="category-title">{{{this.cookie_type_name}}}</span>
{{#unless this.is_necessary}}
<div class="switch-container">
<label class="switch">
<input type="checkbox" onclick="CookieInformation.changeCategoryConsentDecision('{{this.cookie_type_label}}')" name="{{this.cookie_type_label}}">
<span class="slider"></span>
</label>
</div>
{{/unless}}
</div>
<div class="category-description-area">
<div class="category-description">{{{this.cookie_type_description}}}</div>
<span class="more-about-category">{{{../translations.show_details}}}</span>
</div>
</div>
{{/each}}
</div>
<div class="consent-decision">
<span class="select-all">{{{translations.multiaccept}}}</span>
<button class="update-consent" onclick="CookieInformation.submitConsent()">{{{translations.update_consent_button}}}</button>
</div>
</div>
</div>
More on how to use the handlebars can be found in the documentation: https://handlebarsjs.com/
Functions provided by the uc.js script
The following functions are accessible to you once the uc.js script has loaded:
CookieInformation._fireEventOnConsentGiven(): Allows you to fire an event upon consent to a particular category (or categories) having been given.
CookieInformation._getConsentScriptUrl(): Returns the URL of the website that the consent has been given for (loaded from the uc.js script).
CookieInformation._getCookieValue(): Returns the value of a cookie that you pass as a parameter.
CookieInformation._getDataCulture(): Returns the data culture of the uc.js script.
CookieInformation._getIABDataCulture(): Returns the data culture of the uc.js script when the IAB TCF 2.2 template is in use.
CookieInformation._getVisitorID(): Returns the visitor ID property.
CookieInformation.getConsentGivenFor(): Returns a boolean of true or false when for whether a particular category has been consented to.
Uploading your new template
If you made a new pop-up template, go to the pop-up tab in the platform under your Consent Solution in the platform.
Under "Advanced Options", you can access each field for the template, HTML, CSS, and JS.
After pasting in the code, press "Save & Publish".
Related articles: