Cookie Banner API Overview

Super Admins and users with permission to edit website settings can customize visitor cookie tracking and privacy policy banners to comply with EU cookie laws and the General Data Protection Regulation (GDPR).

A privacy alert allows visitors to opt in or opt out of being tracked in your HubSpot account with cookies. This feature works for all HubSpot pages as well as any external pages with your HubSpot tracking code installed.


Customize the cookie tracking settings and privacy policy alert.


Remove cookies: _hsp.push(['revokeCookieConsent']);

 

Remove the cookies created by the HubSpot tracking code that are included in the consent banner under GDPR. This would include the cookies related to tracking the visitor.

As a result of the cookies being removed, the visitor would see the cookie consent banner on their next page load, as they would appear as a new visitor.

You can find the specific list of cookies that will be removed  in this Knowledge Base article.

 
JavaScript
/*
Example code to remove the consent banner cookies
when a visitor clicks an element with the 'removeCookies' id.
*/

var _hsp = window._hsp = window._hsp || [];
document.getElementById("removeCookies").onclick = function() {
    _hsp.push(['revokeCookieConsent']);
};

Get privacy consent status:_hsp.push(['addPrivacyConsentListener',callbackFunction]);

  

Cookies by category

Allows you to get the privacy consent status of the current visitor. There are 3 categories of consent that can be used to provide more granular control to the user. These each have their own keys within the consent.categories object.

If the privacy policy consent banner is not enabled, or if the visitor has previously seen the banner and clicked accept or decline, the callbackFunction will be called as soon as the function is processed (immediately if the banner code is already loaded, or after the tracking code finishes loading if the function is pushed to _hsp before the tracking code is loaded).

If the consent banner is enabled, the callbackFunction will be called when the visitor clicks on the accept or decline button.  

JavaScript
// Log the analytics category consent status of the current visitor to the console

var _hsp = window._hsp = window._hsp || [];

// analytics
_hsp.push(['addPrivacyConsentListener', function(consent) {
    console.log(consent.categories.analytics); 
}]);

// advertisement
_hsp.push(['addPrivacyConsentListener', function(consent) {
    console.log(consent.categories.advertisement); 
}]);

// functionality
_hsp.push(['addPrivacyConsentListener', function(consent) {
    console.log(consent.categories.functionality); 
}]);

// or it can all be done in one call
_hsp.push(['addPrivacyConsentListener', function(consent) {
    console.log(`analytics: ${consent.categories.analytics}`); 
    console.log(`advertisement: ${consent.categories.advertisement}`); 
    console.log(`functionality: ${consent.categories.functionality}`); 
}]);

Cookies not by category

This is provided for backward compatibility with older scripts. For all new websites you should use the cookies by category method, giving more granular control over cookie activation.

Allows you to get the privacy consent status of the current visitor. 

consent.allowed is a boolean.

If the privacy policy consent banner is not enabled, or if the visitor has previously seen the banner and clicked accept or decline, the callbackFunction will be called as soon as the function is processed (immediately if the tracking code is already loaded, or after the tracking code finishes loading if the function is pushed to _hsp before the tracking code is loaded).

If the consent banner is enabled, the callbackFunction will be called when the visitor clicks on the accept or decline button.  

JavaScript
// Log the consent status of the current visitor to the console

var _hsp = (window._hsp = window._hsp || []);
_hsp.push(["addPrivacyConsentListener", function (consent) {
    if (consent.allowed) {
        console.log('something')
    }
}])

The callbackFunction accepts a consent object as its only argument.

The consent object has a single allowed property that will be true if:

  • The privacy policy consent banner is not enabled, or is enabled in notify-only mode.
  • The visitor clicks accept on the banner when opt-in mode is enabled.
  • The visitor has previously clicked accept on the banner when opt-in mode is enabled.

The property will be false if the consent banner is enabled in opt-in mode and the visitor clicks or has previously clicked the decline button.


Calling the showBanner function resurfaces the banner, enabling website visitors to make changes to their consent preferences. For example:

JavaScript
​​var _hsp = window._hsp = window._hsp || [];
​​_hsp.push(['showBanner']);

The behavior ofshowBannervaries by policy and is only available for Opt-In and Cookie-By-Category policies. 

For Opt-In policies, calling showBanner  will cause the banner to reappear.

devdocs-api-manageConsent_optin

For Cookies-By-Category policies, calling showBanner will cause the modal for selecting each category to reappear.

devdocs-api-manageConsent_cbc

UI Examples

This functionality can be made available to visitors in the form of buttons/links on your website that they can use to re-open the banner and edit their preferences. The following are examples with code. 

Button

A button, often placed in the website footer.
<button type="button" id="hs_show_banner_button"
      onClick="(function(){
        var _hsp = window._hsp = window._hsp || [];
        _hsp.push(['showBanner']);
      })()"
    >
      Cookie Settings
</button>
devdocs-api-manageconsentbutton

 

Fixed position button

A button with fixed positioning on the bottom of the screen. This kind of button has the advantage of being readily available and easy to find, while being somewhat obtrusive UX.
<button id='hs-hud-cookie-settings' onClick="(function(){
      var _hsp = window._hsp = window._hsp || [];
      _hsp.push(['showBanner']);
    })()">
      Cookie Settings
</button>
devdocs-api-manageConsent_tab

 

A link or highlighted text.
<a id="hs-cookie-settings-link" onClick="(function(){
      var _hsp = window._hsp = window._hsp || [];
      _hsp.push(['showBanner']);
    })()">
      Cookie Settings
</a>
devdocs-api-manageConsent_tab_v2

 

Previous Categories

In order for privacy consent listeners added to the banner to comply with changes in consent, the consent object passed to the listeners includes a previousCategories field which stores the previous consent state by category:
JavaScript
consent = {
  allowed: true or false,
  categories: {
    necessary: true,
    analytics: true or false,
    advertisement: true or false,
    functionality: true or false,
  },
  previousCategories: {
    necessary: true,
    analytics: true or false, # defaults to false
    advertisement: true or false, # defaults to false 
    functionality: true or false, # defaults to false
  },
}
NOTE: previousCategories is not preserved between page visits. Each time the user reloads or revisits the page previousCategories will be reset to the defaults.
Consent listeners can use previousCategories to identify when consent has changed and tailor their behavior appropriately. For instance, a tracking script might use a consent listener to drop cookies when it receives consent and remove those cookies when consent is revoked. The previousCategories field also allows listeners to recognize when consent has not changed and no action is required.
 
Here is an example of a consent listener that uses previousCategories:
JavaScript
_hsp.push(['addPrivacyConsentListener', function(consent) {
  const prevConsent = consent.previousCategories;
  const currConsent = consent.categories;
  const hasConsent = currConsent.analytics && currConsent.advertisement;
  const prevHadConsent = prevConsent.analytics && prevConsent.advertisement;
  const hasChanged = hasConsent !== prevHadConsent;
  
  if (hasChanged && hasConsent) {
    // drop cookies, execute code etc
  } 
  
  if (hasChanged && !hasConsent) {
    // remove cookies, undo actions and resepect user privacy
  }
}]);

Was this page helpful? *
This form is for feedback on our developer docs. If you have feedback on the HubSpot product, please share it in our Idea Forum instead.