.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
5 Emerging Data Privacy Trends in 2025
Heraclitus said that “The only constant in life is change,” but...
Read Now
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
',
},
elements: {
pictureOfCat: '<img href="http://placekitten/300/300" />',
},
content: {
header: 'My awesome cat popup!'
}
});
layout (string)
Default: basic
The layout type refers to how the tool is rendered. See layouts above.
Position and Theme options
position (string)
Default: bottom
Position is used to describe where on the screen your popup should display. We also use ‘position’ to assume the shape of your popup. If you specify ‘top’ or ‘bottom’, we assume that a full width ‘banner’ is required. If however you specify a horizontal direction, we assume that a corner popup is required (which we call ‘floating’).
We add CSS classes ‘cc-banner’ if the popup displays as a banner, and ‘cc-floating’ if the popup displays as a floating window.
- top, bottom – Banner
- top-left, top-right, bottom-left, bottom-right – Floating
theme (string)
Default: block
Cookie Consent is themed, so users can create their own themes. The chosen theme is added to the popup container as a CSS class in the form of .cc-style-THEME_NAME. Available styles:
- block (default)
- edgeless
- classic
Palette options
Colours can be defined in additional stylesheets or using attributes.
palette (object)
Default: null
If palette is set to null, colours have to be defined in CSS.
To pass the colours using attributes, use:palette: {
popup: {background: '#000000', text: '#fff', link: '#fff'},
button: {background: 'transparent', border: '#f8e71c', text: '#f8e71c'},
highlight: {background: '#f8e71c', border: '#f8e71c', text: '#000000'},
}
Highlight is optional and extends `button`. if it exists, it will apply to the rightmost button.
Only background needs to be defined for every element. If text or border colour is not set, it will be calculated from the background colour.
Revoke options
Some countries require consent to be revokable. Cookie Consent keeps track of these countries and adds a button to review the consent window.
revokable (boolean)
Default: false
If set true, revoke button is displayed every time. If false, revoke button is only displayed for advanced compliance options (opt-in and opt-out) and in countries that require revokable consent. The latter can be disabled by _regionalLaw _below.
revokeBtn (string)
Default: <div class=”cc-revoke ”>Cookie Policy</div>
This is the html for the revoke button. This only shows up after the user has selected their level of consent.
animateRevokable (boolean)
Default: true
If true, the revocable button will translate in and out. Disabled by default for mobile devices.
Behaviour options
showLink (boolean)
Default: true
Used to disable link on existing layouts. If false, replaces element messagelink with message and removes content of link.
static (boolean)
Default: false
The popup uses position fixed to stay in one place on the screen despite any scroll bars. This option makes the popup position static so it displays at the top of the page. A height animation has also been added by default so the popup doesn’t make the page jump, but gradually grows and fades in.
dismissOnScroll (false | integer)
Default: false
To disable, set to “false”. To enable, set to the number of pixels a user must scroll vertically in order to trigger the dismiss.
dismissOnTimeout (boolean | integer)
Default: false
Set value as time in milliseconds to autodismiss after set time.
dismissOnWindowClick (boolean)
Default: false
Set value as true to automatically consent when the user clicks anywhere.
ignoreClicksFrom (array of strings)
Default: [‘cc-revoke’, ‘cc-btn’]
An array of class names only used with `dismissOnWindowClick`. Add a class name here to ignore clicks from that element.
autoOpen (boolean)
Default: true
This automatically opens the popup if the user hasn’t made a decision yet.
autoAttach (boolean)
Default: true
The tools HTML is automatically appended to the container by default. If you set this to false, you must attach it yourself:var instance = new cookieconsent.Popup(options);
document.body.appendChild(instance.element);
whitelistPage (array) Default: []blacklistPage (array) Default: []
If set, cookie consent will not be displayed pages defined here. Specify pages using string or RegExp.
- using a string : ‘/index.html’ (matches ‘/index.html’ exactly)
- using RegExp : /\/page_[\d]+.html/ (matched ‘/page_1.html’ and ‘/page_2.html’ etc)
overrideHTML (string)
Default: null
If this is defined, then it is used as the inner html instead of layout. This allows for ultimate customisation.
Be sure to use the classes `cc-btn` and `cc-allow`, `cc-deny` or `cc-dismiss`. They enable the app to register click handlers. You can use other pre-existing classes too.
Callback hooks
Called at certain points in the program execution
onPopupOpen: function() {}
This is called when the popup is opened. It can be used to trigger an animation, or to attach extra handlers, etc.
onPopupClose: function() {}
This is called when the popup is closed. It can be used to clean up commands from onPopupOpen
onInitialise: function(status) {}
This is called on start up, with the current chosen compliance. It can be used to tell you if the user has already consented or not as soon as you initialise the tool.
onStatusChange: function(status, chosenBefore) {}
This is called any time the status is changed. This can be used to react to changes that are made to the compliance level. You can use the popup instance functions from within these callbacks too. I.E. ‘this.hasAnswered()’ and ‘this.hasConsented()’.
onRevokeChoice: function() {}
This is called when the user clicks the ‘revoke’ button. This means that their current choice has been invalidated.
Hooks can be used to disable cookies when consent is not given, and the generally extend the tool.
Location options
The location services are disabled by default. You are encouraged to implement a handler to your own service, rather than using the free ones provided.
To enable the basic location services, set ‘location’ to ‘true’. To add you own services or configure the order or execution, pass an object with configuration properties.
location.timeout (array)
Default: 5000 (milliseconds)
We can’t react to errors from script tag resources, so we set a timeout. If we don’t have the answer after 5000ms, try the next service.
location.services (array)
Default: [‘ipinfo’]
This array defines the services that you want to use. We attempt to get the country code from the first service, and only if the service fails do we move onto the next service. If all services fail, the popup is opened without modification.
If a service succeeds, then the two letter country code is passed to the ‘Law’ module, with changes your popup options depending on the cookie laws in the country code.
location.serviceDefinitions (object)
This can be used to define new services via a key, but new services they can also go straight into the ‘services’ array in an ad-hoc fashion. It is recommended that you define services in ‘serviceDefinitions’ and use ‘services’ to configure priority between services
Law options
law.countryCode (boolean)
Default: null
Rather than getting the country code from the location services, you can hard code a particular country into the tool.
law.regionalLaw (boolean)
Default: true
If false, then we only enable the popup if the country has the cookie law. We ignore all other country specific rules.