For our RESPONSUM Cookie solution we partnered up with Civic Cookie Control. Their customisable JavaScript based Cookie banner can be deployed and configured on one or more of your websites to get compliant with one or more European Privacy Legislations like GDPR, ePrivacy etc.
The synergy with RESPONSUM is the ability to also capture a cookie consent log and gain insight in the provided user consent. This is a necessary compliance requirement to be able to show that consent is captured and acted upon in case of an audit.
Ways to setup Cookie Control
Using CMS Add-ons
Cookie Control can be easily integrated in the most common Content Management Systems. For the once listed below, a free add-on is available via Civic:
Using JavaScript in your website code
Loading the module
You will need to include both the Cookie Control module, and your own configuration at an appropriate place in your document. The easiest way to load the Cookie Control module is from our CDN:
<!-- Latest Release with support for IAB TCF v2.0 -->
<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.5.min.js"></script>
<!-- Latest Stable Version -->
<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js" type="text/javascript"></script>
<!-- For a list of all available versions, please see the CookieControl Changelog -->
You load the module in exactly the same way for all Cookie Control editions, though the features available differ. Compare the features and prices of Cookie Control editions here.
Beginning your configuration
You define (and create) your own configuration as a JavaScript Object, containing as many properties as you deem necessary.
To get started, detail both the apiKey
and product
type you have registered for; and then run Cookie Control’s load()
function to invoke them.
<!-- Latest Version -->
<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js" type="text/javascript"></script>
<script>
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
};
CookieControl.load( config );
</script>
Limitations
Before exploring the configuration options further and outlining what Cookie Control can do; we feel it is important to go through the limitations so that you can assess whether or not the module is right for you.
First, no JavaScript module can remove all cookies that your site may set; and that’s for good reason. It helps to safeguard your site and its users from potential security vulnerabilities. Cookie Control is no different, and in certain scenarios the most we can do is inform the user of the action they need to take.
Second, we cannot know all the ways that your site may set cookies, and require you to accurately set your own configuration. Should you do this, Cookie Control will provide users with an accessible means of explicitly granting, and revoking consent.
Please note, Cookie Control does not respond to Do Not Track (DNT) signals due to insufficient and varied browser support. The W3C disbanded the DNT working group in January 2019, though you may still be required to detail that you do not respond to DTN signals in your privacy policy.
Configuration options
Cookie Control allows you to control nearly every aspect of what it does – from informing your users of the types of cookies used, through to customising the appearance and text. Sensible defaults will exist for a lot of these properties, so you generally only need to include those that you’d like to overwrite.
The exceptions to this are apiKey
, product
and optionalCookies
. While the first two may strictly speaking be the only required properties for Cookie Control to load, the end user will ultimately receive little value if you do not accurately set how your site uses cookies. With this in mind, we have grouped the configuration options into two groups: those related to controlling cookies, and customisation options that may be thought of as entirely option.
Controlling the use of cookies
Option | Description | Type |
---|---|---|
apikey | The apikey of your license. | string No Default |
product | The product corresponding to your license’s plan. It can be either 'COMMUNITY', 'PRO', or 'PRO_MULTISITE'. | string No Default |
necessaryCookies | This is a list of cookies names necessary for your website’s core functionality, that you wish to protect from the module’s deleteAll() function. In most cases you won’t have to set this option, as typically these cookies will be issued by the server as HttpOnly, which are automatically protected.Note – it is possible to use the * wildcard at the end of a cookie name, if you want all cookies that start with this prefix to be protected. | array of strings No Default |
optionalCookies | This is a list of purposes that your website may use. The module’s core behaviour will be dependent on you accurately setting this option, as it informs the user of the different cookies the website may set, and offers them controls for opting in or out. Each purpose will be defined as its own object, so please refer to the Purpose Object section below for a description of all the properties available. | array of objects No Default |
mode | Determines the mode in which Cookie Control runs. Possible values are either 'GDPR' or 'CCPA' .When in GDPR mode, cookies will default to being off, allowing the user to opt in, while when in CCPA mode cookies will default to on and users will be allowed to opt out. In CCPA mode users can also click on a “Do Not Sell My Personal Information” button to opt out from optional cookies in bulk, as required by the legislation.For Pro users where geolocation is available, Cookie Control will always run in “gdpr” if the website visitor is inside the EU or inside Brazil.Furthermore, Pro users will be able to override this property for specific locations, for example use CCPA inside the USA or in California only. See the Locale object for more details.Finally please note that when using CCPA mode you need to configure the CCPA Configuration Object property with a link to your Personal Information Policy (see below). | string gdpr |
consentCookieExpiry | Determines how many days the consent of the user will be remembered for. This setting will apply globally to all categories. | number 90 |
statement | Cookie Control will respect user given consent until either the cookie expires, or there is a change in your privacy statement.Please refer to the Statement Object section below for a description of all the properties available. | object No Default |
ccpaConfig | When using Cookie Control in CCPA mode, use this object to customise the CCPA required link name and description. Similarly to the statement object Cookie Control will respect user given consent until there is a change in the CCPA Personal Information Policy.Please refer to the CCPA Configuration Object section below for a description of all the properties available. | object No Default |
logConsent | Determines whether or not Cookie Control should record the user’s granting or revoking of consent.Please note, this is also dependent on you having agreed with CIVIC’s data processor agreement. Please sign in to update your settings. | boolean true |
encodeCookie | Determines whether or not the value of Cookie Control’s own cookie should be encoded as a Uniform Resource Identifier (URI) component. | boolean false |
subDomains | Determines whether Cookie Control’s own cookie is saved to the top level domain, and therefore accessible on all sub domains, or disabled and saved only to the request host. | boolean true |
Purpose Object (Cookie Category)
The optionalCookies
property may contain as many Purpose Objects as you require, though we recommend either using a couple of simple categories such as Analytics, Social Networks, and Marketing.
Each Purpose Object may consist of:
Option | Description | Type |
---|---|---|
name | A unique identifier for the category, that the module will use to set an acceptance cookie for when user’s opt in.Will also be the identifer used to associate and activate any inline iframes, media or scripts that are not enabled by default and set up with data-src as opposed to src. Please see this example for more information. | string None |
label | The descriptive title assigned to the category and displayed by the module. This value may be overwritten depending on your locale property and user’s preferences. | string Purpose {index} |
description | The full description assigned to the category and displayed by the module. This value may be overwritten depending on your locale property and user’s preferences. | string A description for {label} has not been provided. |
cookies | The name of the cookies that you wish to protect after a user opts in. Note that you can use the * wildcard at the end of the name, if want to define more than one cookies that share the same prefix. | array of strings None |
thirdPartyCookies | Only applicable if the category will set third party cookies on acceptance. Each object will consist of the following key-value pairs: name : string optOutLink : URL string | array of objects None |
vendors | The vendors that place the cookies.You can use this if you want to explicitly display the vendors that place the cookies that you use. This is particularly useful if you are targeting users in Brazil and want to comply with LGPD.Each vendor object consists of the following properties: name : string description : string url : URL string thirdPartyCookies : boolean | array of objects None |
onAccept | Callback function that will fire on user’s opting into this cookie category. | function None |
onRevoke | Callback function that will fire on user’s opting out of this cookie category. Should the thirdPartyCookies be set for this Purpose, the module will automatically display a warning that manual user action is needed. | function None |
recommendedState | Defines whether or not this category should be accepted (opted in) as part of the user granting consent to the site’s recommended settings.If true, the UI will update to show the category toggled ‘on’ and the user’s consent will be recorded if logConsent is enabled. | boolean false |
lawfulBasis | Defines whether this category requires explicit user consent, or if the category can be toggled on prior to any user interaction and justified under the more flexible lawful basis for processing: legitimate interest. Possible values are either consent or legitimate interest. If the latter, the UI will show the category toggled ‘on’, though no record of consent will exist. If you choose to rely on legitimate interest, you are taking on extra responsibility for considering and protecting people’s rights and interests; and must include details of your legitimate interests in your privacy statement. Read more from the ICO | string consent |
Example
Below is an example of how you might set optionalCookies
to define three categories (Analytics, Marketing and Social Sharing), that uses the onAccept
to add Google Analytics, Facebook Pixel, and AddThis respectively.
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
text : {
thirdPartyTitle : 'Warning: Some cookies require your attention',
thirdPartyDescription : 'Consent for some third party cookies can not be automatically revoked. Please follow the link below if you want to opt out of them.'
},
optionalCookies: [
{
name : 'analytics',
label: 'Analytical Cookies',
description: 'Analytical cookies help us to improve our website by collecting and reporting information on its usage.',
cookies: ['_ga', '_gid', '_gat', '__utma', '__utmt', '__utmb', '__utmc', '__utmz', '__utmv'],
vendors: [{
name: "Google",
url: "https://policies.google.com/technologies/types?hl=en-US",
description: "Google Analytics"
}],
onAccept : function(){
// Add Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
// End Google Analytics
},
onRevoke: function(){
// Disable Google Analytics
window['ga-disable-UA-XXXXX-Y'] = true;
// End Google Analytics
}
},
{
name : 'marketing',
label: 'Marketing Cookies',
description: 'We use marketing cookies to help us improve the relevancy of advertising campaigns you receive.',
cookies: ['fr'],
onAccept : function(){
// Add Facebook Pixel
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxx');
fbq('track', 'PageView');
fbq('consent', 'grant');
// End Facebook Pixel
},
onRevoke: function() {
fbq('consent', 'revoke');
}
},
{
name : 'socialsharing',
label: 'Social Sharing Cookies',
description: 'We use some social sharing plugins, to allow you to share certain pages of our website on social media',
cookies: ['__atuvc', '__atuvs'],
onAccept : function(){
// Add addThis
var script = document.createElement("script");
script.src = "//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-581b3669203a9a52";
document.body.appendChild(script);
// End addThis
},
onRevoke: function(){
},
thirdPartyCookies: [{"name": "AddThis", "optOutLink": "http://www.addthis.com/privacy/opt-out"}]
}
],
};
CookieControl.load( config );
Alternatively, if you use Google Tag Manager (GTM) you may configure categories to run specific events depending on the user’s preference. For example, within GTM you can create an event “analytics_consent_given” to run your choice of analytics software and associate it with a user action via the onAccept
property.
More information on custom events can be found here.
If you only wish to add support for Google Analytics and Google Ad Platforms, you may simplify Cookie Control set up with Google Consent Mode.
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
optionalCookies: [
{
name : 'analytics',
label: 'Analytical Cookies',
description: 'Analytical cookies help us to improve our website by collecting and reporting information on its usage.',
cookies: ['_ga', '_gid', '_gat', '__utma', '__utmt', '__utmb', '__utmc', '__utmz', '__utmv'],
onAccept : function(){
// Add Google Analytics via GTM
// assumes the associated event has been created within GTM
// and that event in turn loads analytics
dataLayer.push({
'event': 'analytics_consent_given'
});
// End Google Analytics
}
}
]
};
CookieControl.load( config );
Statement Object
If the statement
property exists, a description and link to your privacy policy is added after the module’s introductory text. Cookie Control will check this property on each load to ensure the user’s record of consent coincides with the same privacy policy. Should the Statement Object change, the module will revert to its initial state as though it is the first time the user is accessing the site, and will seek their consent again.
The Statement Object must consist of:
Option | Description | Type |
---|---|---|
description | The text description that introduces your privacy statement. | string |
name | The text that you wish to call your terms by, for example Privacy Statement. | string |
url | The URL where your terms may be accessed. This link will try to open in a new tab, so it may point to a PDF document without closing the user’s access to your site. | string |
updated | The date that your privacy statement was last issued, in the format of dd/mm/yyyy. | string |
Example
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
initialState: "OPEN",
statement : {
description: 'For more information vist our',
name : 'Privacy Statement',
url: 'https://www.civicuk.com/cookie-control/v8/documentation',
updated : '26/01/2018'
}
};
CookieControl.load( config );
CCPA Configuration Object
This object is nearly identical to the statement object, but should be used when Cookie Control runs in CCPA mode, in which case a description and link to your Personal Information Policy is added after the module’s introductory text. Cookie Control will check this property on each load to ensure the user’s record of consent coincides with the same privacy policy.
The CCPA Configuration Object must consist of:
Option | Description | Type |
---|---|---|
description | The text description that introduces your Personal Information Policy. | string |
name | The text that you wish to call your terms by, for example Personal Information Policy. | string |
url | The URL where your terms may be accessed. This link will try to open in a new tab, so it may point to a PDF document without closing the user’s access to your site. | string |
updated | The date that your Personal Information Policy was last issued, in the format of dd/mm/yyyy. | string |
Please note, Cookie Control does not respond to Do Not Track (DNT) signals due to insufficient and varied browser support. The W3C disbanded the DNT working group in January 2019, though you may still be required to detail that you do not respond to DTN signals in your privacy policy.
Example
Please note that in order to see the example below working on JSFiddle, you will need to be outside EU, otherwise Cookie Control defaults to using GDPR.
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
initialState: "OPEN",
mode: 'ccpa',
ccpaConfig : {
description: 'This may include the website or our third-party tools processing personal data. In the case of your personal data, you may opt out of such activity by using the buttons below. To find out more about the categories of personal information collected and the purposes for which such information will be used, please refer to our',
name : 'Personal Information Policy',
url: 'https://www.civicuk.com/cookie-control/documentation',
updated : '26/01/2018'
},
statement : {
description: 'For more information vist our',
name : 'Privacy Statement',
url: 'https://www.civicuk.com/cookie-control/documentation',
updated : '26/01/2018'
}
};
CookieControl.load( config );
Customising appearance and behaviour
All of the following properties may be considered entirely optional, as Cookie Control will use sensible defaults for any property not present in your configuration – this means you only need to include those you wish to overwrite.
Option | Description | Type |
---|---|---|
initialState | Determines the initial display state of Cookie Control.Possible values are either open, closed, notify (pro licenses only), top (pro licenses only) or box (pro licenses only).notify will display a summary of the use of cookies in a horizontal bar at the bottom of the page, with controls to accept/reject cookies, or read more information.top is similar to notify and it will display a summary of the use of cookies in a horizontal bar, which will be at the top of the page.box is also similar to notify though it will display a summary of the use of cookies in a modal in the centre of the page. | string closed |
notifyOnce | Determines whether the module only shows its initialState once, or if it continues to replay on subsequent page loads until the user has directly interacted with it – by either toggling on / off a category, accepting the recommended settings, or dismissing the module. | boolean false |
rejectButton | Determines whether the module shows a reject button alongside the accept button on the notification bar, or alongside the ‘accept recommended settings’ button when the panel is open.Should the user click this, consent to all optionalCookies will be revoked. | boolean true |
layout | Determines the display type and behaviour of Cookie Control.Possible values are either slideout or popup (pro licenses only). | string slideout PRO |
position | Determines the side of the display Cookie Control will occupy.Possible values are either left or right. | string right |
theme | Determines the appearance of Cookie Control.Possible values are either light or dark. | string dark |
toggleType | Determines the control toggle for each item within optionalCookiesPossible values are either slider or checkbox. | string slider |
acceptBehaviour | This property is used to control what will happen when the user clicks on either of the ‘Accept’ or ‘Accept recommended settings’ buttons. By default all cookie purposes will be accepted.Possible values are either all or recommended. | string all |
closeOnGlobalChange | If set to false the Cookie Control main window will remain open when the user clicks on either of the accept or reject buttons, and the user will have to explicitly close it using the X close icon at the top right, or the close button. | boolean true |
closeStyle | Determines the closing behaviour of the module.Possible values are either icon, labelled or button. | string icon |
notifyDismissButton | Set this to false if you are using the notify interface and don’t wish to show the (X) close icon on it. | boolean true |
settingsStyle | Determines the appearance of the settings button on the notification bar.Possible values are either button or link. | string link |
text | Determines the text used by Cookie Control. Please refer to the Text Object section below for a description of all the properties available. | object |
setInnerHTML | By default, only plain text is accepted within Text Object properties. If this property is set to true, HTML content will also be accepted. | boolean false |
branding | With pro and pro_multisite licenses, you are able to set all aspects of the module’s styling, and remove any back links to CIVIC. Please refer to the Branding Object section below for a description of all the properties available. | object PRO |
excludedCountries | With pro and pro_multisite licenses, you are able to disable the module entirely for visitors outside of the EU. Either add the value all, or a list of 2 letter ISO codes for the countries you wish to disable the module for. Using the value all will mean the widget will be shown to users coming from IPs that belong to EU countries only. | array of strings PRO |
locales | With pro and pro_multisite licenses, you are able to offer alternative text depending on your user’s preferences. Please refer to the Locale Object section below for a description of all the properties available. | array of objects PRO |
locale | The ISO language code for the locale out of the locales array that should be used for the current visitor. It defaults to the user’s window.navigator.language , i.e. the user’s browser language. | string PRO |
onLoad | Defines a function to be triggered after the module initiates the defined configuration. | function none |
accessibility | Determines the accessibility helpers available, such as the accesskey and keyboard focus style. Please refer to the Accessibility Object for more information. | object |
sameSiteCookie | If set to true the CookieControl cookie will be marked with the SameSite:Strict flag. Otherwise it will be flagged with SameSite:None , which however will mean that in some browsers Cookie Control will not work unless your site is served over HTTPS. | boolean true |
sameSiteValue | Used in conjuction with the sameSiteCookie property, it controls the value of the SameSite flag for the CookieControl cookie. It can be one of “Strict”, “Lax” or “None”. | string “Lax” |
Example
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
initialState: "notify",
position: "LEFT",
theme: "LIGHT",
layout: "slideout"
};
CookieControl.load( config );
Text Object
The text object consists of various string properties, and is entirely optional. Cookie Control will use sensible defaults for any property not present in your configuration – this means you only need to include those you wish to overwrite.
All properties may in turn be overwritten by your locale
property, should the user’s preferences coincide.
Option | Default |
---|---|
accept (used on the notify bar) | I Accept |
reject (used on the notify bar) | I Do Not Accept |
settings | Settings |
title (used on the main panel) | This site uses cookies to store information on your computer. |
intro (used on the main panel) | Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used. |
acceptSettings (used on the main panel) | I Accept |
acceptRecommended | Accept Recommended Settings |
rejectSettings (used on the main panel) | I Do Not Accept |
necessaryTitle | Necessary Cookies |
necessaryDescription | Necessary cookies enable core functionality such as page navigation and access to secure areas. The website cannot function properly without these cookies, and can only be disabled by changing your browser preferences. |
thirdPartyTitle | Some cookies require your attention |
thirdPartyDescription | Consent for the following cookies could not be automatically revoked. Please follow the link(s) below to opt out manually. |
on | On |
off | Off |
notifyTitle | Your choice regarding cookies on this site |
notifyDescription | We use cookies to optimise site functionality and give you the best possible experience. |
closeLabel | Close Cookie Control |
cornerButton (used by screen readers) | Set cookie preferences. |
landmark (used by screen readers) | Cookie preferences. |
showVendors | Show vendors within this category |
thirdPartyCookies (used with vendors) | This vendor may set third party cookies. |
readMore (used with vendors) | Read more |
Example
var config = {
apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
product: 'PRO_MULTISITE',
text : {
title: 'This site uses cookies.',
intro: 'Some of these cookies are essential, while others help us to improve your experience.',
necessaryTitle : 'Necessary Cookies',
necessaryDescription : 'Necessary cookies enable core functionality..',
thirdPartyTitle : 'Warning: Some cookies require your attention',
thirdPartyDescription : 'Please follow the link(s) below to opt out manually.',
}
};
CookieControl.load( config );
Branding Object (PRO Feature)
The branding object consists of various properties, and is entirely optional. Cookie Control will use sensible defaults for any property not present in your configuration – this means you only need to include those you wish to overwrite.
Option | Description |
---|---|
fontFamily | The CSS font-family that you’d like to use for the entire module. string default: Arial, sans-serif |
fontSizeTitle | The CSS font-size that you’d like to use for the main (h2) title when the module is opened. string 1.2em |
fontSizeHeaders | The CSS font-size that you’d like to use for the sub (h3) titles when the module is opened. string 1em |
fontSize | The CSS font-size that you’d like to use throughout the module for body text. string 0.8em |
fontColor | The CSS color that you’d like to use for all text and icons within the module. string dark theme default: #FFF light theme default: #333 |
backgroundColor | The CSS background-color that you’d like to use throughout the module. string dark theme default: #313147 light theme default: #f4f4f4 |
notifyFontColor | The CSS color that you’d like to use for all text and icons within the notify bar. string dark theme default: #FFF light theme default: #333 |
notifyBackgroundColor | The CSS background-color that you’d like to use throughout the notify bar. string dark theme default: #313147 light theme default: #f4f4f4 |
acceptText | The CSS color that you’d like to use for the text within the module’s primary ‘accept’ buttons. string dark theme default: #fff; light theme default: #000 |
acceptBackground | The CSS background-color that you’d like to use for the module’s primary ‘accept’ buttons. string dark theme default: transparent light theme default: transparent |
rejectText | The CSS color that you’d like to use for the text within the module’s primary ‘reject’ buttons. string dark theme default: #fff light theme default: #000 |
rejectBackground | The CSS background-color that you’d like to use for the module’s primary ‘reject’ buttons. string dark theme default: transparent light theme default: transparent |
closeText | The CSS color that you’d like to use for the text within the module’s “Close” button, if you have set the closeStyle property to “button”. string dark theme default: #111125 light theme default: #FFF |
closeBackground | The CSS background-color that you’d like to use for the module’s “Close” button, if you have set the closeStyle property to “button”. string dark theme default: #FFF light theme default: #000 |
toggleText | The CSS color that you’d like to apply to the toggle button’s text. string dark theme default: #FFF light theme default: #333 |
toggleColor | The CSS background-color that you’d like to use for the movable part of the toggle slider. string dark theme default: #2f2f5f light theme default: #000 |
toggleBackground | The CSS background-color that you’d like to use for the toggle background. string dark theme default: #111125 light theme default: #555 |
alertText | The CSS color that you’d like to use within the alert areas, such as to announce manual user actions for third party cookies. string dark theme default: #fff; light theme default: #000 |
alertBackground | The CSS background-color that you’d like to use to highlight the alert areas, such as to announce manual user actions for third party cookies. string dark theme default: #111125 light theme default: #eaeaea |
buttonIcon | The URL address of an image you’d like to use instead of the CIVIC C icon in the bottom corner. string |
buttonIconWidth | The css pixel width that you’d like this image to be sized to. number default: 80 |
buttonIconHeight | The css pixel height that you’d like this image to be sized to. number default: 80 |
removeIcon | Whether or not to remove the button icon entirely. Please note, if you do this, you will need to present an alternative trigger to run the module’s open() function. boolean default: false |
removeAbout | Whether or not to remove the ‘About this tool’ link to CIVIC at the bottom of the module. boolean default: false |
Example
var config = { apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687', product: 'PRO_MULTISITE', initialState: "OPEN", optionalCookies: [ { name : 'analytics', label : 'Analytical cookies', description : 'Analytical cookies help us to improve our website by collecting and reporting information on its usage.' } ], branding : { fontColor: "#FFF", fontSizeTitle: "1.2em", fontSizeIntro: "1em", fontSizeHeaders: "1em", fontSize: "0.8em", backgroundColor: '#00a0e0', toggleText: '#000', toggleColor: '#f0f0f0', toggleBackground: '#fff', buttonIcon: null, buttonIconWidth: 120, buttonIconHeight: 120, removeIcon: false, removeAbout: false } }; CookieControl.load( config );
Locale Object (PRO Feature)
Option | Description | type |
Locale | Defines who the contained language settings would be appropriate for. Accepts either a full locales (en_US), or two letter language code (en). Where both are present and matched with the current user’s preference, the more specific locale will be used. | string |
mode | Either gdpr, ccpa, or hidden. Similar to the global mode property, determines the mode Cookie Control will run in for a certain locale. Using the hidden option means Cookie Control will be hidden, and all onAccept functions will run immediately. | string |
location | An array holding the ISO 3166 two letter country codes, for which this locale is valid. For United States in particular, you can also pass the ISO code of a particular state. An example of a location setting targetting California and Canada to use CCPA mode is: ['US-CA', 'CA'] . | array of strings |
optionalCookies | The optionalCookies array mirrors that of the default optionalCookies array, though only expects each object to contain a localised value for label and description. Please refer to the Text Object section for more information. | object |
Example
var config = { apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687', product: 'PRO_MULTISITE', locale: 'el', locales: [ { locale: 'el', text : { title: 'Αυτός ο ιστότοπος χρησιμοποιεί cookies για να αποθηκεύσει πληροφορίες στον υπολογιστή σας.', intro: 'Μερικά από αυτά είναι απαραίτητα, ενώ άλλα μας βοηθούν να βελτιώσουμε την εμπειρία σας δείχνοντάς μας πώς χρησιμοποιείται ο ιστότοπος.', necessaryTitle : 'Απαραίτητα Cookies', necessaryDescription : 'Τα απαραίτητα cookies καθιστουν δυνατή την λειτουργικότητα του ιστοτόπου, όπως για παράδειγμα την πλοήγηση και την πρόσβαση σε ασφαλείς περιοχές του ιστοτόπου. Ο ιστότοπος δεν μπορεί να λειτουργήσει χωρίς αυτά, και μπορούν να απενεργοποιηθούν μονο από τον φυλλομετρητή σας.', on: "ΝΑΙ", off: "ΟΧΙ", notifyTitle: "Σχετικά με τα cookies σε αυτή την σελίδα", notifyDescription: "Χρησιμοποιούμε cookies για να βελτιστοποιήσουμε την λειτουργία της ιστοσελίδας και να σας προσφέρουμε την βέλτιστη δυνατή εμπειρία.", accept: "Αποδοχή", acceptSettings: "Αποδοχή", reject: "Δεν Δέχομαι", rejectSettings: "Δεν Δέχομαι", settings: "Ρυθμίσεις", thirdPartyTitle : 'Προειδοποίηση: Μερικά cookies ζητούν την προσοχή σας', thirdPartyDescription : 'Η συγκατάθεση στα παρακάτω cookies δεν μπορεί να ανακληθεί αυτόματα. Παρακαλώ ακολουθηστε τον παρακάτω σύνδεσμο για να αποχωρήσετε από τη χρήση αυτών των υπηρεσιών.', acceptRecommended: 'Αποδοχή προτεινόμενων ρυθμίσεων', }, mode: 'gdpr', location: ['GR'], statement : { description: 'για περισσότερες πληροφορίες παρακαλώ διαβάστε την', name : 'Πολιτική Ιδιωτικότητας', url: 'https://www.civicuk.com/privacy-statement', updated : '08/05/2018' }, optionalCookies:[ { label: "Στατιστικά", description: 'Χρησιμοποιούμε cookies για να συλλέγουμε στατιστικά σχετικά με την χρήση της ιστοσελίδας.' } ], } ], optionalCookies: [ { name : 'analytics', label: 'Analytical Cookies', description: 'Analytical cookies help us to improve our website by collecting and reporting information on its usage.', cookies: ['_ga'], onAccept : function(){ }, onRevoke: function(){ } } ], statement : { url: 'https://www.civicuk.com/privacy-statement', updated : '08/05/2018' } }; CookieControl.load( config );
Accessibility Object
Option | Description | Type |
accessKey | Remaps the accesskey that the module is assigned to. | |
highlightFocus | Determines if the module should use more accentuated styling to highlight elements in focus, or use the browser’s outline default. If enabled, this property uses CSS filters to invert the module’s colours. This should hopefully mean that a higher visual contrast is achieved, even with a custom branding . | |
outline | Determines if the module should show the browser’s default outline styling on elements. It can be combined with highlightFocus to add both a highlight and an outline to focused elements. | |
overlay | Determines if the module should use an overlay to accentuate the presence of an open notification bar or panel and discourage use of the main site while these elements are open. This property is recommended for accessibility purposes and enabled by default. Even if disabled, interaction with the site behind is not possible if the popup layout is enabled. |
Public Methods
Cookie Control offers various public methods to help make interacting with the module, and generally managing Cookies easier.
Please note, that by using some of these methods to set your own custom behaviour, you are taking on extra responsibility for considering and protecting people’s rights and interests.
Method | Description |
---|---|
load | Initiates the module based on the defined configuration object, passed in as a parameter. function CookieControl.load( { … config } ) |
update | Updates the module with a new configuration object, passed in as a parameter. function CookieControl.update( { … config } ) |
open | Triggers the module’s open state. Useful if you wish to add your access points within privacy pages, etc. function CookieControl.open() |
hide | Triggers the module’s closed state. Useful if you have opened it with your own access points. function CookieControl.hide() |
notifyAccept (deprecated) | Programmatically sets the notification bar as accepted, which in turn activates the configuration’s recommended purposes. Useful if you wish to add your own behaviour, such as accepting after scroll.If you choose to use this method, you are taking on extra responsibility for considering and protecting people’s rights and interests. Should you simply wish to hide the notification bar use notifyDismiss() function CookieControl.notifyAccept() |
notifyReject (deprecated) | Programmatically sets the notification bar as rejected, which in turn disables the configuration’s recommended purposes. function CookieControl.notifyReject() |
notifyDismiss (deprecated) | Programmatically sets the notification bar as dismissed. Useful if you wish to add your own behaviour, such as dismissing after scroll. function CookieControl.notifyDismiss() |
acceptAll | Programmatically accepts all cookie purposes.If you choose to use this method, you are taking on extra responsibility for considering and protecting people’s rights and interests. function CookieControl.acceptAll() |
rejectAll | Programmatically rejects all cookie purposes. function CookieControl.rejectAll() |
config | Returns the configuration object currently used by the module. function CookieControl.config() |
geoInfo | Returns the geoLocation object used by the module, describing a user’s location by name, ISO code and EU status. function CookieControl.geoInfo() |
geoTest | Similar to geoInfo, but it can be used prior to loading the module. You can use it to load different config objects for different locations. Please note that this will send a request to our server in order to determine the location. This request can be either sync (blocking) or async (non blocking), depending on whether you supply a callback parameter or not (see below).It accepts three parameters:product : The product of your licenseapikey : The apikey of your licensecallback (OPTIONAL): A callback to run when the request returns. If this option is missing, the request will be synchronous.Returns the geoLocation object used by the module, describing a user’s location by name, ISO code and EU status.function CookieControl.geoTest(product, apikey, callback)Example using a callback (recommended):var product = 'PRO_MULTISITE'; var apikey = '592b99ebdf88c091dad9b556b6d8de236ac97687'; CookieControl.geoTest(product, apikey, function(response){ var config; if (response.withinEU()) { config = { // ... } } else { config = { // ... } } CookieControl.load( config ); } ) Example without using a callback: var product = 'PRO_MULTISITE'; var apikey = '592b99ebdf88c091dad9b556b6d8de236ac97687'; var config; if (CookieControl.geoTest(product, apikey)["withinEU"]) { config = { // ... } } else { config = { // ... } } CookieControl.load( config ); |
getCookie | Retrieve a cookie, by passing its name as a string parameter.Returns the value of the cookie if it exists, or ‘false’ otherwise. function CookieControl.getCookie(‘CookieControl’) |
getAllCookies | Retrieves all cookies set on the current page.Returns an object with key value pairs of the cookies and their respective values. function CookieControl.getAllCookies() |
saveCookie | Saves a cookie, by passing its name, value, and expiryLength as a parameters. function CookieControl.saveCookie( ‘name’, ‘value’, 90 ) |
delete | Deletes a cookie, by passing its name as a string parameter. function CookieControl.delete(‘CookieControl’) |
deleteAll | Deletes all cookies set on the current page. function CookieControl.deleteAll() |
changeCategory | Changes consent to a given purpose (cookie category), passed as a number parameter describing its index within the optionalCookies array, according to the value of the second argument (true or false)If the second argument passed is true , consent is granted, otherwise consent is revoked.“ function CookieControl.changeCategory( 0, true ) |
toggleCategory | Toggles consent to a given purpose (cookie category), passed as a number parameter describing its index within the optionalCookies array.If the user has previously given consent to this category, consent is revoked, otherwise consent is granted.function CookieControl.toggleCategory( 0 ) |
getCategoryConsent | Gets the consent state of a particular category, passed as a number parameter describing its index within the optionalCookies array. Returns a boolean.function CookieControl.getCategoryConsent( 0 ) |
Cookies Set By Cookie Control
When a user interacts with the module, their consent is recorded as a first party cookie to remember that decision.
In version 8.0, the name of that cookie will be dependent on the name set in the configuration for that category; and only added after the user opts in.
In version 8.1, the introduction of lawfulBasis
has meant that the module needs to remember when a user revoke’s consent as well, so we have simplified the cookies the module may set to a single one, named CookieControl
. This is still a first party cookie, used only to remember the user’s preferences on your domain, and lasts for as long the consentCookieExpiry
defined in your configuration (defaults to 90 days if not set).
In version 9.0 onwards, if you are using the IAB TCF v2.0 version of Cookie Control, a cookie named CookieControlTC
will be placed.
API Validation and domains
Cookie Control will attempt to verify your apiKey
and product
automatically against the current domain that its being run on to ensure your license is being used as intended.
For community editions, only the single domain that you registered will pass; for example https://mydomain.com or https://www.mydomain.com
For pro editions, the single domain that you registered will pass, along with any subdomains; for example https://mydomain.com or https://sub.mydomain.com
For pro multisite editions, all domains that you have registered will pass, along with any subdomains.
Log Cookie Consent in RESPONSUM
To capture consent preferences of website visitors in a consent log within RESPONSUM, it is necessary to place the script snippets that can be found in RESPONSUM under Configuration >> Integrations >> Cookie Consent Management
These snippets should be placed in the OnAccept
and OnReject
Callback functions of Cookie Control for each Cookie Category you want RESPONSUM to capture the consents for. (See more info under “Purpose Object (Cookie Category)” topic)