Author: | oxterisk |
---|---|
Views Total: | 609 views |
Official Page: | Go to website |
Last Update: | November 9, 2022 |
License: | MIT |
Preview:

Description:
An advanced cookie consent JavaScript library for requesting consent for cookie usage on your site.
Features:
- Dark and Light themes.
- Custom buttons.
- Accept or reject personalized cookies individually.
- Allows you to exclude pages.
- Useful callback functions.
- Compatible with GDPR and ePrivacy Directive.
How to use it:
1. Load the main stylesheet and JavaScript in the document.
<link rel="stylesheet" href="src/cookiesconsent.min.css" /> <script src="src/cookiesconsent.min.js"></script>
2. Load a theme of your choice:
<!-- Dark Theme --> <link href="src/themes/cookiesconsent.theme-dark.css" rel="stylesheet" /> <!-- Light Theme --> <link href="src/themes/cookiesconsent.theme-dark.css" rel="stylesheet" /> <!-- Sober Theme --> <link href="src/themes/cookiesconsent.theme-sober.css" rel="stylesheet" />
3. Initialize the cookiesConsent.js to display a basic cookie consent message on the page.
const cc = CookiesConsentJS();
4. Customize the cookie consent message.
const cc = CookiesConsentJS({ content : { // title title: "Cookies compliance", // message message: "We use cookies", // custom button text btnAccept: "Accept all", btnReject: "Reject all", btnDismiss: "Cookies policy", btnSettings: "Settings", btnSettingsSelectAll: "Select all", btnSettingsUnselectAll: "Unselect all", btnSettingsAccept: "Accept selection", btnInfo: "More info", policy: "Privacy Policy", // left, right, center align: "left", // policy link policyLink : "https://gdpr-info.eu/", // Text that will be shown in the information popup info: "<h2>This is the info title</h2>", }, });
5. Set custom cookies that users can accept or reject them individually.
const cc = CookiesConsentJS({ cookies : { statistics : { name : "stats", description : "<h2>Statistic cookies</h2>", }, preferences : { name : "prefs", description : "<h2>Preference cookies</h2>", checked : true, disabled : true, }, profile : { name : "profile", description : "<h2>Profile cookies</h2>", disabled : true, }, cookie_checked : { name : "cc-checked", description : "<h2>Checked cookies</h2>", checked : true, disabled : false, }, }, });
6. Callback functions.
const cc = CookiesConsentJS({ callback : { first_load: null, accept: null, reject: null, load: null, }, });
7. More configuration options.
const cc = CookiesConsentJS({ // the number of days the cookie will be valid expirationDays: 365, // cookie path path: "/", // lax, static, none sameSite: "lax", // top, top-left, top-right, bottom, bottom-left, bottom-right position: "top", // top-left, top-right, bottom-left, bottom-right btnDismissPosition: "bottom-left", // enable/disable buttons buttons: ["reject", "accept", "settings", "info", "dismiss"], // exclude pages denylistPages: ["/policy", "/cookie-policy", "examples"], });
8. API methods.
cc.getStatus(); cc.getConfig(); cc.showMessage(); cc.removeCookies();
Changelog:
11/09/2022
- Improved google cookie deletion performance