Cookie consent banner is a tool to inform users about the use of cookies on a website and to obtain their consent to use them. The banner should be shown to the user before any cookies are set on the user's device. The banner should be shown on the first visit to the site and the user should be able to change their consent at any time.
Include the following script tag in the <head> of your page:
<script
src="URL"
onload="window.hds.CookieConsentCore.create(
'API_URL',
{
language: 'LANG',
theme: 'THEME',
targetSelector: 'TARGET_SELECTOR',
spacerParentSelector: 'SPACER_PARENT_SELECTOR',
pageContentSelector: 'PAGE_CONTENT_SELECTOR',
submitEvent: 'SUBMIT_EVENT',
settingsPageSelector: 'SETTINGS_PAGE_SELECTOR'
}
)"
></script>| String | Explanation |
|---|---|
| URL | URL to the cookie consent banner script |
| API_URL | URL to the API endpoint that returns the cookie settings JSON |
| LANG | language code of the page (and banner if translation is provided, uses fallback language if not provided) |
| THEME | Optional theme of the banner ('bus', 'coat', 'black'), optional, defaults to 'bus' |
| TARGET_SELECTOR | Optional selector for parent element, where the banner should be rendered as first child. (Banner should be first element on page) Defaults to 'body' |
| SPACER_PARENT_SELECTOR | Optional selector for parent element, where a spacer element should be rendered as last child to reserve space below last element on page (like footer) for banner. Defaults to 'body' |
| PAGE_CONTENT_SELECTOR | Optional selector for parent element that wraps banner and banner spacer, dynamic css variable with banner height is written into inline style of this element. Defaults to 'body' |
| SUBMIT_EVENT | Optional boolean, if set to true, triggers a window level event using given string as the name of the event before closing banner. If not set, reloads page instead |
| SETTINGS_PAGE_SELECTOR | Optional selector, if is set and matching element is found on page, instead of banner, show a full page cookie settings replacing the matched element with banner contents. |
<script src="https://example.com/cookieConsent/index.js" onload="window.hds.CookieConsentCore.create('https://example.com/siteSettings.json',{language:'en',settingsPageSelector:'#cookieConsentSettings'})"></script>With code above, the cookie consent javascript is loaded from https://example.com/cookieConsent/index.js and the settings JSON from https://example.com/siteSettings.json. The language of the banner is set to English and the settings page is shown instead of the banner if element with id cookieConsentSettings is found on the page.
When you have included the banner on your page and want to check for approval of certain categories do this.
<script>
if (window.hds.cookieConsent.getConsentStatus(['preference', 'statistics'])) {
// Load content that requires consent, for example youtube embed
}else{
// Load alternative content or show message, for example:
document.write(`
<div class="message">
<h2>Content cannot be displayed</h2>
<p>This content is hosted by <em>https://www.youtube.com</em>. To see the content, switch over to the external site or modify your cookie settings to allow for <strong>preference</strong> and <strong>statistics</strong> cookies.</p>
<div class="buttons">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="hds-button hds-button--primary">
<span class="hds-button__label">See content on external site</span>
<span aria-hidden="true" class="hds-icon hds-icon--link-external"></span>
</a>
<a href="https://example.com/cookie-settings/" class="hds-button hds-button--secondary" onclick="window.hds.cookieConsent.openBanner(['preference', 'statistics'); return false;">
<span class="hds-button__label">Change cookie settings</span>
</a>
</div>
</div>`;
);
}>
</script>Here the actual check is done with:
window.hds.cookieConsent.getConsentStatus(['preference', 'statistics'])It returns a boolean if all listed groups have been accepted by the user or not.
When the user has not accepted the required groups, you can show alternative content or a message to the user. In the example above, a message is shown with a link to the external site and a link to the cookie settings page.
The link to cookie settings page is dynamically changed to open the cookie banner and highlight the required groups when clicked.
The code to open the banner is:
window.hds.cookieConsent.openBanner(['preference', 'statistics'])It takes an array of group names as an argument and opens the banner with those groups highlighted.
Traficom has instructed that normally users must be given an opportunity to approve non required cookies before they are loaded. This means that if you have a chat widget on your page, you should not load it before the user has given their consent.
The consent can be given two ways:
When a chat button is loaded, before it loads any cookies or other storage, it first must check if the user has given their consent. This can be done by checking the consent status with the following code:
<script>
if (window.hds.cookieConsent.getConsentStatus(['chat'])) {
// Consent has been given, it's ok to load chat and use storage for example to continue chat session with user.
}else{
// Consent has not been given, do not load chat or use storage. Showing a chat button is ok.
}
</script>When the user clicks the chat button, according to Traficom, we can assume that user wants to use chat and load all cookies relevant for its functionality. To approve chat cookies, when chat button is clicked, you can use the following code:
window.hds.cookieConsent.setGroupsStatusToAccepted(['chat'])It takes an array of group names as an argument and sets the status of those groups to accepted. This means that the chat widget can now be loaded and all cookies and other storage relevant for its functionality can be used.
For this to work, these groups must to be whitelisted in the siteSettings.json file: "groupsWhitelistedForApi": ["chat"]
You can use site settings editor "Groups whitelisted for API"-section to change this setting
Remember that chat cookie consent may be withdrawn at any time by the user by changing their cookie settings. So remember to check the consent for example on each page load.