Introduction

Lightweight Cookie Notice JS is a vanilla JavaScript script that provides an easy way to display a cookie notice on your website. It integrates a large number of customization options, support for multiple cookie categories, and geolocation.

Examples

• Cookie notice with sections and categories
• Cookie notice with toggle disabled in specific categories
• Cookie notice with cookies policy
• Cookie notice with custom logo in the modal window
• Cookie notice with sections, categories and list of cookies
• Cookie notice with sections, categories and lists of vendors
• Cookie notice displayed only to European users (Geolocation service: MaxMind GeoLite 2)
• Cookie notice displayed only to European users (Geolocation service: HostIP)
• Cookie notice in center position
• Cookie notice in top position
• Cookie notice in bottom position with one button
• A simple cookie notice in bottom position with the dismiss button
• Cookie notice in bottom position with colored mask
• Translucent cookie notice
• Cookie notice in bottom position with colored background and one button
• Cookie notice in bottom position with colored background and the dismiss button

Options

This script has a total of 100 options. To use an option, set its value during the initialization process.

lwcnCookieNotice.initialize({
  cookieNoticeMainMessageText: 'By clicking "Accept all cookies", you agree that our use of cookies.',
  cookieNoticeButton2Text: 'Accept all cookies',
});

Name	Type	Default	Description
headingsFontFamily	string	'\'Open Sans\', Helvetica, Arial, sans-serif'	The font family of the headings.
headingsFontWeight	number	600	The font weight of the headings.
paragraphsFontFamily	string	'\'Open Sans\', Helvetica, Arial, sans-serif'	The font family of the paragraphs.
paragraphsFontWeight	number	400	The font weight of the paragraphs.
strongTagsFontWeight	number	600	The font weight of the strong tags.
buttonsFontFamily	string	'\'Open Sans\', Helvetica, Arial, sans-serif'	The font family of the buttons.
buttonsFontWeight	number	400	The font weight of the buttons.
buttonsBorderRadius	number	4	The border radius of the buttons.
containersBorderRadius	number	4	The border radius of the containers.
cookieNoticeMainMessageText	string	Custom HTML	The text of the message displayed in the cookie notice.
cookieNoticeMainMessageFontColor	string	'#666666'	The font color of the message displayed in the cookie notice.
cookieNoticeMainMessageLinkFontColor	string	'#1e58b1'	The font color of the links included in the message displayed in the cookie notice.
cookieNoticeButton1Text	string	'settings'	The text of the button 1 of the cookie notice.
cookieNoticeButton1Action	string	1	The action performed after clicking the button 1 of the cookie notice. The possible values are: '0' (Disabled), '1' (Cookie Settings), '2' (Accept Cookies), '3' (Close Cookie Notice), '4' (Redirect to URL)
cookieNoticeButton1Url	string	''	The URL where the user will be redirected after clicking the button 1 of the cookie notice.
cookieNoticeButton1BackgroundColor	string	'#ffffff'	The background color of the button 1 of the cookie notice.
cookieNoticeButton1BackgroundColorHover	string	'#ffffff'	The background color of the button 1 in hover state of the cookie notice.
cookieNoticeButton1BorderColor	string	'#1e58b1'	The border color of the button 1 of the cookie notice.
cookieNoticeButton1BorderColorHover	string	'#1e58b1'	the border color of the button 1 in hover state of the cookie notice.
cookieNoticeButton1FontColor	string	'#1e58b1'	The font color of the button 1 of the cookie notice.
cookieNoticeButton1FontColorHover	string	'#1e58b1'	The font color of the button 1 in hover state of the cookie notice.
cookieNoticeButton2Text	string	'Accept'	The text of the button 2 of the cookie notice..
cookieNoticeButton2Action	number	2	The action performed after clicking the button 2 of the cookie notice. The possible values are: '0' (Disabled), '1' (Cookie Settings), '2' (Accept Cookies), '3' (Close Cookie Notice), '4' (Redirect to URL)
cookieNoticeButton2Url	string	''	The URL where the user will be redirected after clicking the button 2 of the cookie notice.
cookieNoticeButton2BackgroundColor	string	'#1e58b1'	The background color of the button 2 of the cookie notice.
cookieNoticeButton2BackgroundColorHover	string	'#1e58b1'	The background color of the button 2 in hover state of the cookie notice.
cookieNoticeButton2BorderColor	string	'#1e58b1'	The border color of the button 2 of the cookie notice.
cookieNoticeButton2BorderColorHover	string	'#1e58b1'	The border color of the button 2 in hover state of the cookie notice.
cookieNoticeButton2FontColor	string	'#ffffff'	The font color of the button 2 of the cookie notice..
cookieNoticeButton2FontColorHover	string	'#ffffff'	the font color of the button 2 in hover state of the cookie notice.
cookieNoticeButtonDismissAction	number	0	The action performed after clicking the dismiss button of the cookie notice.
cookieNoticeButtonDismissUrl	string	''	The action performed after clicking the dismiss button of the cookie notice.
cookieNoticeButtonDismissColor	string	'#646464'	the color of the dismiss button of the cookie notice.
cookieNoticeContainerPosition	number	2	The position of the cookie notice. The possible values are: '0' (Top), '1' (Center), '2' (Modal)
cookieNoticeContainerWidth	number	1140	The width of the wrapper that includes the content of the cookie notice.
cookieNoticeContainerOpacity	number	1	The opacity of the background of the cookie notice.
cookieNoticeContainerBorderWidth	number	0	The width of the border of the cookie notice.
cookieNoticeContainerBackgroundColor	string	'#ffffff'	The background color of the cookie notice.
cookieNoticeContainerBorderColor	string	'#e1e1e1'	The opacity of the background of the cookie notice.
cookieNoticeContainerBorderOpacity	number	1	The opacity of the border of the cookie notice.
cookieNoticeContainerDropShadow	boolean	true	The drop shadow of the container. The possible options are: '0' (Disabled), '1' (Enabled)
cookieNoticeContainerDropShadowColor	string	'#242f42'	The color of the mask displayed behind the cookie notice.
cookieNoticeMask	boolean	true	A mask placed behind the cookie notice to prevent user interactions with the website. The possible options are: '0' (Disabled), '1' (Enabled)
cookieNoticeMaskColor	string	'#242f42'	the color of the mask displayed behind the cookie notice
cookieNoticeMaskOpacity	number	0	The opacity of the mask displayed behind the cookie notice.
cookieNoticeShakeEffect	number	true	A shake effect will be applied on the cookie notice when the user click on the mask. The possible options are: '0' (Disabled), '1' (Enabled)
cookieSettingsLogoUrl	string	''	The URL of the logo.
cookieSettingsTitle	string	'Cookie Settings'	The title of the cookie settings modal window.
cookieSettingsDescriptionHeader	string	Custom HTML	The description displayed in the header of the cookie settings modal window provided as simple text or HTML.
cookieSettingsToggleOnColor	string	'#3a70c4'	The color of the active toggles displayed in the cookie settings modal window.
cookieSettingsToggleOffColor	string	'#808080'	The color of the inactive toggles displayed in the cookie settings modal window.
cookieSettingsToggleMiscColor	string	'#808080'	The color of the miscellaneous toggles displayed in the cookie settings modal window.
cookieSettingsToggleDisabledColor	string	'#e5e5e5'	The color of the disabled toggles displayed in the cookie settings modal window.
cookieSettingsSeparatorColor	string	'#e1e1e1'	The color of the borders.
cookieSettingsChevronColor	string	'#6e6e6e'	The color of the chevron icon displayed in the cookie settings modal window.
cookieSettingsExpandCloseColor	string	'#6e6e6e'	the color of the expand icon displayed in the cookie settings modal window.
cookieSettingsDescriptionFooter	string	Custom HTML	The description displayed in the footer of the cookie settings modal window.
cookieSettingsButton1Text	string	'Close'	The text of the button 1 of the cookie settings modal window.
cookieSettingsButton1Action	number	2	The action performed after clicking the button 1 of the cookie settings. The possible values are: '0' (Disabled), '1' (Accept Cookies), '2' (Close Cookie Settings), '3' (Redirect to URL)
cookieSettingsButton1Url	string	''	The URL where the user will be redirected after clicking the button 1 of the cookie settings modal window.
cookieSettingsButton1BackgroundColor	string	'#ffffff'	The background color of the button 1 of the cookie settings modal window.
cookieSettingsButton1BackgroundColorHover	string	'#ffffff'	The background color of the button 1 in hover status of the cookie settings modal window.
cookieSettingsButton1BorderColor	string	'#1e58b1'	The border color of the button 1 of the cookie settings modal window.
cookieSettingsButton1BorderColorHover	string	'#1e58b1'	The border color of the button 1 in hover state of the cookie settings modal window.
cookieSettingsButton1FontColor	string	'#1e58b1'	the font color of the button 1 of the cookie settings modal window.
cookieSettingsButton1FontColorHover	string	'#1e58b1'	the font color of the button 1 in hover state of the cookie settings modal window.
cookieSettingsButton2Text	string	'Accept'	The text of the button 2 of the cookie settings modal window.
cookieSettingsButton2Action	number	1	The action performed after clicking the button 2 of the cookie settings. The possible values are: '0' (Disabled), '1' (Accept Cookies), '2' (Close Cookie Settings), '3' (Redirect to URL)
cookieSettingsButton2Url	string	''	The URL where the user will be redirected after clicking the button 2 of the cookie settings modal window.
cookieSettingsButton2BackgroundColor	string	'#1e58b1'	The background color of the button 2 of the cookie settings modal window.
cookieSettingsButton2BackgroundColorHover	string	'#1e58b1'	This option determines the background color of the button 2 in hover state of the cookie settings modal window.
cookieSettingsButton2BorderColor	string	'#1e58b1'	the border color of the button 2 of the cookie settings modal window.
cookieSettingsButton2BorderColorHover	string	'#1e58b1'	The border color of the button 2 in hover state of the cookie settings modal window.
cookieSettingsButton2FontColor	string	'#ffffff'	The font color of the button 2 of the cookie settings.
cookieSettingsButton2FontColorHover	string	'#ffffff'	The font color of the button 2 in hover state of the cookie settings.
cookieSettingsHeadingsFontColor	string	'#222222'	The font color of the headings of the cookie settings modal window.
cookieSettingsParagraphsFontColor	string	'#666666'	The font color of the paragraphs of the cookie settings modal window.
cookieSettingsLinksFontColor	string	'#1e58b1'	The font color of the links of the cookie settings modal window.
cookieSettingsContainerBackgroundColor	string	'#ffffff'	The background color of the cookie settings modal window.
cookieSettingsContainerOpacity	number	1.0	The opacity of the background of the cookie settings.
cookieSettingsContainerBorderWidth	number	0	The width of the border of the cookie settings.
cookieSettingsContainerBorderColor	string	'#e1e1e1'	The border color of the cookie settings modal window.
cookieSettingsContainerBorderOpacity	number	1.0	The opacity of the cookie settings container border.
cookieSettingsContainerDropShadow	number	true	The drop shadow of the container. The possible options are: '0' (Disabled), '1' (Enabled)
cookieSettingsContainerDropShadowColor	string	'#242f42'	The color of the drop shadow of the cookie settings container.
cookieSettingsContainerHighlightColor	string	'#f8f8f8'	The highlight color of the cookie settings modal window.
cookieSettingsMask	number	true	A mask placed behind the cookie settings modal window to prevent user interactions with the website. The possible options are: '0' (Disabled), '1' (Enabled)
cookieSettingsMaskColor	string	'#242f42'	The color of the mask displayed behind the cookie settings modal window.
cookieSettingsMaskOpacity	string	0.54	The opacity of the mask displayed behind the cookie settings modal window.
enableGeolocation	number	false	The cookie notice will be displayed only to the users located in the countries defined with the geolocationLocale option. The possible options are: '0' (Disabled), '1' (Enabled)
geolocationService	number	0	The geolocation service used to detect the user location. The possible options are: '0' (hostIP), '1' (MaxMind GeoLite2)
geolocationLocale	array	[ 'at', 'be', 'bg', 'cy', 'cz', 'dk', 'ee', 'fi', 'fr', 'hu', 'ie', 'it', 'lv', 'lt', 'lu', 'mt', 'nl', 'pl', 'pt', 'sk', 'si', 'es', 'se', 'gb']	The list of countries where the cookie notice should be displayed. The countries should be specified with the ISO 3166-1 alpha-2 code.
responsiveBreakpoint	number	700	When the browser viewport width goes below this value, the mobile version of the cookie notice and cookie settings modal window will be used.
cookieExpiration	number	3153600000	The amount of time the cookies used to store the acceptance status and the accepted categories should be stored.
reloadPage	boolean	false	With this option enabled, when the user accepts the cookies, the page is reloaded.
cookieTableColumns	array	['name', 'expiration', 'purpose']	The columns included in the table used to display the cookies.
cookieTableColumnsNames	object	{ name: 'Name', expiration: 'Expiration', purpose: 'Purpose', provider: 'Provider', domain: 'Domain', type: 'Type', sensitivity: 'Sensitivity', security: 'Security', }	The names of the columns included in the table used to display the cookies.
forceCssSpecificity	boolean	true	The CSS specificity will be force with the "!important" rule. The possible options are: '0' (Disabled), '1' (Enabled)
ajaxUrl	string	'geolocation/init.php'	The URL used to retrieve the geolocation information when the GeoLite2 database is used.
sections	array	[]	The data associated with the cookie categories. Please see the examples included in this manual for more details.