Support Buy Plugin

Introduction Last updated: 7th November, 2024

Cookie Notice Pro is a light-weight jQuery plugin, helps you to comply with GDPR. Make your own cookie information popup in minutes. Highly customisable plugin width different layouts and millions colors to choose from. The General Data Protection Regulation (GDPR) applies to all websites with users from the EU. Build trust with your website users while living up to current data protection legislation and avoid potential non-compliance fines.

Cookie Notice Pro - jQuery Plugin | Flerosoft Cookie Notice Pro - jQuery Plugin | Flerosoft

Features

Below are some features which make Cookie Notice Pro plugin standout when compared with other plugins.

Why Purchare Cookie Notice Pro:
  • Millions colors to choose from
  • Responsive Design With Many Layout Options
  • Easy customization No Coding
  • Quick Support By Flerosoft
  • Simple & Rich Documentation
  • Free Future Updates

Functionalities

Cookie Notice Pro comes with many functionalities. Some of the them are listed below:

  • Consent Withdrawal
  • Supports Google Consent Mode v2
  • Light-weight
  • Dark/Light Mode Theme
  • Show OR Hide Elements
  • Options to opt in/out
  • Allow Necessary Cookies
  • Inject Scripts
  • Browser Support

Get Plugin

You can buy the source code of Cookie Notice Pro from Flerosoft

Changelog

v2.2.1 - 12th December, 2024

Added functionality of changing the position of minimized cookie icon. Added new config variable minimizedIconDisplayPosition

Files edited:

  • /cookienoticepro.script.js Added new config variable minimizedIconDisplayPosition New to set the position of minimized cookie icon
  • /cookienoticepro.style.css Updated css for minimize icon as per new introduced config

v2.1.1 - 7th November, 2024

  • Files edited: /cookienoticepro.script.js Added support for passing custom config options during init() to customize Cookie Notice Pro settings

v2.0.1 - 10th March, 2024

  • Files edited: /cookienoticepro.script.js Fixed consent mode v2 event not firing

v2.0.0 - 4th March, 2024

  • Updated cookie names:
    • cnp_consent Updated: Cookie to store default consent (Accept/Reject)
    • cnp_prefs Updated: Cookie to store accepted preferences
    • cnp_gconsent_ad_prefs New: Cookie to store google consent mode v2 ad prefs
    • cnp_gconsent_analytics_storage New: Cookie to store google consent mode v2 analytics storage
  • Removed /es5 folder
  • Files edited: /cookienoticepro.script.js and /cookienoticepro.style.css and /index.html
  • Added inbuilt support for Google Consent Mode v2 (Setup )
  • Added minimize support: post consent accept/reject banner will be minimized with a floating cookie icon. User will be able to change preference by clicking on it. Can be configured by editing config enableMinimize
  • Code cleanup and other minor fixes

v1.1.2

  • Date: 29 June, 2022
  • Files edited: /es5/cookienoticepro.script.js and /es6/cookienoticepro.script.js
  • Popup not opening properly when using cookieNoticePro.reinit() fixed
  • Multiple events firing when using cookieNoticePro.reinit() fixed
  • Added new feature to by default keep all the cookie settings checkboxes checked or unchecked: Config allCheckboxesChecked: true|false

v1.1.1

  • Date: 26 Jan, 2022
  • Files edited: /es5/cookienoticepro.script.js and /es6/cookienoticepro.script.js
  • Added feature to hide or show cookie icon in popup consent
  • Config showCookieIcon: true|false

v1.0.1

  • Date: 21 May, 2021
  • Files edited: /es5/cookienoticepro.script.js and /es6/cookienoticepro.script.js
  • Fixed popup banner showing even after accepting
  • Function updated: cookieExists
  • Removed the hardcoded privacy policy link and used the variable moreInfoBtnLink to add link for privacy policy page or cookie policy page

v1.0.1

  • Date: 13 May, 2021
  • Initial Release

Installation

After downloading, extract it. The folder structure and details about each file is explained below.

Warning

Some code snippets in the documentation might in ES6 syntax which does not works in IE browser and other old browsers. Make sure you compile your code using compilers like Babel or webpack or gulp or any other JS compiler/bundler if you want to support IE and other old browsers.

Folder Structure

Cookie Notice Pro:
cookieNoticePro
|-- cookienoticepro.script.js
|-- style.css
|-- index.html
File Description:
cookienoticepro.script.js This file contains the javascript code. The plugin is written in ES6 i.e using arrow and other higher order javascript functions which works only in modern browsers. Check ES6 browser support .
cookienoticepro.style.css This file contains the stylesheet or CSS of plugin.
index.html This file contains the sample init code which has to be placed in head of every page.

