- Create a .js file (e.g. cookieconsent-init.js) and import it in your html page

`html





`

- Configure the plugin inside cookieconsent-init.js

`javascript
// obtain plugin
var cc = initCookieConsent();

// run plugin with your configuration
cc.run({
current_lang: 'en',
autoclear_cookies: true, // default: false
page_scripts: true, // default: false

// mode: 'opt-in' // default: 'opt-in'; value: 'opt-in' or 'opt-out'
// delay: 0, // default: 0
// auto_language: null // default: null; could also be 'browser' or 'document'
// autorun: true, // default: true
// force_consent: false, // default: false
// hide_from_bots: false, // default: false
// remove_cookie_tables: false // default: false
// cookie_name: 'cc_cookie', // default: 'cc_cookie'
// cookie_expiration: 182, // default: 182 (days)
// cookie_necessary_only_expiration: 182 // default: disabled
// cookie_domain: location.hostname, // default: current domain
// cookie_path: '/', // default: root
// cookie_same_site: 'Lax', // default: 'Lax'
// use_rfc_cookie: false, // default: false
// revision: 0, // default: 0

onFirstAction: function(user_preferences, cookie){
// callback triggered only once
},

onAccept: function (cookie) {
// ...
},

onChange: function (cookie, changed_preferences) {
// ...
},

languages: {
'en': {
consent_modal: {
title: 'We use cookies!',
description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. Let me choose',
primary_btn: {
text: 'Accept all',
role: 'accept_all' // 'accept_selected' or 'accept_all'
},
secondary_btn: {
text: 'Reject all',
role: 'accept_necessary' // 'settings' or 'accept_necessary'
}
},
settings_modal: {
title: 'Cookie preferences',
save_settings_btn: 'Save settings',
accept_all_btn: 'Accept all',
reject_all_btn: 'Reject all',
close_btn_label: 'Close',
cookie_table_headers: [
{col1: 'Name'},
{col2: 'Domain'},
{col3: 'Expiration'},
{col4: 'Description'}
],
blocks: [
{
title: 'Cookie usage 📢',
description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full privacy policy.'
}, {
title: 'Strictly necessary cookies',
description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
toggle: {
value: 'necessary',
enabled: true,
readonly: true // cookie categories with readonly=true are all treated as "necessary cookies"
}
}, {
title: 'Performance and Analytics cookies',
description: 'These cookies allow the website to remember the choices you have made in the past',
toggle: {
value: 'analytics', // your cookie category
enabled: false,
readonly: false
},
cookie_table: [ // list of all expected cookies
{
col1: '^_ga', // match all cookies starting with "_ga"
col2: 'google.com',
col3: '2 years',
col4: 'description ...',
is_regex: true
},
{
col1: '_gid',
col2: 'google.com',
col3: '1 day',
col4: 'description ...',
}
]
}, {
title: 'Advertisement and Targeting cookies',
description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
toggle: {
value: 'targeting',
enabled: false,
readonly: false
}
}, {
title: 'More information',
description: 'For any queries in relation to our policy on cookies and your choices, please contact us.',
}
]
}
}
}
});
`


`html







`


- accepted_categories: string or string[]
- rejected_categories: string[] - optional

Note: all categories marked as readonly will ALWAYS be enabled/accepted regardless of the categories provided inside the .accept() API call.

Examples:

`javascript
cookieconsent.accept('all'); // accept all categories
cookieconsent.accept([]); // accept none (reject all)
cookieconsent.accept('analytics'); // accept only analytics category
cookieconsent.accept(['cat_1', 'cat_2']); // accept only these 2 categories
cookieconsent.accept(); // accept all currently selected categories inside modal

cookieconsent.accept('all', ['analytics']); // accept all except "analytics" category
cookieconsent.accept('all', ['cat_1', 'cat_2']); // accept all except these 2 categories
`

How to later reject a specific category (cookieconsent already accepted)? Same as above:

`javascript
cookieconsent.accept('all', ['targeting']); // opt out of targeting category
`


