Add a placeholder for blocked page elements

Use a placeholder when a blocked page element leaves an empty space on your site. This can happen with embedded videos or other visual elements that are blocked until the visitor gives consent.

For example, you can add a placeholder for:

• A YouTube or Vimeo video
• A login form from another service
• A booking widget
• A map
• A newsletter signup form

When our cookie-blocking script blocks a third-party script, the affected content may not load. Visitors may see a blank space where the content would normally appear.

You can add a placeholder to explain why the content isn’t visible and let visitors update their consent preferences. The placeholder disappears after the visitor gives consent for the required cookie category.

Before you start

This feature has been available in all platform templates since June 10, 2020. If you’re using an older template, you can update it to get this feature. Read more 

Add the placeholder for blocked page elements

Place this element under the blocked script in your website’s HTML: 

<div class="consent-placeholder"  
data-category="cookie_cat_marketing"  
onClick="CookieConsent.renew()"> 
You have not yet consent to marketing
</div>

If you do not have this feature in your current template, then you can copy it and place it yourself in the JavaScript field of the template.

Example

Use this setup for blocked YouTube or Vimeo embeds when the content belongs to the marketing cookie category:

<!-- Blocked YouTube or Vimeo script -->

<div class="consent-placeholder" 
data-category="cookie_cat_marketing" 
onClick="CookieConsent.renew()">
You haven't given consent for marketing cookies.
</div>

Add the feature manually

If your current template doesn’t support this feature, add this code to the JavaScript field in your template:

window.addEventListener('CookieInformationConsentGiven', function(event) {
    var consentplaceholders = document.getElementsByClassName('consent-placeholder');
    if (consentplaceholders) {
        for (var i = 0; i < consentplaceholders.length; i++) {
            if (!CookieInformation.getConsentGivenFor(consentplaceholders[i].getAttribute('data-category'))) {
                consentplaceholders[i].style.display = 'block';
            } else {
                consentplaceholders[i].style.display = 'none';
            }
        }
    }
}, false);

Done.