Skip to main content
Making your own pop-up template

This article will walkthrough the most important information for your to create a pop-up template

Updated over a year ago

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:

Did this answer your question?