HubSpot

This guide explains how to integrate the Openli cookie widget on a site that is hosted by HubSpot.

Requirements

  1. A Openli cookie widget, with a published cookie policy, ready to install

  2. A website hosted on HubSpot

Integrating Openli on a HubSpot-hosted site

HubSpot do not currently provide an adequate way for us to communicate consent status to their own platform, so you must activate HubSpot's built-in cookie-consent banner. Openli's cookie widget will then use this behind the scenes, supplementing our own consent management, and providing the best current level of integration with HubSpot.

HubSpot have a general guide to enabling their banner here, and your cookie-banner settings should look like this:

Step 2: Add code to your site to integrate Openli and HubSpot

Add this code to the head (not the footer) of your site, following HubSpot's general guide:

<style>
    /* Hide the HS cookie-banner.
    It is controlled through the LM widget instead. */
    #hs-eu-cookie-confirmation {
        display: none !important;
    }
</style>
<script>
    // These will be set to true if the user has already consented when
    // the events below are run.
    var analyticsConsent = false;
    var marketingConsent = false;

    function handleConsent() {
        // If the user accepts both analytics and
        // marketing, HubSpot's cookies can be set.
        if (analyticsConsent && marketingConsent) {
            // Get a reference to the HubSpot cookie-banner's accept button.
            acceptButton = document.querySelector("#hs-eu-confirmation-button");
            // If the button exists (a decision was not already taken), click it.
            acceptButton && acceptButton.click();
        }
    }

    // Listen for acceptance of analytics consent.
    window.addEventListener(
        "legalmonster.cookie.analytics.accepted",
        function() {
            analyticsConsent = true;
            handleConsent();
        }
    );
    // Listen for acceptance of marketing consent.
    window.addEventListener(
        "legalmonster.cookie.marketing.accepted",
        function() {
            marketingConsent = true;
            handleConsent();
        }
    );
  
    // If either analytics or marketing consent is refused or revoked,
    // trigger HubSpot's cookie-refusal method.
    function refuseHubSpotCookies() {
        // HubSpot documentation:
        // https://developers.hubspot.com/docs/methods/tracking_code_api/remove_cookies
        var _hsp = window._hsp = window._hsp || [];
        _hsp.push(["revokeCookieConsent"]);
    }
    // Listen for rejection of analytics consent.
    window.addEventListener(
        "legalmonster.cookie.analytics.rejected",
        function() {
            analyticsConsent = false;
            refuseHubSpotCookies();
        }
    );
    // Listen for rejection of marketing consent.
    window.addEventListener(
        "legalmonster.cookie.marketing.rejected",
        function() {
            marketingConsent = false;
            refuseHubSpotCookies();
        }
    );
</script>

Add code like this, from your cookie-widget settings, to the footer (not the head, unlike before) of your site, following HubSpot's general guide again:

<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.widget({
        type: "cookie",
        widgetPublicKey: "...",
    });
</script>

The approach used in the guide is very similar to HubSpot's own recommendation for integrating third-party cookie-consent solutions like Openli. We therefore expect HubSpot to continue to support it, but all changes they make are outside our control.

Last updated