This article is also available in:
Note: This article will guide you to adding a cookie consent banner to the whole site. If you'd like to add a banner to specific pages only, check out the article Adding a cookie consent banner to a page.

Every company should have a cookie consent and privacy policy set up on their website. According to the General Data Protection Regulation (GDPR), you must receive users' consent before you use any cookies other than strictly necessary ones. You can also check up Weblium's GPDR here.

Let's jump into this handy explanation of how to add a cookie consent banner to your site!

Important: this feature is available for the websites with PRO-subscription only.

Firstly, navigate to the Settings of your website:


Proceed to the Custom code tab:



Insert the following line of code in the in the Before </BODY> section.

<div class="cookie_banner">
<div class="cookie_content">
<div class="cookie_text_left">
<span class="cookie_text ui-text"> We use cookies to impove browsing experience on our site. By continuing to use the site, you agree to our Cookie Policy. </span>
</div>
<div class="cookie_button">
<a class="button_ok ui-button ui-button--primary-dark ui-button--size-sm">
<span class="cookie__border"> </span>
<span class="cookie_button_content"> Ok </span>
</a>
</div>
</div>
</div>
<script>
window.onload = function() {
var block = document.querySelector(".cookie_banner");
var btn = document.querySelector(".cookie_banner .button_ok");
var showCookiePolicy = getCookie('agreementState') === 'agreed' ? false : true;
if (showCookiePolicy === true) {
console.log('first paint' + getCookie('agreementState'))
block.style.display = 'flex';
} else {
console.log('first paint' + getCookie('agreementState'))
block.style.display = 'none';
}
btn.addEventListener('click', function(e) {
e.preventDefault();
setCookie('agreementState', 'agreed');
showCookiePolicy = false;
if (!showCookiePolicy) {
console.log('click repaint' + getCookie('agreementState'))
block.style.display = 'none';
}
});
function getCookie(name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length == 2) return parts.pop().split(';').shift();
}
function setCookie(name,value,days) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + (value || '') + expires + '; path=/';
}
}
</script>



Tip: Change thе piece of text after the <span class="cookie_text ui-text"> if you would like to change the content of your cookie banner.

After that, style a cookie consent banner with the given code snippet. Paste the following CSS properties in the CSS tab.

.cookie_banner{
display: none;
position: fixed;
height: auto;
bottom: 0;
width: 100%;
margin: 0 auto;
z-index: 200;
padding: 20px;
background-color: #212121;
}

.button_ok{
cursor: pointer;
align-self: center;
text-decoration: none;
}

.cookie_text_left{
display: flex;
width: 80%;
}

.cookie_text{
align-self: center;
text-align: left;
color: #fff;
line-height: 24px;
}

.cookie_button{
display: flex;
width: 20%;
justify-content: center;
}

.cookie_content{
width: 100%;
max-width: 1200px;
display: flex;
margin: 0 auto;
}

@media(max-width:767px){

.cookie_text_left{
width: 100%;
justify-content: center;
}

.cookie_text{
line-height: 20px;
text-align: center;
padding-top: 0px;
padding-bottom: 5px;
}

.cookie_button{
width: 100%;
justify-content: center;
margin: 15px 0px 6px 0px
}

.cookie_content{
width: 100%;
flex-direction: column !important;
}
}

@media(max-width:374px){

.cookie_text{
font-size: 14px !important;
}

.cookie_button{
margin: 15px 0px 4px 0px
}
}



Tip: you can change the color of the banner text by adding another color code instead of #fff in the CSS script above. Also, you can change the change banner background color by replacing the #212121 with the needed color code as well.

Click on the 'Save' button for changes to appear live.



Done! View the site live to make sure that the banner looks good.
Was this article helpful?
Cancel
Thank you!