# HubSpot

The c15t hubspot helper loads the HubSpot tracking code only after visitors allow marketing in Inth. It sends each consent choice to HubSpot and revokes cookies on withdrawal.

## Key facts

- **Tool:** HubSpot
- **Category:** Other
- **Consent categories:** Marketing
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/hubspot)
- [HubSpot](https://www.hubspot.com/)

Run HubSpot tracking, forms and chat behind your c15t banner. The loader waits for marketing consent, and HubSpot receives every choice the visitor makes.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

[Start for free](/dashboard/sign-up)

## Before you start

You need an Inth project that connects to your app, c15t in that app and the numeric portal ID from your HubSpot tracking snippet.

For a snippet that ends in js-eu1.hs-scripts.com/123456.js, the portal ID is 123456 and the region is eu1. The portal ID is public.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent works with HubSpot

Before marketing has permission, the c15t hubspot helper creates no HubSpot globals or queues. Measurement or functionality alone does not load it.

After permission, the helper turns off the HubSpot banner. It sends the c15t categories through setHubSpotConsent before it adds the loader. So c15t stays the only consent UI.

Measurement maps to analytics, marketing to advertisement and functionality to functionality. HubSpot does not save these values, so the helper sends them on each page with consent.

When a granted field becomes denied, the helper queues revokeCookieConsent and then sends the grants that remain. Keep reloadOnConsentRevoked on, so the next page does not run HubSpot.

## Installation

HubSpot has one load mode in c15t. The helper waits for marketing permission.

### Wait for permission

No HubSpot loader reaches the page until the visitor accepts marketing. On withdrawal, c15t revokes HubSpot cookies and reloads.

```ts
hubspot({ portalId })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then HubSpot loads on the first page. This guide uses an opt-in policy.

## Setup steps

#### Install the integration package

Add the helpers next to c15t. An import alone does not start HubSpot.

```
pnpm add @c15t/integrations
```

#### Add your portal ID

For a regional portal, also set region to the code from your snippet, such as eu1. Register one HubSpot portal per page.

```
import { hubspot } from '@c15t/integrations/hubspot';

export const scripts = [hubspot({ portalId: '123456' })];
```

Set chat to true to have the helper load the chat widget. The widget also waits for functionality consent.

### Register it with your existing setup

#### Next.js

Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

```
import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });
```

#### TanStack Start

Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

```
import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>
```

#### React

Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

```
import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>
```

#### Nuxt

Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

```
import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});
```

#### Vue

Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

```
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});
```

#### Astro

Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

```
<script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>
```

#### SvelteKit

Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

```
<script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>
```

#### HTML: Paste the vendor’s snippet behind consent

The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

```
<script type="text/plain" data-c15t-category="marketing">
  // The vendor's snippet, unchanged
</script>
```

#### JavaScript

Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

```
import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
```

Remove snippets that you added by hand, copies in a tag manager and the tracking code of the WordPress plugin. Pages on the HubSpot CMS already include the tracking code.

## Verify your setup

Start a fresh browser session and open DevTools Network. Then test the three states.

- **Before a choice**: Allow only measurement or functionality. No HubSpot loader or child request appears.

- **After you allow marketing**: Exactly one hs-script-loader appears, with your portal URL. No HubSpot banner shows.

- **After you withdraw marketing**: The privacy queue gets revokeCookieConsent before the new consent state. c15t then reloads the page.

The helper adds no page view and does not identify visitors. Call the HubSpot identify API only after consent allows it. The loader URL alone is not a full CSP allowlist.

[Open the full HubSpot guide](https://c15t.com/docs/integrations/hubspot)

## Related guides

- [Insider](/integrations/insider)

- [Klaviyo](/integrations/klaviyo)

- [Marketo Munchkin](/integrations/marketo)