`javascript
// ...
toggle: {
value: 'analytics', // cookie category
enabled: false, // default status
readonly: false // allow to enable/disable
// reload: 'on_disable', // allows to reload page when the current cookie category is deselected
}
// ...
`

Example:
`javascript
// Check if user accepts cookie consent with analytics category enabled
if (!cookieconsent.allowedCategory('analytics')) {
// yoo, you might want to load analytics.js ...
};
`


`javascript
// Example: check if '_gid' cookie is set
if (!cookieconsent.validCookie('_gid')) {
// yoo, _gid cookie is not set, do something ...
};
`


- cookie_names: string[]
- path: string - optional
- domains: string[] - optional

Examples:

`javascript
cookieconsent.eraseCookies(['cc_cookies']); // erase "cc_cookie" if it exists
cookieconsent.eraseCookies(['cookie1', 'cookie2']); // erase these 2 cookies

cookieconsent.eraseCookies(['cc_cookie'], "/demo");
cookieconsent.eraseCookies(['cc_cookie'], "/demo", [location.hostname]);
`


`javascript
cookieconsent.loadScript('https://www.google-analytics.com/analytics.js', function(){
// Script loaded, do something
});
`
How to load scripts with custom attributes:
`javascript
cookieconsent.loadScript('https://www.google-analytics.com/analytics.js', function(){
// Script loaded, do something
}, [
{name: 'id', value: 'ga_id'},
{name: 'another-attribute', value: 'value'}
]);
`


