Lightweight Cookie Notice JS Review
I am thrilled to share my comprehensive review of Lightweight Cookie Notice JS, a vanilla JavaScript script designed to provide a seamless way to display cookie notices on your website. With its impressive feature set, ease of implementation, and optimized performance, I’m excited to dive into the details of this impressive product.
Overview
Lightweight Cookie Notice JS is a powerful tool that integrates a wide range of customization options, support for multiple cookie categories, geolocation, and more. This script is designed to be fast, efficient, and easy to use, making it an excellent choice for high-performance websites and high-traffic websites.
Optimized for Performance
One of the standout features of Lightweight Cookie Notice JS is its optimized performance. The script is written with fast and efficient JavaScript code, and no additional JavaScript libraries or CSS files are required. This results in a single 8kb script (gzipped) that generates the cookie notices on the DOM, adds event listeners, and applies styles. This level of optimization makes it an excellent choice for websites that prioritize speed and performance.
Collecting Cookie Consent for Multiple Categories
This script allows you to configure an unlimited number of cookie categories, providing users with an activation toggle for each category. This feature is particularly useful for websites that require multiple types of cookies for different purposes. The script also includes JavaScript and PHP methods to read the cookie consent status of each category, enabling you to run specific scripts based on user consent.
Geolocation
Lightweight Cookie Notice JS also includes geolocation capabilities, allowing you to display the cookie notice only to users located in a custom list of countries. This feature is useful for websites that require cookies for specific regions or markets.
Multiple Positions and Additional Features
The cookie notice can be positioned at the bottom of the screen, top of the screen, or center of the screen as a modal window. Additionally, the script includes a range of additional features, such as an optional mask that blocks website interactions, an optional shake effect, and a refresh of the page for users who accept the cookie notice. Customization options abound, including colors, fonts, borders, and shadows.
Implementation and Options
Implementing Lightweight Cookie Notice JS is a breeze, requiring only one line of code: lwcnCookieNotice.initialize();. The script comes with a total of 100 options, which can be accessed through the plugin demo and manual.
Conclusion
In conclusion, Lightweight Cookie Notice JS is an excellent choice for websites that require a robust and customizable cookie notice solution. Its optimized performance, multiple category support, geolocation capabilities, and range of additional features make it an attractive option for developers and website owners alike. With its ease of implementation and extensive options, I highly recommend giving this script a try.
Score: 10/10
This product has exceeded my expectations in terms of performance, functionality, and customization options. Its ability to provide a seamless cookie notice experience makes it an excellent addition to any website.
User Reviews
Be the first to review “Lightweight Cookie Notice JS”
Introduction to Lightweight Cookie Notice JS
When collecting personal data or storing cookies on a website, it's essential to inform users about it and comply with privacy regulations such as GDPR, CCPA, and more. The Lightweight Cookie Notice JS is a simple, easy-to-use JavaScript library that helps you achieve this requirement. This tutorial will guide you through the setup and customization of the Lightweight Cookie Notice JS on your website.
Getting Started with Lightweight Cookie Notice JS
To start using Lightweight Cookie Notice JS, follow these steps:
1. Download the script
You can download the Lightweight Cookie Notice JS from its official repository on GitHub. You can either clone the repository or download the zip file and include it in your project.
2. Include the script in your HTML file
Add the script to the head section of your HTML file using the <script> tag:
<head>
<script src="lightweight-cookie-notice.js"></script>
</head>Replace lightweight-cookie-notice.js with the actual file name and path to the script you downloaded or cloned.
3. Initialize the script
Create a script tag after the Lightweight Cookie Notice JS script and initialize it by calling the CookieNotice function:
<script>
new CookieNotice({
// Your configuration options here (optional)
});
</script>You can pass options to the CookieNotice function to customize its behavior.
4. Define your cookie policies
In your HTML file, create a container element where the cookie notice will be rendered. This element should have a unique ID:
<div id="cookie-notice"></div>Define your cookie policies as an object and pass it to the CookieNotice function:
var cookiePolicies = [
{
"type": "analytics",
"description": "This website uses Google Analytics to collect anonymous traffic data."
},
{
"type": "essential",
"description": "This website uses session cookies to keep you logged in."
}
];You can customize the cookiePolicies object with your specific cookie types and descriptions.
5. Show the cookie notice
Initialize the cookie notice by calling the CookieNotice function and passing the cookiePolicies object:
new CookieNotice({
policies: cookiePolicies,
noticeContainer: document.getElementById("cookie-notice")
});The script will render the cookie notice in the noticeContainer element, and you're done!
Advanced Customization
To customize the appearance and behavior of the cookie notice, you can pass additional options to the CookieNotice function. Some common options include:
header: A custom header to display above the cookie notice.footer: A custom footer to display below the cookie notice.buttons: A custom array of buttons to display in the cookie notice.onClose: A function to be called when the cookie notice is closed.
Here's an example with some of these options:
new CookieNotice({
policies: cookiePolicies,
noticeContainer: document.getElementById("cookie-notice"),
header: "<h2>Cookies on our website</h2>",
buttons: [
{ text: "Accept", onclick: function() {} },
{ text: "Reject", onclick: function() {} }
],
onClose: function() {}
});Common Issues and Solutions
When setting up the Lightweight Cookie Notice JS, you might encounter some common issues. Here are some common problems and their solutions:
- Issue: The cookie notice doesn't render on your website.
-
Solution: Check that you have included the script in your HTML file and that the container element has a unique ID.
- Issue: The cookie notice doesn't show the correct number of cookies.
- Solution: Make sure that your cookie policies object is correctly configured and that you are setting the correct number of cookies in your backend.
That's it! With this tutorial, you should now have a fully functional cookie notice on your website that complies with privacy regulations.
Here is an example of the complete settings for Lightweight Cookie Notice JS:
Notifications
{
"notifications": {
"enabled": true
}
}Cookie Notice Text
{
"cookieNoticeText": "This website uses cookies"
}Cookie Notice Link
{
"cookieNoticeLink": "Read our Cookie Policy"
}Cookie Types
{
"cookieTypes": [
{
"type": "essential",
"label": "Essential Cookies",
"text": "These cookies are necessary for the website to function properly"
},
{
"type": "non-essential",
"label": "Non-Essential Cookies",
"text": "These cookies allow us to track and personalize your experience"
}
]
}Cookie Notice Display Duration
{
"cookieNoticeDisplayDuration": 300 // displayed for 5 minutes (300 seconds)
}Cookie Notice Animations
{
"cookieNoticeAnimations": {
"delay": 0, // delay before the cookie notice appears
"speed": 0.7 // animation speed
}
}Let me know if you would like me to clarify any of these settings or provide more information!
Here are the features mentioned in the content:
1. Optimized for Performance: Lightweight and fast JavaScript code, no additional libraries or CSS files required.
2. Multi-Categories: Supports multiple cookie categories, with user activation toggle for each.
3. Geolocation: Displays cookie notice based on user location, with GeoLite2 database and HostIp.info support.
4. Multiple Positions: Cookie notice can be positioned at the bottom of the screen, top, or center as a modal window.
5. Additional Features:
* Optional mask to block website interactions
* Optional shake effect to grab attention
* Optional page refresh for users accepting cookie notice
* Custom colors for backgrounds, borders, typefaces, masks, and more
* Custom font families for headings, body, and buttons
* Control over border width, radius, and opacity
* Shadows for containers
* Custom HTML in cookie notice and modal window
* HTML tables for cookie information
* Ability to customize style and layout6. Quick Implementation: Only one line of code required: lwcnCookieNotice.initialize();
7. 100+ Options: Complete list of options available in demo and manual.
Other: Credits to resources, including GeoIP2 PHP API, MaxMind DB Reader PHP API, Composer, and Apache License.
There are no reviews yet.