Setup cookie consent code: Cookie notice JS and CSS code with setup steps. Show GDPR cookie consent to website visitors without plugin. Also, this code work without jQuery or any other JavaScript library dependency.
If your site store cookie on site visitors system, In that case you need to show Cookie consent notice to visitors with accept and more detail page option. This consent message required in specific country, but you can show this message to all visitors.
Paid Cookie consent service provider gives detailed information in notice. It shows general message and cookie information, which can be stored in user’s device. This type of consent is fully GDPR compliant.
Here given code shows Cookie notice with general message and Privacy Policy/Cookie policy page link to visitor with accept option. This may be not fully compliant with rule, but it gives same result which current Cookie consent plugin provides.
Follow given steps to setup Cookie consent code to your WordPress or Blogger or any other website.
Table of Contents
Cookie consent JavaScript code :
<script>
//<![CDATA[
var _tppCookieMessage = 'This website uses cookies to improve your experience. We\'ll assume you\'re ok with this, but you can opt-out if you wish.';
var _tppButtonTitle = 'Accept';
var _tppMoreInfoPageLink = 'YOUR_PRIVACYPAGE_OR_COOKIEPAGE_LINK';
var _tppCookieForDays = 30;
if (!getCookie("cookieConsentAccepted")) {
var cookHtml = '<div id="cookie-law-info-bar" class="tpp__cook_msg"><span>'+_tppCookieMessage+'<hr/><button id="acceptCookie">'+_tppButtonTitle+'</button> <a target="_blank" href="'+_tppMoreInfoPageLink+'">Read More</a></span></div>';
var _cdiv=document.createElement('div');
_cdiv.id='_cookieMessageDiv';
document.body.appendChild(_cdiv);
var _divTag=document.getElementById("_cookieMessageDiv");
_divTag.innerHTML+=cookHtml;
}
function setCookie(e, o, t) {
var n = new Date;
n.setTime(n.getTime() + 24 * t * 60 * 60 * 1e3);
var i = "expires=" + n.toUTCString();
document.cookie = e + "=" + o + ";path=/; " + i
}
function getCookie(e) {
for (var o = e + "=", t = document.cookie.split(";"), n = 0; n < t.length; n++) {
for (var i = t[n]; " " == i.charAt(0);) i = i.substring(1);
if (0 == i.indexOf(o)) return i.substring(o.length, i.length)
}
return ""
}
window.onload = function() {
var e = document.getElementById("acceptCookie");
e && e.addEventListener("click", function() {
setCookie("cookieConsentAccepted", "YES", _tppCookieForDays),
document.getElementById("cookie-law-info-bar").remove()
})
};
//]]>
</script>Cookie consent CSS code :
/** tpp consent **/
.tpp__cook_msg{display:block;background-color:#ccc;color:#000;font-family:inherit;bottom:0;position:fixed;padding:10px 5px 30px 5px;text-align:center;width:100%;z-index:9999999;border-top:1px solid #aaa;opacity:0.9;}
.tpp__cook_msg hr{border-bottom:1px solid #e5e5e5;margin:10px;border:none;border-bottom:1px solid #c1c1c1;}
.tpp__cook_msg a{font-weight:700;text-decoration:none;color:#3946e2}
.tpp__cook_msg #acceptCookie{background-color:#29861e;color:#fff;border:2px solid #4b9c37;border-radius:5px;padding:5px 10px;font-size:15px;}
/** tpp consent **/How to setup Cookie consent JavaScript code?
- Change YOUR_PRIVACYPAGE_OR_COOKIEPAGE_LINK text with your related page url.
- For example:
var _tppMoreInfoPageLink = 'http://example.com/privacy'; - Open your blog admin and add new HTML widget.
- Copy JavaScript code from this page, past in HTML widget and save.
How to setup Cookie consent CSS code?
- For WordPress open Appearance > Customize > Additional CSS option.
- For Blogger open Theme > Customize > Advanced > Add CSS option.
- Copy CSS code from this page, past in CSS option and save.
Note: Above code set consent accepted preference cookie for 30 days. If you want to change this time, you need to replace days value in JavaScript code (var _tppCookieForDays = 30;).
Most important thing for this code is that, it not have any JavaScript library dependency, no plugin or third party integration required and easy to setup.
Cookie consent code setup is simple, if you know WordPress and Blogger dashboard settings. If you have any confusion or want to change message content and design, ask your queries in comment section before use this code in your blog.
