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/

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?