Integrations

Tip

Internet Explorer does not support ECMAScript 2015 or ES6. Use Babel compiler to convert ECMAScript 2015+ or ES6 code into a backwards compatible version of JavaScript in current and older browsers or environments.

How To Integrate:

The bare minimum for using Cookie Notice Pro on a web page is linking to the plugin javascript and the styles.

  1. Download the code and add the JS script and CSS styles.
  2. Link the CSS and JS files.
<head>
	<script src="cookienoticepro.script.js"></script>
	<link rel="stylesheet" href="cookienoticepro.style.css">
</head>

Initialization

Once you have added the link path of necessary JS or CSS files, you can initialize the plugin either by using JS or jQuery using the onload methods.

jQuery Initialization: 
$( document ).ready(function() {
   cookieNoticePro.init();
});
Javascript Initialization: 
window.addEventListener('load', function (event) {
   cookieNoticePro.init();
});

You can also pass config options to customize the popup settings during initialization:

$(document).ready(function() {
   cookieNoticePro.init({
      themeSettings: {
         primaryColor: "#FFA500",
      },
      showSettingsBtn: false,
      showCloseIcon: true,
   });
});

If no config options are provided, the plugin will use the default settings.

Note

There is already initialization code in the index.html file.

Configuration

Cookie Notice Pro plugin is highly customisable. You can customise the position, layout, add or remove elements, use dark or light mode, change the primary colors from millions of available colors as per your needs and requirements.

You need to edit the values of config object present in cookienoticepro.script.js file. 

const config = {
	.....
	.....
	.....
}

Theme & Colors

Change the color code as per need of your website. You can also choose between dark and light mode. You will find the settings in config object. 

const config = {
	themeSettings: {
	  primaryColor: "#115cfa", // Primary Color of Popup Banner
	  darkColor: "#3b3e4a", // Dark Theme Color
	  lightColor: "#ffffff", // Light Theme Color
	  themeMode: "dark", // Theme Mode (light|dark)
	},
	.....
	.....
}
Theme & Colors Configuration:
Option Defult Value Values Description
primaryColor #115cfa Any hex/rgb/rgba color code The accent color of plugin. You can change it to match the primary color of your website.
darkColor #3b3e4a Any hex/rgb/rgba color code The background color of dark theme.
lightColor #ffffff Any hex/rgb/rgba color code The background color of light theme. Default is white.
themeMode light light | dark Plugin theme mode dark or light

Toggle Visibility

You can hide or show elements based on you needs and requirements. You will find the settings in config object. in cookienoticepro.script.js 

const config = {
	showSettingsBtn: true, // Hide or show the preference settings(true|false)
	showCloseIcon: false, // Hide or show the popup close icon(true|false)
	showDeclineBtn: true, // Hide or show the cookie decline button(true|false)
	.....
	.....
}
Display or Hide Elements Settings:
Option Defult Value Values Description
enableMinimize New true true | false Enable minimized floating cookie icon to adjust preferences
showCookieIcon true true | false Hide/Show Cookie icon in popup consent
showSettingsBtn false true | false The gear icon which opens the cookie preferences selection menu checkbox
showCloseIcon false true | false The close popup icon on upper left of the popup banner.
showDeclineBtn false true | false Cookie reject or decline button.
allCheckboxesChecked false true | false Cookie settings checkboxes checked or unchecked bydefault.

Position & Others

Settings related to banner position, width, expiry date of cookie and delay in showing popup banner. You will find the settings in config object. in cookienoticepro.script.js 

const config = {
	displayPosition: "left", // Where popup should appear(top|right|bottom|left)
	fullWidth: true, // Full width popup works only when "displayPosition" is set to top/bottom
	delay: 2000, // After how much time should popup appear(2000 is equal to 2 seconds)
	expires: 365, // Expiry date of cookie(365 is equal to 365 days)
	moreInfoBtnLink: "/privacy-policy/", // Learn more link(default: privacy policy page)
	.....
	.....
}
Option Defult Value Values Description
enableGoogleConsentMode New false true | false Add support for Google consent mode v2 ( Help Article )
displayPosition right left | right | top | bottom Display position of the cookie consent banner.
minimizedIconDisplayPosition New right left | right  Display position of the minimized cookie icon.
fullWidth false true | false The popup banner should be of full-width or not. Full width popup works only when displayPosition is set to top or bottom.
delay 2000 Milliseconds The delay time in milliseconds to show cookie banner.
Note: (1sec = 1000ms)
expires 365 Number of Days Expiry date of accepted cookie
Note: 365 = 365 days
moreInfoBtnLink /privacy_policy/ path/link Link of privacy policy or cookie policy page

