How to Hide the iubenda Banner on Specific Pages

Sometimes, you may want to hide the iubenda cookie consent banner on certain pages of your website. For example, if you have a cookie policy page or any other specific page where the banner is not necessary, it’s possible to exclude the banner from appearing. This guide will show you how to easily achieve that by making a simple customization within your site.

Step 1: Ensure the iubenda Privacy Controls and Cookie Solution Script is Embedded

First, make sure that the iubenda Privacy Controls and Cookie Solution script is already embedded on your site.

Once the script is in place, you can customize it to prevent the banner from displaying on specific pages.

Step 2: Hide the Banner on a Specific Page

To hide the cookie banner on a particular page, you can implement a quick adjustment, by adding a custom script after the iubenda Privacy Controls and Cookie Solution script. For example, if you want to hide the banner on your cookie policy page, follow these steps:

1. Identify the page where you want to exclude the banner. In this example, let’s say the URL is http://provawordpress.local/cookie-policy/.
2. You can add a simple rule that ensures the banner won’t appear on that specific page.

Here’s an example of how you can achieve this:

<script>
if(window.location.pathname === "/cookie-policy/") { 
    
     document.head.innerHTML = document.head.innerHTML + '<style>div#iubenda-cs-banner { display: none !important; } </style>';

}
</script>

In this case, the banner will be hidden when someone visits the cookie-policy page.

Here’s an example of how this script might look:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"cookiePolicyUrl":"http://provawordpress.local/cookie-policy/","consentOnContinuedBrowsing":false,"enableTcf":false,"whitelabel":false,"lang":"en-GB","siteId":1129739,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"cookiePolicyId":33731144, "banner":{ "closeButtonRejects":true,"acceptButtonDisplay":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"position":"float-top-center","closeButtonCaption":"<button type=\"button\" class=\"iubenda-cs-close-btn\" tabindex=\"0\" role=\"button\" aria-pressed=\"false\" style=\"background-color: rgb(239, 239, 239) !important; border-radius: 55px !important; border: 1px solid rgb(119, 119, 119) !important; font-size: 16px !important; font-weight: bold !important; padding: 10px 20px !important; height: 34px !important; color: rgb(102, 102, 102) !important; visibility: visible;\">Continue without accepting</button>" }, "footer":{"btnCaption":"Custom Test Here"}};

</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

<script>

//custom script to add

if(window.location.pathname === "/cookie-policy/") { 
    
     document.head.innerHTML = document.head.innerHTML + '<style>div#iubenda-cs-banner { display: none !important; } </style>';

}
</script>

Step 3: Customize for Any Page on Your Website

You can easily apply this same logic for any other page on your website. Let’s say you want to hide the banner on a different page, like www.test.com/about-us. In that case, simply update the script to match the URL of the page where you want the banner hidden.

For example:

<script>
if(window.location.pathname === "/about-us/") { 
    
     document.head.innerHTML = document.head.innerHTML + '<style>div#iubenda-cs-banner { display: none !important; } </style>';

}
</script>

This script will hide the banner whenever a user visits the /about-us/ page.

This small adjustment allows you to decide where the iubenda cookie banner displays on your website. Whether you want to hide the banner on a specific policy page or any other section of your site, you can easily customize the banner’s visibility according to your needs.