How [#DETAILS#] works?

Hi Bulletta,

You won’t find the answer to what you’re looking for there. If you go to the Manager, under the Dialog tab, you’ll notice a small gray “?” next the label: “HTML definition of consent banner” a list will appear with all placeholder tags, and their description.

In this case:
[#DETAILS#] Show/hide details label

Hi Richard,
thank you for the answer.

We noticed the help button “?” and we read all the information in that window and in the developer documentation page, but it does not solve our problem.

In the HTML box of custom cookie bar we wrote:

<div id="cookiebanner" lang="[#LANGUAGE#]" dir="[#TEXTDIRECTION#]" ng-non-bindable>
  <div id="c-left">
    <p class="c-header">[#TITLE#]</p>
    <p class="c-message">[#TEXT#]</p>
  </div>
  <div id="c-right">
    <a href="javascript:void(0)" onclick="Cookiebot.dialog.submitConsent()" class="c-button">Acconsento</a>
    <a href="javascript:void(0)">[#DETAILS#]</a>
  </div>
  <div style="clear:both"></div>
</div>

and in the javascript function box we have:

var cookieBannerSliderPos = 0;

function showCookieBanner() {
    var cookiebanner = document.getElementById("cookiebanner");
    var dialogHeight = parseInt(cookiebanner.offsetHeight);
    cookiebanner.style.bottom = (cookieBannerSliderPos - dialogHeight) + "px";
    cookieBannerSliderPos += 4;
    if (cookieBannerSliderPos < dialogHeight) {
        setTimeout(function () {
            showCookieBanner();
        }, 1);
    } else {
        cookieBannerSliderPos = 0;
        cookiebanner.style.bottom = "0px";
    }
}

function hideCookieBanner() {
    var cookiebanner = document.getElementById("cookiebanner");
    cookiebanner.style.display = "none";
}

window.addEventListener('CookiebotOnDialogInit', function (e) {
  CookiebotDialog.multiAcceptText = "Acconsento a tutti";
}, false);

As you can note seeing the site page staging.beperfectlifestyle.com, by clicking the button “Impostazioni” (=”Details” toggle) we do not obtain any results, and we do not understand how this piece of code, in particular the metasyntactic html variable [#DETAILS#], can give us all the requested data (the table with list of cookie and the javascript code to show/hide that table).

Hope this help you to better understand the issue.

Thank you.
Kind regards,
Gianfranco

Hi Richard,
here we are again.

We have made some changes to the code (HTML and CSS) and now we are closer to a solution, we just need a look to current solution to understand what we are missing, in particular:
– “details” button (“Impostazioni” in italian) does not toggle on/off the div with details (div#CybotCookiebotDialogDetail)
– the CSS style of div#CybotCookiebotDialog does not follow the window resolution

At the end: are there some functions to perform these operations or should we write our owns?

Thank you, kind regards,
Gianfranco

Hi Gianfranco,

We don’t generally offer support with the customization of banners, since this can quickly get out of hand.
I would suggest an “onclick” attribute to sets the style to display:none; / display:block; or something similar. The placeholders only generate content, not functionality.
When customizing, all functions, CSS definitions and HTML mark-up will have to be done by you.