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
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.
- Download the code and add the JS script and CSS styles.
- 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.
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.
onConsentAccept
: Executes when cookie is accepted
onConsentReject
: Executes when cookie is rejected
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.
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.
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.