# HubSpot

{% hint style="warning" %}
This courtesy guide is **no longer actively tested** by Openli, although it might still work.

Our cookie-consent widget intentionally uses a highly-compatible, highly-generic approach to integration. In most cases, it will be possible for your developers to adapt this guide's steps to any changes that might have been made to the target platform, in combination with their own general documentation. **Our** [**consent-state events**](https://docs.openli.com/docs/documentation/legaljs-widget/collecting-cookie-consent/consent-state-api#listening-for-consent-change-events) **might be useful for this.**
{% endhint %}

## 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

### Step 1: Activate HubSpot's (non-compliant) cookie-consent banner

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](https://knowledge.hubspot.com/reports/customize-your-cookie-tracking-settings-and-privacy-policy-alert), and your cookie-banner settings should look like this:

![](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LRMQvUsiQMLNstTU-cS%2F-MT0SGKD2UpwAPvwc0Zy%2F-MT0f3cZ4AdlzSEhRuNj%2FHubSpot%20cookie%20settings.png?alt=media\&token=b8020f20-da76-4485-9f95-7d2eacdea5ec)

{% hint style="warning" %}
HubSpot's built-in cookie-consent banner, when used on its own, is **not sufficient to ensure compliance with the GDPR** and other similar privacy laws. Using Openli's cookie-consent widget helps to close this compliance gap.
{% endhint %}

### 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](https://knowledge.hubspot.com/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of-my-pages):

```markup
<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>
```

{% hint style="success" %}
Because HubSpot provide only an "accept all"/"reject all" option for their cookies, consent must be given to analytics *and* marketing cookies before HubSpot's cookies can be enabled.\
\
We strongly recommend using the option in your Openli cookie widget to **present an "Accept all" button to users**, to make it simpler to opt in to the categories HubSpot use.
{% endhint %}

### Step 3: Add the Openli cookie-consent widget to your site

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](https://knowledge.hubspot.com/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of-my-pages):

```markup
<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>
```

{% hint style="info" %}
The approach used in the guide is very similar to [HubSpot's own recommendation](https://community.hubspot.com/t5/Blog-Website-Page-Publishing/Managing-HubSpot-cookies-when-you-use-a-third-party-cookie/m-p/385911) 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.
{% endhint %}