Textual Changes

From title text to button text, you can change the text value of all the elements or items as per your requirements. 

const config = {
	title: "Cookie Consent", // Title of popup bannner
	description: "We use cookies to make your experience better. By using and further navigating this website you accept this.", // Message
	settingsBtnLabel: "Customize", // Text of settings button
	acceptBtnLabel: "Accept", // Accept cookie button text
	declineInfoBtnLabel: "Decline", // Decline cookie button text
	moreInfoBtnLabel: "Learn More", // More info link text
	cookieTypesTitle: "Select cookies to accept", // Title of cookie preference options
	necessaryCookieTypeLabel: "Necessary", // Label text of Necessary cookie item
	necessaryCookieTypeDesc: "These cookies are necessary for the website to function and cannot be switched off in our systems.", // Hover text of necessary cookies
	.....
	.....
}
Text Modifications:
Option Defult Value Description
title Cookie Consent Title of popup bannner
description We use cookies to make your experience better. By using and further navigating this website you accept this. Message or description
settingsBtnLabel Customize Text of settings button
acceptBtnLabel Accept Accept cookie button text
declineInfoBtnLabel Decline Decline cookie button text
moreInfoBtnLabel Learn More More info link text
cookieTypesTitle Select cookies to accept Title of cookie preference options
necessaryCookieTypeLabel Necessary Label text of Necessary cookie preference which shows up in cookie preferences selection
necessaryCookieTypeDesc These cookies are necessary for the website to function and cannot be switched off in our systems. Hover text of necessary cookies preference item which shows up in cookie preferences selection
floatingIconTooltip New Adjust my preferences Tooltip of floating cookie icon (Minimized)

Cookie Preferences

This is the advanced feature of cookie consent plugin. You can show the checkboxes which will allow the user to choose cookie types. Based on the selection, you can inject the necessary scripts in the <head>...</head> of your document/index.html.

Note

Edit this settings only if you would like to show CUSTOMIZE cookie preferences selection option in your cookie consent banner. You can hide or show the settings icon by changing the value of showSettingsBtn to true in config. 

const config = {
	cookieTypes: [
		// Cookie types, value and description (Cookie Preferences Selection)
		{
			type: "Preferences",
			value: "preferences",
			description: "Preference cookies enable a website to remember information that changes the way the website behaves or looks, like your preferred language or the region that you are in.",
		},
		{
			type: "Marketing",
			value: "marketing",
			description: "Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.",
		},
		{
			type: "Analytics",
			value: "analytics",
			description: "Analytics cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site.",
		},
	]
}

You can edit the text value of a particular preference item or you can also delete or add a new preference item which will show in cookie preference selection menu.

Adding A New Preference Item:

To add a new item, just add one more object in cookieTypes array. Example is given below: 

const config = {
	cookieTypes: [
		.....
		.....
		{
			type: "Targeting",
			value: "targeting",
			description: "Targeting cookies are used to identify visitors between different websites, eg. content partners, banner networks. Those cookies may be used by companies to build a profile of visitor interests or show relevant ads on other websites.",
		},
	]
	.....
	.....
}

Injecting Analytics or Other Scripts in <head>...</head>:

You can inject your tracking and other scripts which uses cookies in <head>...</head> of your document depending on the preferences selected by the user in customize settings menu.

Tip

This method is helpful if you are showing CUSTOMIZE cookie preferences selection menu option in your cookie consent banner. If you are not showing preferences selection menu, you can IGNORE this. 

<head>
	// Initialize Cookie Notice Pro
	$( document ).ready(function() {
		cookieNoticePro.init();
	});

	// Inject scripts if user accepts cookie types he is okay with
	// IMPORTANT: Add this code only if you are showing customize preference menu
	var injectScripts = function injectScripts(){
		// Example: Google Analytics
		if (cookieNoticePro.isPreferenceAccepted("analytics") === true) {
			console.log("Analytics Scripts Running....");
		}
		// Example: Google Adwords cookie, DoubleClick, Remarketing pixels, Social Media cookies
		if (cookieNoticePro.isPreferenceAccepted("marketing") === true) {
			console.log("Marketing Scripts Running....");
		}

		// Example: Remember password, language, etc
		if (cookieNoticePro.isPreferenceAccepted("preferences") === true) {
			console.log("Preferences Scripts Running....");
		}
	}
</head>

Danger

Make sure you edit/change values of cookie preferences items ONLY ONCE i.e first time when making it live as it will be stored in the browsers of the users. And changing the value again will make the retrival of old value set by user impossible.

Callbacks

The config object in file cookienoticepro.script.js has two callback functions.

  1. onConsentAccept: Executes when cookie is accepted
  2. onConsentReject: Executes when cookie is rejected

