1. Home
  2. /
  3. Web Design & Development
  4. /
  5. Javascript
  6. /
  7. How to add Cookie notice on your website?

How to add Cookie notice on your website?

cookies notice

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.

In this article, I will be sharing with you an example of how to implement this 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);
	});
});

Leave a Reply

Your email address will not be published. Required fields are marked *

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now