As per the web standards or best web practices, it’s always good to show a cookie notice on your website to educate your visitors about how these cookies are useful for increasing the user experience and what data or visits you will be tracking using those cookies. In some countries, it’s mandatory to educate or inform your website visitors about the usage of cookies and what data and information you will be tracking when they are on your website or performing any actions. A cookie notice can be placed on the top or bottom of the web page. You can use CSS styling to enhance the UI/UX and make it more appealing and presentable. Read this blog thoroughly to discover how to add cookies notice on your website.
Table of Contents
In this blog, I will be sharing with you an example of how to add cookie notice on your website and implement this on your website.
What is a Cookie Notice?
A cookie notice is a message or banner displayed on a website that informs users that the website uses cookies. Cookies are small text files that are placed on a user’s device when they visit a website. These cookies are used to remember user preferences, analyze website traffic, and deliver targeted advertising.
The purpose of a cookie notice is to inform users about the use of cookies on the website and provide them with the option to accept or reject the use of cookies. Cookie notices also typically include information about the types of cookies used on the website, their purpose, and how long they are stored.
Cookie notices are required by data privacy laws such as the EU General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA). By providing a clear and prominent cookie notice, website owners can demonstrate their commitment to data privacy and help to build trust with their users.
Related: How to Implement Auto Suggestion in WordPress Search?
Steps to How to Add Cookie Notice on Your Website?
Let’s know how you can add cookie notice on a website.
Step 1: Understand the laws
Before you start adding a cookie notice to your website, it’s important to understand the laws that apply to your website. The GDPR requires websites to provide users with clear and concise information about the use of cookies, and to obtain the user’s consent before setting any non-essential cookies.
The CCPA also requires websites to provide users with notice about the collection and use of their personal information, which may include cookies.
Step 2: Determine which cookies you use
Once you understand the laws, the next step is to determine which cookies your website uses. There are two types of cookies: essential and non-essential. Essential cookies are necessary for the website to function properly, while non-essential cookies are used for tracking and analytics purposes.
Step 3: Choose a cookie notice solution
There are many solutions available for adding a cookie notice to your website. Some website builders and content management systems, like WordPress, offer built-in solutions. Alternatively, you can use a third-party tool like Cookiebot, CookiePro, or OneTrust.
Step 4: Customize your cookie notice
Once you’ve chosen a cookie notice solution, it’s time to customize the notice to fit your website’s design and content. You’ll want to include information about the types of cookies your website uses, why they’re used, and how the user can manage their preferences.
Step 5: Implement the cookie notice
Once you’ve customized your cookie notice, it’s time to implement it on your website. This will vary depending on the solution you’ve chosen, but most will provide instructions on how to add the notice to your website’s code.
Step 6: Test the cookie notice
After implementing the cookie notice, it’s important to test it to ensure that it’s working properly. You’ll want to make sure that the notice is displaying correctly on all devices and that users are able to manage their cookie preferences.
Step 7: Monitor and update the cookie notice
Finally, it’s important to monitor and update this regularly. This includes keeping track of any changes to the laws or your website’s use of cookies, as well as making sure that the notice remains visible and effective for users.
Also read: How to Implement Infinite Pagination in WordPress?
Why Is a Cookie Notice Important?
It is important for several reasons.
Firstly, it’s a legal requirement in many jurisdictions to provide users with notice of the use of cookies on a website.
Secondly, it helps to build trust with users by being transparent about the use of cookies and demonstrating a commitment to protecting their privacy.
Thirdly, it can help to reduce the risk of legal action or fines for non-compliance with data privacy laws.
What Should Be Included In a Cookie Notice?
A cookie notice is a statement that appears on a website informing users about the use of cookies on the site. It is important to include a cookie notice on your website to comply with data privacy laws and to build trust with your users.
Here are some of the key components:
1. Explanation of what cookies are
The notice should explain what cookies are and how they are used. This can include information about the different types of cookies, such as session cookies and persistent cookies, and how they are used to improve the user experience on the website.
2. Purpose of the cookies
The notice should explain the purpose of each cookie used on the website. This can include information about how cookies are used to remember user preferences, analyze website usage, or serve targeted advertisements.
3. Types of cookies used
The notice should provide a list of the different types of cookies used on the website. This can include information about whether the cookies are essential or non-essential for the operation of the website.
4. How to manage cookie preferences
The notice should provide information about how users can manage their cookie preferences. This can include instructions for how to disable or delete cookies, as well as information about how to opt-out of non-essential cookies.
5. Link to the website’s privacy policy
The notice should include a link to the website’s privacy policy. The privacy policy should provide more detailed information about the website’s data processing activities, including how personal data is collected, used, and shared.
6. Clear and concise language
The notice should be written in clear and concise language that is easy for users to understand. Technical jargon should be avoided as much as possible.
7. Prominent placement
The notice should be prominently displayed on the website. It should be easy for users to find and read, and should not be buried in a long legal document or terms of service agreement.
Also read: How to Add Google Tag Manager Script on Your Website?
How to Make a Cookie Notice Accessible?
Making a cookie notice accessible is an important consideration for website owners. An accessible cookie notice ensures that all users, including those with disabilities, can understand the information provided and manage their cookie preferences. Here are some tips for making a cookie notice accessible:
1. Use clear and concise language
Use clear and concise language that is easy for all users to understand. Avoid technical jargon and complex sentences.
2. Use alternative text for images
If your cookie notice includes images, use alternative text to describe the image for users who cannot see it. This will ensure that users with visual impairments can understand the content of the notice.
3. Ensure compatibility with assistive technologies
Use HTML and CSS to code your cookie notice so that it is compatible with screen readers and other assistive technologies. This will ensure that users with disabilities can access the information provided in the notice.
4. Make the notice visible and easy to find
Ensure that the cookie notice is prominently displayed on the website and easy for users to find. This can be achieved by placing the notice in a header or footer, or by including a link to the notice in the main navigation menu.
5. Use contrasting colors
Use contrasting colors for the text and background of the cookie notice. This will ensure that users with visual impairments can read the notice easily.
6. Allow users to manage their preferences
Provide users with an easy way to manage their cookie preferences, including the ability to opt-out of non-essential cookies. This can be achieved by using a cookie consent management tool.
Related: How to Add Custom Class to WordPress Widgets?
What Are the Consequences of Not Having a Cookie Notice?
Not having a cookie notice on your website can have several consequences, both legal and practical. Here are some of the consequences of not having a cookie notice:
1. Non-compliance with data privacy laws
Many countries and regions, such as the European Union, the United States, and Canada, have laws that require websites to provide users with information about the use of cookies. Not having a cookie notice can result in non-compliance with these laws, which can lead to fines and legal action.
2. Loss of trust with users
Users expect transparency about the collection and use of their data. Not having a cookie notice can erode trust with your users, especially if they discover that cookies are being used on your website without their knowledge or consent.
3. Decreased user experience
Cookies are often used to improve the user experience on a website by remembering user preferences and providing personalized content. Without a cookie notice, users may not understand how cookies are being used, which can lead to a confusing or frustrating user experience.
4. Negative impact on SEO
Search engines prioritize websites that are in compliance with data privacy laws and provide a good user experience. Not having a cookie notice can negatively impact your website’s search engine rankings.
5. Risk of legal action
Failure to comply with data privacy laws can result in legal action, which can be costly and time-consuming.
Also read: How to add an overlay to your webpage?
How to Handle Cookie Consent?
Handling cookie consent on your website involves obtaining user consent for the use of cookies and providing users with the ability to manage their cookie preferences. Here are some steps you can take to handle cookie consent on your website:
1. Use a cookie consent management tool
A cookie consent management tool can simplify the process of obtaining and managing user consent. These tools often include customizable cookie banners or pop-ups, which can be used to obtain user consent for the use of cookies.
2. Clearly explain the purpose of each cookie
When obtaining user consent, it is important to clearly explain the purpose of each cookie and how it will be used. This information should be easily accessible and written in clear and concise language.
3. Provide an opt-out option
Users should be given the option to opt-out of non-essential cookies, such as those used for advertising or tracking purposes. This can be achieved by providing users with a clear and easy-to-use opt-out mechanism, such as a cookie settings page.
4. Allow users to change their preferences
Users should be able to change their cookie preferences at any time. This can be achieved by providing users with access to a cookie settings page or a similar mechanism for managing their preferences.
5. Ensure compliance with data privacy laws
Cookie consent must comply with data privacy laws, such as the EU General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA). Make sure you are familiar with the requirements of these laws and that your cookie consent mechanism is compliant.
Also read: How to Choose the Right Content Management System (CMS) for Your Website?
Best Practices for Cookie Notices
Here are some best practices for cookie notices on your website:
1. Make the notice prominent
Your cookie notice should be prominent and easily visible to users. This can be achieved by using a cookie banner or pop-up that appears when a user visits your website.
2. Use clear and concise language
The language used in your cookie notice should be clear and concise, using plain language that is easy for users to understand.
3. Explain the purpose of each cookie
Your cookie notice should explain the purpose of each cookie used on your website, including how it will be used and the duration of its storage.
4. Provide an opt-out option
Your cookie notice should include an opt-out option that allows users to opt-out of non-essential cookies, such as those used for advertising or tracking purposes.
5. Make it easy to manage cookie preferences
Your cookie notice should provide users with an easy way to manage their cookie preferences, such as a cookie settings page or a similar mechanism for managing their preferences.
6. Ensure compliance with data privacy laws
Your cookie notice must comply with data privacy laws, such as the EU General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA). Make sure you are familiar with the requirements of these laws and that your cookie notice is compliant.
7. Keep it up-to-date
Your cookie notice should be kept up-to-date with any changes to your use of cookies. This can be achieved by regularly reviewing and updating your this as necessary.
Related: Avoid 5 Common Website Development Mistakes
HTML & CSS Codes to Add Cookie Notice on Your Website
HTML
<div id="cookieid" class="cookie-container">
<div class="cookie-content">
<strong>Cookies & Privacy</strong>
<p>We use cookies to ensure you get the best experience on our website. By using our website you consent to all the terms and conditions of our Cookie Policy.</p>
<ul>
<li>
<a title="Terms & Conditions" href="#">Terms of Use</a>
</li>
<li>
<a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li>
<a title="Cookie" href="#" target="_blank" rel="noopener">Cookies</a>
</li>
</ul>
<span id="cookieAgreeBtn" onclick="acceptCookie('7')" class="btn" role="button" title="Accept">Accept</span>
<span id="exitBtn" class="exit-btn" role="button" title="Close on current page">✕</span>
</div>
</div>CSS
.cookie-container {
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 200px;
background-color: #1d1d1d;
z-index: -10;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
align-items: center;
justify-content: space-around;
transition: height .3s ease-out,opacity .3s,padding .1s;
color: #fff;
}.animateCookie {
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 3s;
-moz-animation-name: animatebottom;
-moz-animation-duration: 3s;
-o-animation-name: animatebottom;
-o-animation-duration: 3s;
animation-name: animateCookieBottom;
animation-duration: 3s;
display: flex;
opacity: .9;
z-index: 10;
}.cookie-content {
font-size: 14px;
color: #fff;
max-width: 960px;
margin: 0 auto;
position: relative;
}.cookie-content>strong {
font-size: 20px;
padding-bottom: 10px;
display: inline-block;
letter-spacing: .61px;
line-height: normal;
font-weight: 700;
}.cookie-content>p {
font-size: 16px;
font-weight: 300;
letter-spacing: .49px;
line-height: normal;
margin: 10px 0 10px;
}.cookie-container ul {
padding: 0;
margin: 0;
float: left;
padding-top: 5px;
}.cookie-container ul li {
list-style: none;
display: inline-block;
padding: 0 20px 0 0;
}.cookie-content a {
color: #fff;
font-weight: 700;
text-decoration: underline;
font-size: 16px;
font-family: 'AkkuratProBold';
letter-spacing: .49px;
line-height: normal;
margin: 14px 40px 5px 0;
}.cookie-container .btn {
background-color: #ea146e;
color: #fff;
font-size: 16px;
border-radius: 2px;
padding: 5px 8px 5px 10px;
vertical-align: middle;
min-width: auto;
line-height: normal;
cursor: pointer;
float: right;
font-weight: 700;
letter-spacing: .49px;
border: 1px solid #eb146e;
margin: 0;
}span#exitBtn {
position: absolute;
right: 0;
top: 0;
font-size: 20px;
cursor: pointer;
color: #979797;
}Javascript
function acceptCookie(nDays){
mySetCookie("mySiteCookie", true, parseInt(nDays));
jQuery('#cookieid').fadeOut(1000);
}
function mySetCookie(cookieName, cookieValue, nDays) {
var today = new Date();
var expire = new Date();
if (nDays == null || nDays == 0) nDays = 1;
expire.setTime(today.getTime() + 3600000 * 24 * nDays);
document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString() + "; path=/";
}
function myReadCookie(cookieName) {
var theCookie = " " + document.cookie;
var ind = theCookie.indexOf(" " + cookieName + "=");
if (ind == -1) ind = theCookie.indexOf(";" + cookieName + "=");
if (ind == -1 || cookieName == "") return "";
var ind1 = theCookie.indexOf(";", ind + 1);
if (ind1 == -1) ind1 = theCookie.length;
return unescape(theCookie.substring(ind + cookieName.length + 2, ind1));
}document.addEventListener("DOMContentLoaded", function () {
if (!myReadCookie("mySiteCookie")) {
setTimeout(function(){
document.getElementById("cookieid").classList.add("animateCookie");
}, 3000);
}
}, true);jQuery(document).ready(function(){
jQuery('#exitBtn').on('click', function(){
jQuery('#cookieid').fadeOut(1000);
});
});Also read: The Importance of Responsive Design in the Mobile Era
Conclusion
In conclusion, adding a cookie notice to your website is an essential step to ensure compliance with data privacy laws and provide a better user experience for your visitors. By following the steps outlined in this article, you can add a cookie notice to your website that is compliant with data privacy laws and provides clear and concise information to your users about the use of cookies on your website.
Therefore, remember to make it prominent and easy to understand, provide an opt-out option, and keep it up-to-date with any changes to your use of cookies. By doing so, you can build trust with your users and demonstrate your commitment to data privacy and user experience on your website.
