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:

• WordPress
• Joomla
• Drupal

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 license apikey: The apikey of your license callback (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)