How to add a cookie consent banner to HubSpot CMS pages

Where to paste the snippet in HubSpot

HubSpot prints site-wide header code on every page it hosts for a domain: website pages, landing pages and blog posts.

1. Click the settings icon in the top navigation bar, then go to Content, then Pages in the left sidebar.
2. In the Choose a domain to edit its settings dropdown, select your domain, or Default settings for all domains.
3. In the Site Header HTML section, click Override default settings if you picked a domain, paste the snippet at the top, and click Save.

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>

HubSpot documents the field as available with all products and plans; you need the Website settings permission. A page's own Head HTML (in the page editor's advanced options) is printed after the site header, so page-level tags still see the snippet first.

How to connect HubSpot's own banner and tracking code

HubSpot pages load HubSpot's tracking code, which sets __hstc (six months), hubspotutk, __hssc and __hssrc, and HubSpot offers its own cookie banner under Settings, then Privacy & Consent, then the Cookies tab. With Cookiequiet, both must follow the visitor's choice. HubSpot provides a browser API for that: a flag that disables its banner, and a method that sets the consent state of its tracking code. Paste this right after the snippet in Site Header HTML:

html
<script>
  window.disableHubSpotCookieBanner = true;
  window._hsp = window._hsp || [];
  window.addEventListener('cq:consent', function (e) {
    var c = e.detail.categories;
    window._hsp.push(['setHubSpotConsent', {
      analytics: c.indexOf('analytics') >= 0,
      advertisement: c.indexOf('marketing') >= 0,
      functionality: c.indexOf('functional') >= 0
    }]);
  });
</script>

HubSpot requires the flag to be set near the top of the head, before its banner loads, which is why it sits with the snippet. HubSpot also notes that consent passed this way is not stored in its own banner cookies; that is fine, because Cookiequiet dispatches the cq:consent event on every page load where a choice is stored, and again after each new choice, so the tracking code receives the current state every time. With analytics set to false, HubSpot's tracking code withholds its cookies.

How to handle the other tags

• Google Analytics and Tag Manager. HubSpot has integration fields for them, and HubSpot itself documents that a Google tag added through header HTML is not controlled by its banner. Paste the Google tag in Site Header HTML below the snippet instead, marked (type="text/plain" data-cq-category="analytics") or preceded by Google's default consent block, as explained in the Google Analytics 4 and Google Tag Manager guides.
• Meta Pixel. Added through HubSpot's ads tool, the pixel is loaded by HubSpot and follows the advertisement value set above. Pasted by hand, mark it marketing.
• Embeds. In a rich text module, open the source code and write iframes with data-cq-src instead of src.
• Forms, CTAs and meetings are first-party HubSpot features; their cookies are necessary.

How to add the Cookie preferences link

Open the global footer module of your theme and add a link labelled "Cookie preferences" with the URL #cq-preferences. If the editor rewrites the URL, open the rich text source and insert <a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>. The floating preferences button in the banner settings is the no-code alternative.

How to test

1. Open a page in a private window and click Reject all.
2. Check the cookies in the developer tools: cq_consent only, no _ga, no _fbp, and no __hstc or hubspotutk.
3. Clear the cookies, click Accept all, reload: the marked tags run and HubSpot's cookies appear.
4. Submit a test form: the submission still works, with or without consent.
5. Check the consent log in the Cookiequiet dashboard.

What is specific to HubSpot

• One banner. With the flag set, HubSpot's banner does not show; do not also turn on the opt-in banner in Privacy & Consent, or visitors get two.
• Per-domain settings. Site Header HTML is per domain; repeat the step for each domain you host on HubSpot, or use the default settings for all domains.
• Global Privacy Control. Cookiequiet honours the browser signal as an opt-out in US states with a privacy law; HubSpot's own GPC toggle only applies to its banner.
• Landing pages on the same domain get the same header, so the banner and the bridge cover them.