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.

Support the project

By supporting the project I can dedicate more time to its development and add new improvements, or you can simply show your appreciation.


Basic usage

Adding libraries

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

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

Place the following 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.

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

Parameters

Basic configuration

ParameterDescriptionValues
expirationDaysSpecifies the number of days the cookie will be valid. If not specified, the cookie is deleted when the browser is closed.
pathTells the browser what path to the directory the cookie belongs to.Absolute path.
Default: “/”
sameSiteAllows 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
positionPosition where the cookies message will be placed.top, top-left, top-right, bottom, bottom-left, bottom-right.
Default: top
btnDismissPositionPosition where the dismiss button will be placed.top-left, top-right, bottom-left, bottom-right
Default: bottom-left
buttonsList of buttons that will be shown. The order in the array determines the order of the buttons.accept, reject, settings, info, dismiss
Default: accept
contentParameters that define the message content.See below
cookiesParameters that define the custom cookies.See below
denylistPagesList of pages that will be exluded of showing the cookies message.
callbackFunctions that will be invoked for some actions: first load, every load, after accepting cookies and after rejecting cookies.See below

Content parameters

ParameterDescriptionValues
titleTitle of the cookies message.Default: Cookies compliance
messageText of the cookies message.Default: We use cookies
alignAlignment of the whole content (title, message and buttons).left, right, center
Default: left
policyText for the privacy policy link. If it is not specified it will not be shown.
policyLinkLink to the privacy policy. If it is not specified the text will not be shown.
btnAcceptText for the accept button. By clicking this button all the cookies will be accepted.Default: “Accept all”
btnRejectText for the reject button. By clicking this button all the cookies will be rejected.Default: “Reject all”
btnDismissText 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”
btnSettingsText for the settings button. By clicking this button the settings popup will be opened to select custom cookies.Default: “Settings”
btnSettingsSelectAllText for the select all button placed in the settings popup.Default: “Select all”
btnSettingsUnselectAllText for the unselect all button placed in the settings popup.Default: “Unselect all”
btnSettingsAcceptText for the accept selection button placed in the settings popup.Default: “Accept selection”
btnInfoText for the information.Default: “More info”
infoText that will be shown in the information popup. It is possible to specify HTML code.

Custom cookies parameters

ParameterDescriptionValues
nameName by which the browser will identify the cookie.
descriptionText that will be shown in the settings popup to describe the cookie. It is possible to specify HTML code.
checkedInitial state of the cookie checkbox.true, false
Default: false
disabledAllow or not to interact with the checkbox.true, false
Default: false

Callback functions

ParameterDescription
first_loadThis function will be invoked when the user visits the page and has not neither accepted nor rejected the cookies message.
acceptThis function will be invoked when the user clicks on the accept all or accept settings buttons.
rejectThis function will be invoked when the user clicks on the reject button.
loadThis function will be invoked every time a user that interacted previously with the cookies message (accepting or rejecting) visits the page.

Methods

ParameterDescription
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 the cookies created for this page.