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

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.

HubSpot Cookie policy banner
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!

Leave a comment

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.