APIs

The API reference documentation provides detailed information for each of the methods provided by the plugin.

cookieNoticePro.init()

cookieNoticePro.init();

It is used to initialize the plugin. Read more about initialization.

cookieNoticePro.isAccepted()

cookieNoticePro.isAccepted();

Check if the consent is provided or not. Returns true if accepted else returns false.

Parameter : None

Returns : Boolean

Example:
>> cookieNoticePro.isAccepted();
true

cookieNoticePro.getPreferences()

cookieNoticePro.getPreferences();

Returns array of preferences accepted by the user. This is helpful when you are showing customize preferences options.

Parameter : None

Returns : Array

Example:
>> cookieNoticePro.getPreferences();
(3) ["preferences", "marketing", "analytics"]

cookieNoticePro.isPreferenceAccepted()

cookieNoticePro.isPreferenceAccepted();

Check if particular preference item is accepted or not. This is helpful when you are showing customize preferences options. It requires parameter CookieTypeValue. Read more about Preferences Menu.

Parameter : CookieTypeValue

Returns : Boolean

Example:
>> cookieNoticePro.isPreferenceAccepted("analytics");
true

Tip

This method is helpful if you are showing CUSTOMIZE cookie preferences selection menu option in your cookie consent banner. If you are not showing preferences selection menu, you can IGNORE this.

cookieNoticePro.reinit()

cookieNoticePro.reinit();

It is used to re-initialize the plugin. It re-opens the popup banner with previously accepted preferences. It can be used for withdrawal of a particular type(analytics,marketing,etc) of consent or accepting a new preference item in menu.

Parameter : None

Returns : None

Tip

This method is helpful if you are showing CUSTOMIZE cookie preferences selection menu option in your cookie consent banner. If you are not showing preferences selection menu, you can IGNORE this.

Resources

Important links and other useful information which might be useful to make use of plugin more effectively.

Cookie Law

Cookies are text files with small pieces of data — like a username and password — that are used to identify your computer as you use a computer network. Specific cookies known as HTTP cookies are used to identify specific users and improve your web browsing experience.

Data stored in a cookie is created by the server upon your connection. This data is labeled with an ID unique to you and your computer.

When the cookie is exchanged between your computer and the network server, the server reads the ID and knows what information to specifically serve to you.

Javascript

FAQs

List of commonly asked questions and answers related to the plugin setup, configuration, and other important questions

Cookies

What is the EU cookie law?

The EU cookie law is, basically, all about what other people (i.e. websites, companies and service providers) are allowed to do with your digital data, what they can do with and what they can't do without your consent, for what purposes, and in what ways.

What are cookies?

Cookies are small pieces of data that are stored on your computer's browser. Think of the data as a cookie crumb; just not nearly as tasty. Cookies store information which of course means that the personal information of each and every website user can also be stored. Important to keep in mind is that In order to use this information in your marketing strategy, you have to collect cookie consent.

Do I need a cookie notice?

The General Data Protection Regulation (GDPR) applies to all websites with users from the EU.

What does GDPR say about cookies?

Under the GDPR, cookies that are not strictly necessary for the basic function of your website must only be activated after your end-users have given their explicit consent to the specific purpose of their operation and collection of personal data.

Plugin Related

What is Cookie Notice Pro?

Cookie Notice Pro is a light-weight jQuery plugin, helps you to comply with GDPR. Make your own cookie information popup in minutes. Highly customisable plugin width different layouts and millions colors to choose from.

How to make ES6 code work in IE and other old browsers?

You can use bundlers like Webpack or Gulp to compile your javascript code which will support the IE browser and other old browser versions. You can simply also use online compiler like Babeljs.io to convert your ES6 code into old browsers/IE compatible code.

Can Cookie Notice Pro plugin be configured to support Google Consent Mode v2?

Yes, Cookie Notice Pro can be configured to support Google Consent Mode v2. By utilizing the plugin's customizable consent management features alongside Google's gtag consent configuration, developers can ensure their websites comply with GDPR while still leveraging Google's analytics and advertising services. This integration allows for dynamic consent updates based on user preferences, ensuring a seamless and compliant user experience. For detailed instructions, refer to the plugin's documentation and Google's developer guides. Checkout Google Consent Mode v2 integration with Cookie Notice Pro

Does the Cookie Notice Pro plugin support consent modification and withdrawal??

Yes, the Cookie Notice Pro plugin supports both consent modification and withdrawal, allowing users to easily change their consent preferences at any time. This feature ensures that websites using the plugin can fully comply with GDPR requirements for user consent management, providing a transparent and user-friendly experience for managing privacy preferences. Checkout reinit()