Skip to main content

Placeholders

CookieHub offers a powerful feature to show or hide any HTML element based on the user's cookie preferences. This can be useful to display or hide specific content based on the user's consent. You can add the data-consent attribute to any HTML element to define which cookie category the element belongs to. If the user consents to that category, the element will be visible; otherwise, it will be hidden.

For example, consider the following code:

<div data-consent="analytics">
    Analytics category allowed
</div>
<div data-consent="analytics" data-inverse>
    Analytics category not allowed
</div>

In this code, we have two <div> elements, each with the data-consent attribute set to "analytics". The first <div> will be visible if the user consents to the "analytics" category, while the second <div> will be visible if the user does not consent to the "analytics" category.

In addition to showing or hiding elements, CookieHub also provides a way to display placeholders when certain content is blocked due to the user's cookie preferences. For example, if you embed a YouTube video on your website, you can add a placeholder element that will be displayed if the user does not consent to the "analytics" category. When the user gives consent, the actual video will be loaded and displayed.

Here's an example of how to use placeholders with iframes:

<style type="text/css">
    .placeholder {
        width: 560px;
        height: 315px;
        text-align: center;
        background: #eee;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<div class="placeholder" data-consent="analytics" data-inverse>
    <div>
        <p>Enable analytics cookies to show the embedded YouTube video</p>
        <p><a href="#" class="ch2-open-settings-btn">Manage my cookie choices</a></p>
    </div>
</div>
<div data-consent="analytics">
    <iframe data-consent="analytics" width="560" height="315" data-src="https://www.youtube.com/embed/7-RhgB1INII" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

In this code, we have a <div> element with the class "placeholder" that contains a message to the user asking them to enable analytics cookies to view the YouTube video. This element has the data-consent attribute set to "analytics" and the data-inverse attribute to show the message when the user does not consent to the "analytics" category.

Below the placeholder element, we have an <iframe> element with the data-consent attribute set to "analytics". This iframe will only be visible if the user consents to the "analytics" category, and the video will be loaded and displayed inside it.

Overall, this feature allows you to customize the user experience based on their cookie preferences and helps you stay compliant with privacy regulations.