/* * Copyright (c) 2024 Flerosoft (https://flerosoft.com) * Software Name: Cookie Notice Pro - jQuery Plugin * Product Page : https://cookienoticepro.flerosoft.com * Documentation: https://cookienoticepro.flerosoft.com/docs * Description: Cookie Notice Pro, a lightweight jQuery plugin, helps you to comply with GDPR. Make your own cookie information popup in minutes. * Changelog: https://cookienoticepro.flerosoft.com/docs/getting-started#item-1-4 */ (function ($) { 'use strict' const settingsIcon = ''; const cookieIcon = ' '; const closeIcon = ''; /* *-------------------------------------------------------------------------- * CONFIG OR SETTINGS - Customize the popup banner START *-------------------------------------------------------------------------- */ const config = { themeSettings: { primaryColor: "#000", // Primary Color of Popup Banner darkColor: "#3b3e4a", // Dark Theme Color lightColor: "#ffffff", // Light Theme Color themeMode: "light", // Theme Mode (light|dark) }, enableGoogleConsentMode: true, // Add support for Google consent mode v2 (https://cookiebannergenerator.com/implementing-google-consent-mode-v2-with-cookie-notice-pro-a-step-by-step-guide/) enableMinimize: true, // Enable minimized floating cookie icon to adjust preferences showCookieIcon: true, // Hide or show the cookie icon 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) fullWidth: false, // Full width popup works only when "displayPosition" is set to top/bottom allCheckboxesChecked: true, // The setting checkboxes should be checked by default initially or not(true|false) displayPosition: "bottom", // Where popup should appear(top|right|bottom|left) settingsBtnLabel: "Customize", // Text of settings button delay: 1, // 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) title: "We value user privacy.", // Title of popup bannner description: "We use cookies to improve browsing quality, display ads or content tailored to individual user needs, and analyze site traffic. Clicking the „Accept all” button signifies consent to us using cookies.", // Message acceptBtnLabel: "Accept", // Accept cookie button text declineInfoBtnLabel: "Reject", // Decline cookie button text moreInfoBtnLink: "/privacy-policy", // Learn more link(default: privacy policy page) moreInfoBtnLabel: "Privacy Policy", // More info link text cookieTypesTitle: "Select the cookies to accept", // Title of cookie preference options necessaryCookieTypeLabel: "Required", // Label text of Necessary cookie item floatingIconTooltip: "Customize", // Tooltip of floating cookie icon (Minimized) necessaryCookieTypeDesc: "These cookies are necessary for the website to function and cannot be switched off in our systems.", // Hover text of necessary cookies onConsentAccept: ()=> { // It will inject scripts in head if cookie preferences menu(showSettingsBtn) is enabled console.log("Consent accepted!") }, onConsentReject: ()=> { // This code will run on cookie reject/decline console.log("Consent Rejected!"); }, cookieTypes: [ // Cookie types, value and description (Cookie Preferences Selection) { type: "Functional", value: "preferences", // WARNING: DO NOT EDIT THIS VALUE description: "Essential cookies are crucial for basic website functions, and the website will not function properly without them. These cookies do not store any personally identifiable information.", }, { type: "Advertisement", value: "marketing", // WARNING: DO NOT EDIT THIS VALUE description: "Advertising cookies are used to deliver personalized ads to users based on the pages they have visited previously and to analyze the effectiveness of advertising campaigns.", }, { type: "Analytics", value: "analytics", // WARNING: DO NOT EDIT THIS VALUE description: "Analytical cookies are used to understand how users interact with the website. These cookies help provide information about metrics such as the number of visitors, bounce rate, traffic source, etc.", }, ], }; /* *-------------------------------------------------------------------------- * CONFIG OR SETTINGS - Customize the popup banner END *-------------------------------------------------------------------------- */ const COOKIE_CONSENT = "cnp_consent"; // WARNING: DO NOT EDIT THIS VALUE const COOKIE_CONSENT_PREFS = "cnp_prefs"; // WARNING: DO NOT EDIT THIS VALUE const GOOGLE_CONSENT_MODE_AD_PREFS = "cnp_gconsent_ad_prefs" // WARNING: DO NOT EDIT THIS VALUE const GOOGLE_CONSENT_MODE_ANALYTICS_STORAGE = "cnp_gconsent_analytics_storage" // WARNING: DO NOT EDIT THIS VALUE $.fn.cookieNoticePro = (event) => { changeRootVariables(); let cookieConsentExists = cookieExists(COOKIE_CONSENT); let cookiePrefsValue = accessCookie(COOKIE_CONSENT_PREFS); if ( !cookieConsentExists) { // add layer to the body below cookies to prevent click $('body').append(''); } // If consent is not accepted if (!cookieConsentExists || event == "open") { $("#cookieNoticePro").remove(); $("#cookieMinimizeIcon").remove(); let cookieTypes='
    • "; const preferences = JSON.parse(cookiePrefsValue); $.each(config.cookieTypes, (index, field) => { if (field.type !== "" && field.value !== "") { let cookieTypeDescription = ""; if (field.description !== false) { cookieTypeDescription = ' title="' + field.description + '"'; } cookieTypes+='
    • "; } }); let cookieNotice='
    '+ closeIcon +'
    '+cookieIcon+"

    "+config.title+'

    '+config.description+' '+config.moreInfoBtnLabel+'

    '+settingsIcon+config.settingsBtnLabel+'
    "; setTimeout(() => { $("body").append(cookieNotice); $("#cookieNoticePro").hide().fadeIn("slow", () => { if(event == "open") { $("#cookieSettings").trigger("click"); $.each(preferences, (index, field) => { $("input#gdprPrefItem" + field).prop("checked", true); }); } }); if(!config.showSettingsBtn) { $("#cookieNoticePro #cookieSettings").hide(); } if(!config.showDeclineBtn) { $("#cookieNoticePro #cookieReject").hide(); } if(!config.showCookieIcon) { $("#cookieNoticePro #cookieIcon").hide(); } if(!config.showCloseIcon) { $("#cookieNoticePro #closeIcon").hide(); } }, event === "open" ? 0 : config.delay); $("body").on("click", "#cookieAccept", () => { hideCookieBanner(true, config.expires); $('input[name="gdprPrefItem"][data-compulsory="on"]').prop("checked", true); let prefs = []; $.each($('input[name="gdprPrefItem"]').serializeArray(), (i, field) => { prefs.push(field.value); }); createCookie(COOKIE_CONSENT_PREFS, encodeURIComponent(JSON.stringify(prefs)), { expires: daysToUTC(365), path: "/" }); config.onConsentAccept.call(this); config.showSettingsBtn? injectScripts() : null; if(config.enableGoogleConsentMode) { googleConsentModeHandler(); } }); $("body").on("click", "#cookieSettings", () => { if(event === "open"){ $('input[name="gdprPrefItem"]:not(:disabled)').attr("data-compulsory", "off").prop("checked", false); $("#cookieTypes").slideDown("fast", function () { $("#cookieSettings").prop("disabled", true); }); } else { $('input[name="gdprPrefItem"]:not(:disabled)').attr("data-compulsory", "off").prop("checked", config.allCheckboxesChecked); $("#cookieTypes").toggle("fast", function () { $("#cookieSettings").prop("disabled", false); }); } }); $("body").on("click", "#closeIcon", () => { $("#cookieNoticePro").remove(); }); $("body").on("click", "#cookieReject", () => { hideCookieBanner(false, config.expires); config.onConsentReject.call(this); // Delete prefs cookie from brower on reject createCookie(COOKIE_CONSENT_PREFS, "", { expires: daysToUTC(-365), path: "/" }); }); } // If already consent is accepted, inject preferences else { if(config.showSettingsBtn) { injectScripts(); } if(config.enableMinimize){ minimizeCookieBanner(); } if(config.enableGoogleConsentMode) { googleConsentModeHandler(); } } }; /** * Check if cookie exists * @param {string} cookieName */ const cookieExists = (cookieName) => { if(document.cookie.indexOf(cookieName) > -1){ return true; } return false; }; /** * Create the cookie and hide the banner * @param {string} value * @param {string} expiryDays */ const hideCookieBanner = (value, expiryDays) => { createCookie(COOKIE_CONSENT, value, { expires: daysToUTC(expiryDays), path: "/", }); $("#cookieNoticePro").fadeOut("fast", () => { $('body').off('click', "#cookieSettings"); $('body').off('click', "#cookieReject"); $('body').off('click', "#closeIcon"); $('body').off('click', "#cookieAccept"); $(this).remove(); }); if(config.enableMinimize) { minimizeCookieBanner(); } }; /** * Minimize the cookie banner and show a minimized icon. */ const minimizeCookieBanner = () => { $( '#cookie-layer' ).remove(); // Remove any existing minimize icon before appending a new one. $('#cookieMinimizeIcon').remove(); // Minimize the banner and show an icon instead. let minimizeIcon = $('
    ' + cookieIcon + '
    '+ config.floatingIconTooltip +'
    '); $('body').append(minimizeIcon); // Define the click behavior for the minimize icon. $('#cookieMinimizeIcon').on('click', function() { if ($(this).hasClass('zoomIn')) { $(this).removeClass('zoomIn').addClass('zoomOut'); setTimeout(() => { $.fn.cookieNoticePro("open"); // Reopen the cookie notice }, 200); // Match the timeout to the animation duration } else { $(this).removeClass('zoomOut').addClass('zoomIn'); } }); }; /** * Set Cookie * @param {string} name - Cookie Name * @param {string} value - Cookie Value * @param {string} expiryDays - Expiry Date of cookie */ const createCookie = (name, value, options={})=> { document.cookie = `${name}=${value}${ Object.keys(options) .reduce((acc, key) => { return acc + `;${key.replace(/([A-Z])/g, $1 => '-' + $1.toLowerCase())}=${ options[key]}`; }, '') }`; }; /** * Converts Days Into UTC String * @param {number} days - Name of the cookie * @return {string} UTC date string */ const daysToUTC = (days) => { const newDate = new Date(); newDate.setTime(newDate.getTime() + days * 24 * 60 * 60 * 1000); return newDate.toUTCString(); }; /** * Get Cookie By Name * @param {string} name - Name of the cookie * @return {string(number|Array)} Value of the cookie */ const accessCookie = (name) => { const cookies = document.cookie.split(";").reduce((acc, cookieString) => { const [key, value] = cookieString.split("=").map((s) => s.trim()); if (key && value) { acc[key] = decodeURIComponent(value); } return acc; }, {}); return name ? cookies[name] || false : cookies; }; /** * Updates Google Consent Mode based on user consent and preferences. */ const googleConsentModeHandler = () => { if(!config.enableGoogleConsentMode) return; const consent = JSON.parse(accessCookie(COOKIE_CONSENT)); const preferences = JSON.parse(accessCookie(COOKIE_CONSENT_PREFS)); const googleConsentAnalyticsStorage = JSON.parse(accessCookie(GOOGLE_CONSENT_MODE_ANALYTICS_STORAGE)); const googleConsentAdPrefs = JSON.parse(accessCookie(GOOGLE_CONSENT_MODE_AD_PREFS)); try { if(consent === true) { // if analytics is accepted if(preferences.indexOf("analytics") > -1) { if(!googleConsentAnalyticsStorage) { createCookie(GOOGLE_CONSENT_MODE_ANALYTICS_STORAGE, encodeURIComponent(true), { expires: daysToUTC(365), path: "/" }); gtag('consent', 'update', { 'analytics_storage': 'granted' }); } } else { if(googleConsentAnalyticsStorage === true) { gtag('consent', 'update', { 'analytics_storage': 'denied' }); createCookie(GOOGLE_CONSENT_MODE_ANALYTICS_STORAGE, "", { expires: daysToUTC(-365), path: "/" }); } } // if marketing or advertising is accepted if( preferences.indexOf("marketing") > -1) { if(!googleConsentAdPrefs) { createCookie(GOOGLE_CONSENT_MODE_AD_PREFS, encodeURIComponent(true), { expires: daysToUTC(365), path: "/" }); gtag('consent', 'update', { 'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted' }); } } else { if(googleConsentAdPrefs === true) { gtag('consent', 'update', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied' }); createCookie(GOOGLE_CONSENT_MODE_AD_PREFS, "", { expires: daysToUTC(-365), path: "/" }); } } } } catch (error) { console.warn("CookieNoticePro: Error initializing Google Consent Mode. Ensure gtag.js is correctly installed:", error); } } const changeRootVariables = () =>{ $(':root').css('--cookieNoticeProLight', config.themeSettings.lightColor); $(':root').css('--cookieNoticeProDark', config.themeSettings.darkColor); } return window.cookieNoticePro = { init:()=>{ $.fn.cookieNoticePro(); }, /** * Reopens the cookie notice banner */ reinit:()=>{ $.fn.cookieNoticePro("open"); }, /** * Returns true if consent is given else false */ isAccepted: ()=>{ let consent = accessCookie(COOKIE_CONSENT); return JSON.parse(consent); }, /** * Returns the value of the cookieConsentPrefs cookie */ getPreferences: ()=>{ let preferences = accessCookie(COOKIE_CONSENT_PREFS); return JSON.parse(preferences); }, /** * Check if a particular preference is accepted * @param {string} cookieName */ isPreferenceAccepted: (cookieTypeValue)=>{ let consent = JSON.parse(accessCookie(COOKIE_CONSENT)); let preferences = accessCookie(COOKIE_CONSENT_PREFS); preferences = JSON.parse(preferences); if (consent === false) { return false; } if (preferences === false || preferences.indexOf(cookieTypeValue) === -1) { return false; } return true; }, }; })(jQuery);