HubSpot – Show the Privacy Cookie Consent Banner above the Body instead of an Overlay

Dipin Krishna

7 years ago

When you enable the Cookie Policy in HubSpot you only have two options, either to show it as a top banner or as a bottom banner.

The top banner is going to be a fixed banner, making it an overlay on the content at the top.

Use the following jQuery code to push the body up/down when the banner is displayed/hidden.

    //Add a listner to get the status of the consent banner
    _hsq.push(['addPrivacyConsentListener', function(consent) {
            console.log(consent.allowed);
            if ($('#hs-eu-cookie-confirmation:visible').size() > 0){
                $('body').css('margin-top', $('#hs-eu-cookie-confirmation').height() + 'px');
            } else {
                $('body').css('margin-top', '0');
            }       
    }]);
    //Detect when the banner is inserted into the DOM
    $('body').on('DOMNodeInserted', '#hs-eu-cookie-confirmation', function(e) {
        console.log(e.target);
        if ($('#hs-eu-cookie-confirmation:visible').size() > 0){
                $('body').css('margin-top', $('#hs-eu-cookie-confirmation').height() + 'px');
        }
    });

Hope this helps!