Cookie consent banner (full page / full page embed)

Pau Sanchez Updated by Pau Sanchez

Due to legal reasons we might need to add a legal consent banner, and ask the user for consent. Below is a handy sample code in case you want to add such functionality specially designed for Full Page embed style:

- The banner loads as soon as the page loads

- The banner offer a text and buttons to accept or decline the usage of tracking systems

- If pressed OK, it will hide the banner, add a tracking script (in the code sample is Facebook Pixel) and add an item in the local storage to "remember" the selection

- If pressed DECLINE, it will hide the banner, do not add any tracking script and add an item in the local storage to "remember" the selection

- Once the user returns, the local storage will be checked to add or not the script

- The design is also mobile friendly

In the Design > Custom Code > Add CSS:

.cookie-block{
position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2147483646;
  width: 100%;
  height: 100%;
	background-color: rgb(51 51 51 / 58%);
}


.cookie-consent-banner {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 40%;
  width: 90%;
  background-color: #F1F6F4;
}

.cookie-consent-banner__inner {     
  max-width: 960px;
  margin: auto;
  padding: 32px;
}

.cookie-consent-banner__header {
  color: #838F93;
  margin-bottom: 8px;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__description {
  color: #838F93;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 100%;
  padding: 10px;
  border-radius: 2px;
  background-color: #2CE080;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.cookie-consent-banner__cta--secondary { 
  padding: 10px;
  border: none;
  background-color: transparent;
  color: #2CE080;
}

.cookie-consent-banner__cta:last-child {
  margin-bottom: 10px;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {

  .cookie-consent-banner {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 35%;
  width: 90%;
  background-color: #F1F6F4;
}

.cookie-consent-banner__inner {     
  max-width: 320px;
  margin: auto;
  padding: 10px;
}

.cookie-consent-banner__header {
  color: #838F93;
  margin-bottom: 8px;
  font-weight: normal;
  font-size: 10px;
  line-height: 10px;
}

.cookie-consent-banner__description {
  color: #838F93;
  font-size: 10px;
  line-height: 10px;
  margin-bottom: 16px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 100%;
  padding: 10px;
  border-radius: 2px;
  background-color: #2CE080;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-weight: normal;
  font-size: 10px;
  line-height: 7px;
}

.cookie-consent-banner__cta--secondary { 
  padding: 10px;
  border: none;
  background-color: transparent;
  color: #2CE080;
}

.cookie-consent-banner__cta:last-child {
  margin-bottom: 5px;
}


}

In the Design > Custom Code > Add JS:

<div class="cookie-block" style="display:none">
<div class="cookie-consent-banner">
  <div class="cookie-consent-banner__inner">
    <div class="cookie-consent-banner__copy">
      <div class="cookie-consent-banner__header">THIS WEBSITE USES COOKIES</div>
      <div class="cookie-consent-banner__description">We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You consent to our cookies if you continue to use our website.</div>
    </div>

    <div class="cookie-consent-banner__actions">
      <div>
      <button href="#" id="okconsent" class="cookie-consent-banner__cta">OK</button>
      </div>
      <div>
      <button href="#" id="declineconsent" class="cookie-consent-banner__cta cookie-consent-banner__cta--secondary">Decline</button >
      <div>
    </div>
  </div>
</div>
</div>
<script>
  
  	function addScripts(){
    
    //TO ADD FACEBOOK PIXEL SNIPPET ONLY WHEN USER CLICKS OK
        
        let scriptToAdd_1 = window.document.createElement("script");
        scriptToAdd_1.text = `!function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
            fbq('init', '2XXXXXXXX');
            fbq('track', 'PageView');`
			window.document.head.appendChild(scriptToAdd_1)
        
        let scriptToAdd_2 = window.document.createElement("noscript");
				scriptToAdd_2.id = "noscript"
        window.document.head.appendChild(scriptToAdd_2);
				
        let scriptToAdd_3 = window.document.createElement("img");
        scriptToAdd_3.height = "1";
        scriptToAdd_3.width = "1";
        scriptToAdd_3.style = "display:none";
        scriptToAdd_3.src = "https://www.facebook.com/tr?id=2XXXXXXXX&ev=PageView&noscript=1"
        window.document.getElementById("noscript").appendChild(scriptToAdd_3);
    
    
    }
  
  
  	var landbotScope = this;
		this.onLoad(function(){
      
      
      if (localStorage.getItem("cookies_preference")){
      	let cookie_preference = localStorage.getItem("cookies_preference")
      	landbotScope.document.getElementsByClassName("cookie-block")[0].style.display = "none"
      	if (cookie_preference == "ok"){
      		addScripts()
      	} 
      } else{
      	landbotScope.document.getElementsByClassName("cookie-block")[0].style.display = "block"
      }
    	
      landbotScope.document.getElementById("okconsent").addEventListener("click", function() {
  			landbotScope.document.getElementsByClassName("cookie-block")[0].style.display = "none"
        localStorage.setItem("cookies_preference", "ok");
        addScripts()
        
			});
      
      landbotScope.document.getElementById("declineconsent").addEventListener("click", function() {
  			landbotScope.document.getElementsByClassName("cookie-block")[0].style.display = "none"
        localStorage.setItem("cookies_preference", "decline");
			});

			
    })
</script>

How did we do?

How to validate phone number with SMS verification (with Vonage Verify)

Add Captcha Verification (Non-Embedded Bots)

Contact