This article is also available in:
Note: this article guides you to adding a cookie consent banner to a particular page. If you'd like to have it globally on a site, follow the instructions here: Adding a cookie consent banner to a site.

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 cookies. 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.
First off, hover over at the bottom or at the top of the page and click the "plus" icon in the editor to add a block:



When the list of blocks will appear, search for the 'wireframe-series-6-cta' block and click on it to add it to the site:



Then, go to the 'Block Settings' and set up 0px for the top and bottom paddings:



Write the relevant Cookie Policy text and don't forget to change the button text too. Style the following banner however you want. You also may find this article useful in case you need further directions on how to change text color.

For the visual representation, your block should look something like this:



Important: In order for the cookie banner to display properly, you must change Block anchor name in the block settings to #cookies.



Next, 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.

<script>
window.onload = function() {
var block = document.querySelector("[data-block-name='wireframe-series-6-cta']");
var btn = document.querySelector("[data-block-name='wireframe-series-6-cta'] .w-btns-group__item");
var showCookiePolicy = getCookie('agreementState') === 'agreed' ? false : true;
if (showCookiePolicy === true) {
console.log('first paint' + getCookie('agreementState'))
block.style.display = 'block';
} 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>




After that, style the wireframe-series-6-cta block with the given code snippet. Paste the following CSS properties in the CSS tab.

[data-block-name='wireframe-series-6-cta'] {
display: none;
}

#cookies ~ section {
position: fixed;
width: 100%;
z-index: 3;
background: #000;
bottom: 0;
display: flex;
}




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



Then, publish your website to finish adding your cookie consent banner.
Was this article helpful?
Cancel
Thank you!