Consent Cookies JS is an easy-to-use JavaScript library to display the cookie consent message and manage user consent in accordance with the GDPR Cookie Act and the Electronic Privacy Directive.
trustarc cookie consent manager, cookie consent management tool, cookie consent manager free, best cookie consent manager, cookie consent javascript
Features:
- Dark and light themes.
- Custom buttons.
- Accept or decline personal cookies individually.
- Allows you to exclude pages.
- Useful callback functions.
- Compliant with the GDPR and ePrivacy Directive.
How to make use of it:
1. Load the main style sheet and javascript into the document.
<link rel="stylesheet" href="src/cookiesconsent.min.css" /> <script src="src/cookiesconsent.min.js"></script>
2. Upload 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. Configure cookiesConsent.js to display a basic cookie consent message on the page.
const cc = CookiesConsentJS();
4. Personalize 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 decline 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();
Advanced Cookie Consent Manager In JavaScript, Cookies Consent JS Plugin/Github, cookie consent popup, cookie consent examples, cookie consent gdpr
See Demo And Download
Official Website(oxterisk): Click Here
This superior jQuery/javascript plugin is developed by oxterisk. For extra Advanced Usages, please go to the official website.
Be First to Comment