The .set() method allows you to set the following values:
- data (used to save custom data inside the plugin's cookie)
- revision

How to save custom data:
`javascript
// Set cookie's "data" field to whatever the value of the value prop. is
cookieconsent.set('data', {value: {id: 21, country: "italy"}});

// Only add/update the specified props.
cookieconsent.set('data', {value: {id: 22, new_prop: 'new prop value'}, mode: 'update'});
`


The .get() method allows you to retrieve any of the fields inside the plugin's cookie:
`javascript
cookieconsent.get('level'); // retrieve all accepted categories (if cookie exists)
cookieconsent.get('data'); // retrieve custom data (if cookie exists)
cookieconsent.get('revision'); // retrieve revision number (if cookie exists)
`


The .getConfig() method allows you to read configuration options from the current instance:
`javascript
cookieconsent.getConfig('current_lang'); // get currently used language
cookieconsent.getConfig('cookie_expiration'); // get configured cookie expiration
// ...
`


The .getUserPreferences() returns the following object (for analytics/logging purposes):
`javascript
{
accept_type: string, // 'all', 'necessary', 'custom'
accepted_categories: string[], // e.g. ['necessary', 'analytics']
rejected_categories: string[] // e.g. ['ads']
}
`


- language: string
- force_update: boolean - optional

Example:
`javascript
cookieconsent.updateLanguage('it');
`

Note: language will change only if it is valid (already defined) and different from the current language!

You can also forcefully update the modals (useful if you dynamically change the content of the modals). Example:
`javascript
// Change content: e.g. modify modal title
cookieconsent.getConfig('languages').en.consent_modal.title = 'New title';

// Update changes
cookieconsent.updateLanguage('en', true);
`

This function will be executed:
- at the first moment that consent is given (just like onFirstAction)
- after every page load, if consent (accept or "reject" action) has already been given

parameters:
- cookie: contains the current value of the cookie

example:
`javascript
//...
cc.run({
// ...
onAccept: function(cookie){
// load somescript, google analytics ...
},
// ...
});
`


parameters:
- cookie: contains the current value of the cookie
- changed_categories: array of categories whose state (accepted/rejected) just changed

example:
`javascript
//...
cc.run({
// ...
onChange: function(cookie, changed_categories){
// cleanup logic ... (e.g. disable gtm if analytics category is disabled)
},
// ...
});
`


parameters:
- user_preferences: contains the same data provided by the .getUserPreferences() API
- cookie: contains the current value of the cookie

example:
`javascript
//...
cc.run({
// ...
onFirstAction: function(user_preferences, cookie){
console.log('User accept type:', user_preferences.accept_type);
console.log('User accepted these categories', user_preferences.accepted_categories)
console.log('User reject these categories:', user_preferences.rejected_categories);
},
// ...
});
`


`javascript
cookieconsent.run({
// ...,
languages: {
'en': {
consent_modal: {
title: 'Title here ...',
description: 'Description here ...',
primary_btn: {
text: 'Accept',
role: 'accept_all' // 'accept_selected' or 'accept_all'
},
secondary_btn: {
text: 'Settings',
role: 'settings' // 'settings' or 'accept_necessary'
}
},
settings_modal: {
title: 'Cookie preferences ...',
save_settings_btn: 'Save settings',
accept_all_btn: 'Accept all',
blocks: [
{
title: 'First block title ...',
description: 'First block description ...'
}, {
title: 'Second block title ...',
description: 'Second block description ...',
toggle: {
value: 'my_category1',
enabled: true,
readonly: true
}
}, {
title: 'Third block title ...',
description: 'Third block description ...',
toggle: {
value: 'my_category2',
enabled: false,
readonly: false
}
}
]
}
},
'it': {
consent_modal: {
title: 'Title in italian here ...',
description: 'Description in italian here ...',
primary_btn: {
text: 'Accept in italian',
role: 'accept_all' //'accept_selected' or 'accept_all'
},
secondary_btn: {
text: 'Settings',
role: 'settings' //'settings' or 'accept_necessary'
}
},
settings_modal: {
title: 'Cookie preferences ...',
save_settings_btn: 'Save settings in italian',
accept_all_btn: "Accept all",
blocks: [
{
title: 'First block title in italian ...',
description: 'First block description in italian ...'
}, {
title: 'Second block title in italian ...',
description: 'Second block description in italian...',
toggle: {
value: 'my_category1',
enabled: true,
readonly: true
}
}, {
title: 'Third block title in italian ...',
description: 'Third block description in italian...',
toggle: {
value: 'my_category2',
enabled: false,
readonly: false
}
}
]
}
}
}
});
`

NOTE: If you want to also use autoclear_cookie, make sure the first column of the cookie table contains the name of the cookie.

Check demo app.js which has a full example with cookie table.

Either manually add the following class c_darkmode to the body/html tag, or toggle it via javascript:
`javascript
document.body.classList.toggle('c_darkmode');
`

Create a button (or link) with data-cc="c-settings" attribute:
`javascript
Cookie Settings
`

`javascript
document.documentElement.getAttribute('lang');
`

and then set it as current_lang value like this:

`javascript
cookieconsent.run({
// ...
current_lang: document.documentElement.getAttribute('lang'),
// ...
});
`

Note: make sure that the lang attribute's value format (example: 'en' => 2 characters) is identical to the ones you defined. If you have 'en-US' as lang attribute, make sure to also specify 'en-US' (and not just 'en') in the config. parameters.

Suppose you have a analytics.js file you want to load after the analytics category has been accepted:
-

1. enable force_consent option:
`javascript
cookieconsent.run({
// ...
force_consent: true,
// ...
});
`
2. That should do it. If you want to remove the weird horizontal jump (due to the scrollbar disappearing) you can add the following style inside the head tag of your page:
`html

`
For a full example check the second demo.


1. Specify the table structure via the cookie_table_headers property inside settings_modal object:

Example with 3 columns:

`javascript
// ...
cookie_table_headers: [
{col1: "Name"},
{col2: "Source"},
{col3: "Description"},
]
// ...
`

2. Now you can create a cookie_table array of objects:

`javascript
// ...
cookie_table: [
{
col1: '_ga',
col2: 'google.com',
col3: 'description ..',
},
{
col1: '_gid',
col2: 'google.com',
col3: 'description ..',
}
]
// ...
`

Check the examples above for a valid implementation.


1. Create a new component: CookieConsent.js

`javascript
import { useEffect } from "react";

import "./";
import "./";

export default function CookieConsent() {
useEffect(() => {
const cc = window.initCookieConsent();

cc.run({
// your config
});

}, []);

return null;
}
`

2. Import the component only once (generally in your main/root component like App.js or index.js)

`javascript
import CookieConsent from "./";

export default function App() {
return (