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

v3.0.0 14th October, 2025

Major Update Added multi-language support with automatic browser language detection

New Features:

• New Multi-language support for 5 European languages (English, French, German, Spanish, Italian)
• New Automatic browser language detection
• New Config option enableAutoLanguageDetection to enable/disable auto-detection
• New Config option language to manually set language
• New API method getLanguage() to get current active language
• New API method getSupportedLanguages() to get list of supported languages
• New Built-in translations system for all banner texts

Files edited:

• /cookienoticepro.script.js Added translations object and language detection logic

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

Folder Structure

Cookie Notice Pro:

cookieNoticePro
|-- cookienoticepro.script.js
|-- style.css
|-- index.html

File Description:

Integrations

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.

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:

Language Settings New in v3.0

Cookie Notice Pro now supports multiple languages with automatic browser language detection. The plugin automatically detects the user's browser language and displays the cookie banner in their preferred language.

Supported languages include: English (en), French (fr), German (de), Spanish (es), and Italian (it).

const config = {
	enableAutoLanguageDetection: true, // Enable/disable auto-detection of browser language
	language: "en", // Default language ('en', 'fr', 'de', 'es', 'it') - Will be auto-detected if enableAutoLanguageDetection is true
	.....
	.....
}

Language Configuration Options:

Example: Disable Auto-Detection and Set Spanish as Default

const config = {
	enableAutoLanguageDetection: false,
	language: "es", // Force Spanish language
	.....
	.....
}

Checking Current Language:

You can check which language is currently being used with the getLanguage() API method:

console.log(cookieNoticePro.getLanguage()); // Returns: "en", "fr", "de", "es", or "it"

Adding a New Language (e.g., Russian, Chinese, Japanese)

You can easily add support for additional languages by following these steps:

Step 1: Add Translation Object

In cookienoticepro.script.js, locate the translations object (around line 28) and add your new language. Use the ISO 639-1 language code.

Example: Adding Russian (ru)

const translations = {
  en: { /* English translations */ },
  fr: { /* French translations */ },
  de: { /* German translations */ },
  es: { /* Spanish translations */ },
  it: { /* Italian translations */ },

  // NEW: Add Russian translations
  ru: {
    title: 'Согласие на использование файлов cookie',
    description: 'Этот веб-сайт использует файлы cookie или аналогичные технологии для улучшения вашего опыта...',
    acceptBtnLabel: 'Принять',
    declineInfoBtnLabel: 'Отклонить',
    moreInfoBtnLabel: 'Политика конфиденциальности',
    settingsBtnLabel: 'Настроить',
    cookieTypesTitle: 'Выберите файлы cookie для принятия',
    necessaryCookieTypeLabel: 'Необходимые',
    floatingIconTooltip: 'Настроить мои предпочтения',
    necessaryCookieTypeDesc: 'Эти файлы cookie необходимы для работы веб-сайта...',
    cookieTypes: {
      preferences: {
        type: 'Предпочтения',
        description: 'Файлы cookie предпочтений позволяют веб-сайту...',
      },
      marketing: {
        type: 'Маркетинг',
        description: 'Маркетинговые файлы cookie используются...',
      },
      analytics: {
        type: 'Аналитика',
        description: 'Аналитические файлы cookie позволяют нам...',
      },
    },
  },
}

Step 2: Update Supported Languages Array

Find the detectBrowserLanguage() function (around line 233) and add your language code to the supportedLanguages array:

const detectBrowserLanguage = () => {
  const browserLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase()
  const langCode = browserLang.split('-')[0]

  // Add 'ru' to supported languages
  const supportedLanguages = ['en', 'fr', 'de', 'es', 'it', 'ru']
  return supportedLanguages.includes(langCode) ? langCode : 'en'
}

Step 3: Test Your New Language

// Force the new language to test
cookieNoticePro.init({
  enableAutoLanguageDetection: false,
  language: 'ru', // Test Russian
});

// Check if it's supported
console.log(cookieNoticePro.getSupportedLanguages());
// Output: ["en", "fr", "de", "es", "it", "ru"]

Using a Single Default Language for All Users

If you want to display the cookie banner in only one language for all users regardless of their browser settings, simply disable auto-detection and set your preferred language.

Configuration:

$(document).ready(function () {
  cookieNoticePro.init({
    enableAutoLanguageDetection: false, // Disable auto-detection
    language: 'en', // Force English for all users
  });
});

Common Use Cases:

Example: Force German for All Users

// Force German language regardless of user's browser settings
$(document).ready(function () {
  cookieNoticePro.init({
    enableAutoLanguageDetection: false,
    language: 'de'
  });
});

// Verify the active language
console.log(cookieNoticePro.getLanguage()); // Always outputs: "de"

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:

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)
	.....
	.....
}

Textual Changes

To customize text for a specific language, locate the translations object at the top of the cookienoticepro.script.js file and edit the values for your desired language.

Example: Customizing English translations

const translations = {
	en: {
		title: "Cookie Consent", // Title of popup banner
		description: "We use cookies to make your experience better...", // Message
		acceptBtnLabel: "Accept All", // Accept cookie button text
		declineInfoBtnLabel: "Decline", // Decline cookie button text
		moreInfoBtnLabel: "Privacy Policy", // More info link text
		settingsBtnLabel: "Customize", // Text of settings button
		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...", // Hover text of necessary cookies
		floatingIconTooltip: "Adjust my preferences", // Tooltip text for floating icon
		cookieTypes: {
			preferences: {
				type: "Preferences",
				description: "Preference cookies enable a website to remember information..."
			},
			marketing: {
				type: "Marketing",
				description: "Marketing cookies are used to track visitors..."
			},
			analytics: {
				type: "Analytics",
				description: "Analytics cookies allow us to count visits..."
			},
		},
	},
	// Other languages (fr, de, es, it) follow the same structure...
}

Text Modifications:

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.

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.

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

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

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

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

cookieNoticePro.getLanguage() New in v3.0

cookieNoticePro.getLanguage();

Returns the currently active language code being used by the cookie banner. This is useful for debugging or when you need to know which language is being displayed to the user.

Parameter : None

Returns : String (Language code)

Example:

>> cookieNoticePro.getLanguage();
"en"

// If user's browser is set to French and auto-detection is enabled
>> cookieNoticePro.getLanguage();
"fr"

cookieNoticePro.getSupportedLanguages() New in v3.0

cookieNoticePro.getSupportedLanguages();

Returns an array of all supported language codes that the plugin can display. This is helpful if you want to programmatically check which languages are available.

Parameter : None

Returns : Array of Strings

Example:

>> cookieNoticePro.getSupportedLanguages();
["en", "fr", "de", "es", "it"]

Practical Use Case:

You can use this method to build a language selector on your website:

const languages = cookieNoticePro.getSupportedLanguages();
const languageNames = {
	en: "English",
	fr: "Français",
	de: "Deutsch",
	es: "Español",
	it: "Italiano"
};

languages.forEach(lang => {
	console.log(`${languageNames[lang]} (${lang})`);
});

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.

• What are Cookies?
• General Data Protection Regulation

Javascript

• ES5 Vs ES6
• Browser Support(ES5/ES6)
• Babeljs.io

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