Cookies Consent JS

Version: 1.0

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 is ready to use with Google Analytics.

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="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 and set the parameters.

<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, top-center, bottom, bottom-left, bottom-right, bottom-center.
Default: bottom-left
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 in which the buttons will be displayed.accept, reject, settings, info, dismiss
Default: accept
denylistPagesList of pages that will be exluded of showing the cookies message.
hideDescriptionDetermines if the description of the cookies in the settings window appears collapsed or visible.true, false
Default: true
mainWindowSettingsSet 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
animationDetermines if the window will be shown with an animation. This does not affect the information and settings windows.true, false
Default: true
contentParameters that define the message content.See below
cookiesParameters that define the custom cookies.See below
callbackFunctions 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

ParameterDescriptionValues
titleTitle of the cookies message.Default: Cookies compliance
messageText of the cookies message.Default: We use cookies
alignAlignment of the content (title and message, not 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 open to select custom cookies.Default: “Settings”
settingsHeaderText that will be shown in the header of the settings window. It is possible to specify HTML code.
settingsFooterText that will be shown in the footer of the settings window. It is possible to specify HTML code.
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 button. By clicking this button the information window will be open.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. A name without spaces or special characters is recommended.The cc_ga name is reserved to associate the cookie to Google Analytics.
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
onLoadOnly 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
codeOnly applicable to a cookie associated to Google Analytics. Google Analytics code for global site tag (gtag.js).

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

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

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