Warning

This project is being continued by https://github.com/MetamorfosiLab/cookies-consent.

Version: 1.1

Cookies Consent JS

Cookies Consent JS is an easy-to-use javascript library to show the cookies consent message and manage the users consent according to the cookies law GDPR and ePrivacy Directive.

You can easily customize the design by changing the theme or creating a new one and it is ready to use with Google Analytics and Google Tag Manager.

Project web, documentation & support

Change log

Basic usage

Place the stylesheet links into the head before all other stylesheets to load the CSS.

<link href="cookiesconsent.min.css" rel="stylesheet">

Place the script near the end of your pages, right before the closing body tag.

<script src="cookiesconsent.min.js"></script>

Call the function after your scripts and set the parameters.

<script> const cc = CookiesConsentJS({ parameters }); </script>

Documentation / Examples

Example

const cc = CookiesConsentJS({
    expirationDays: 365,
    buttons : ["reject", "accept"],

    content : {
        title : "This website is using Cookies!",
        message : "<p>This web uses 3rd party cookies for statistical purposes that help us to improve the user experience.</p>",
        policy : "Privacy Policy",
        policyLink : "https://gdpr-info.eu/"
    },

    cookies : {
        my_first_cookie : {
            name : "my_first_cookie",
            title : "My first cookie",
            description : "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit metus facilisis sociis.</p>",
        }
    }
}

Themes

You can use one of the predefined themes or create your own by calling its stylesheet before calling the main stylesheet library.

<link href="themes/cookiesconsent.theme-smooth.css" rel="stylesheet">
<link href="cookiesconsent.min.css" rel="stylesheet">

Take a look at the themes

Parameters

General configuration

Key	Description	Values
expirationDays	Specifies the number of days the cookie will be valid. If not specified, the cookie is deleted when the browser is closed.
path	Tells the browser what path to the directory the cookie belongs to.	Absolute path. Default: “/”
sameSite	Allows you to declare if your cookie should be restricted to a first-party or same-site context. SameSite cookies – HTTP - MDN (mozilla.org)	lax, static, none Default: lax
position	Position where the cookies message will be placed.	top, top-left, top-right, top-center, bottom, bottom-left, bottom-right, bottom-center. Default: bottom-left
btnDismissPosition	Position where the dismiss button will be placed.	top-left, top-right, bottom-left, bottom-right Default: bottom-left
buttons	List of buttons that will be shown. The order in the array determines the order in which the buttons will be displayed.	accept, reject, settings, info, dismiss Default: accept
denylistPages	List of pages that will be exluded of showing the cookies message.
hideDescription	Determines if the description of the cookies in the settings window appears collapsed or visible.	true, false Default: true
mainWindowSettings	Set the settings window as the main. This window will be displayed when the page is accessed for the first time or when we click on the dismiss button to configure cookies.	true, false Default: false
animation	Determines if the window will be shown with an animation. This does not affect the information and settings windows.	true, false Default: true
content	Parameters that define the message content.	See below
cookies	Parameters that define the custom cookies.	See below
callback	Functions that will be invoked after some events: first load, every load, after accepting cookies and after rejecting cookies. Callback functions allow us to control the actions that must be executed depending on the state of the cookies.	See below

Content parameters

Configure the contents of the cookies message window.

Key	Description	Values
title	Title of the cookies message.	Default: Cookies compliance
message	Text of the cookies message.	Default: We use cookies
align	Alignment of the content (title and message, not buttons).	left, right, center Default: left
policy	Text for the privacy policy link. If it is not specified it will not be shown.
policyLink	Link to the privacy policy. If it is not specified the text will not be shown.
btnAccept	Text for the accept button. By clicking this button all the cookies will be accepted.	Default: “Accept all”
btnReject	Text for the reject button. By clicking this button all the cookies will be rejected.	Default: “Reject all”
btnDismiss	Text for the dismiss button. This button is shown when the cookies message is accepted or rejected. By clicking this button the cookies message will be shown.	Default: “Cookies policy”
btnSettings	Text for the settings button. By clicking this button the settings window will be open to select custom cookies.	Default: “Settings”
settingsHeader	Text that will be shown in the header of the settings window. It is possible to specify HTML code.
settingsFooter	Text that will be shown in the footer of the settings window. It is possible to specify HTML code.
btnSettingsSelectAll	Text for the select all button placed in the settings window.	Default: “Select all”
btnSettingsUnselectAll	Text for the unselect all button placed in the settings window.	Default: “Unselect all”
btnSettingsAccept	Text for the accept selection button placed in the settings window.	Default: “Accept selection”
btnInfo	Text for the information button. By clicking this button the information window will be open.	Default: “More info”
info	Text that will be shown in the information window. It is possible to specify HTML code.

Custom cookies parameters

Key	Description	Values
name	Name by which the browser will identify the cookie. A name without spaces or special characters is recommended.	The cc_ga and cc_gtm names are reserved to associate the cookie to Google Analytics and Google Tag Manager services.
title	Title or long name with which the cookie will be displayed in its description section.
description	Text that will be shown in the settings window to describe the cookie. It is possible to specify HTML code.
checked	Initial state of the cookie checkbox.	true, false Default: false
disabled	Allows to interact or not with the checkbox.	true, false Default: false
onLoad	Only applicable to a cookie associated to Google Analytics. Determines whether data collection is activated before the user has accepted or rejected cookies.	true, false Default: false
code	Only applicable to a cookie associated to Google Analytics. Google Analytics code for global site tag (gtag.js).

See example

Example

cookies : {
    profile : {
        name : "profile",
        title : "Profile cookies",
        description : "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit metus facilisis sociis.</p>",
    },
    preferences : {
        name : "prefs",
        title : "Preference cookies",
        description : "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit metus facilisis sociis.</p>",
        checked : true,
        disabled : true,
    },
    cc_ga : {
        name : "cc_ga",
        title : "Google Analytics",
        description : "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit metus facilisis sociis.</p>",
        code : "G-XXXXXXXXX"
    }
}

When using a Google Analytics service it is necessary to call the cc-ga.js module before the main library. See example

<script src="modules/cc-ga.js"></script>
<script src="cookiesconsent.min.js"></script>

When using Google Tag Manager service it is necessary to call the cc-gtm.js module before the main library. See example

<script src="modules/cc-gtm.js"></script>
<script src="cookiesconsent.min.js"></script>

Google third party services are activated and deactivated by removing their scripts from the website according to the visitor's choice but the data collecting settings of these services will depend on the administrator of the website from the google panels.

Callback functions

Key	Description
first_load	This function will be invoked when the user visits the page and has not neither accepted nor rejected the cookies message.
accept	This function will be invoked when the user clicks on the accept all or accept settings buttons.
reject	This function will be invoked when the user clicks on the reject button.
load	This function will be invoked every time a user that interacted previously with the cookies message (accepting or rejecting) visits the page.

See example

Methods

Key	Description
getStatus()	Returns true or false depending on whether the cookies message has ben answered or not.
getConfig()	Returns the whole cookies consent configuration.
showMessage()	Shows the cookies message.
removeCookies()	Remove all the cookies created for this page.

Previews

Take a look at the themes

Settings window