Support Buy Plugin

Introduction Last updated: Jan 26, 2022

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:

  • Light-weight
  • Dark/Light Mode Theme
  • Show OR Hide Elements
  • Options to opt in/out
  • Allow Necessary Cookies
  • Consent Withdrawal
  • Inject Scripts
  • Browser Support(Including IE10)

Get Plugin

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

Changelog

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 purchasing the plugin go to downloads page and download the plugin. 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/
							|-- es5/
							|   |-- cookienoticepro.script.js
							|   `-- index.html
							|-- es6/
							|   |-- cookienoticepro.script.js
							|   `-- index.html
							|-- vendors/
							|   `-- jquery.min.js/
							`-- style/
							    `-- style.css
Folder & File Description:
ES5 Contains the compiled version of ES6 Javascript Code. The code is compiled using Babel online compiler. Know more about ES5 Vs ES6.
ES6 This folder contains the ES6 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 .
Vendors This folder contains jquery.min.js. If your project already has jQuery imported, you can ignore this folder.
Style This file contains the stylesheet or CSS of plugin.

Integrations

Depending on your requirements, you can either use the ES6 version code or ES5 version code. Before using ES6 or ES5 make sure you know about the Browser Support and Differences between them.

If you are using webpack or gulp or any other JS compiling plugin or bundler, then you can use the ES6 version of code. Make sure you add the path of the file in config of that bundler.

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();
                        });

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. 

								
									var 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. 

							
								var 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 

							
								var 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
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 

							
								var 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)
									.....
									..... 
								}
Display or Hide Elements Settings:
Option Defult Value Values Description
displayPosition left left | right | top | bottom Display position of the cookie consent banner.
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. 

							
								var 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

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. 

							
								var 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: 

							
								var 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.

Should I use ES5 code or ES6 code?

The plugin has two versions of code viz ES5 & ES6. If you would like the plugin to work in IE and other old browsers, you can use ES5 code. If you would like to support only Modern Browsers like EDGE, Chrome, Safari, Opera, Firefox you can use ES6 code. Check Browser Support(ES5/ES6)

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.