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 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._getApprovedCategories(): Returns the approved categories array of the cookie categories the visitor consented to, passed as a parameter.

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._getDeniedCategories(): Returns the denied categories array. By default, this will be empty (categories that are not in the approved array are considered denied by default). This array will contain denied category objects if a user updates their consent by using the renew consent icon.

CookieInformation._getIABDataCulture(): Returns the data-culture of the uc.js script when the IAB TCF 2.0 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, then go to the tab called POP-UP in the platform under your Consent Solution, app.cookieinformation.com.

Under "Advanced Settings", you have access to each field for the template, HTML, CSS, and JS.

After pasting in the code, press "Save & Publish".

mceclip0.png

Did this answer your question?