---
title: Hightouch
description: Load Hightouch Events with c15t and gate the browser SDK behind
  measurement consent.
group: integrations
icon: hightouch
lastModified: "2026-08-04T19:55:26+01:00"
---
[Hightouch Events](https://hightouch.com/docs/events/overview) collects customer behavior from websites and sends it into Hightouch for warehouse-backed analytics, activation, and real-time workflows. The `hightouch()` helper creates Hightouch's `window.htevents` queue, records the write key and optional API host for the standalone loader, optionally queues the initial `page()` call, and loads the browser SDK when `measurement` consent is available.

## Integrate with c15t

**React**

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { hightouch } from '@c15t/scripts/hightouch';

const scripts = [
  hightouch({
    writeKey: 'WRITE_KEY',
    apiHost: 'us-east-1.hightouch-events.com',
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**Next.js**

```tsx
'use client';

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { hightouch } from '@c15t/scripts/hightouch';

const scripts = [
  hightouch({
    writeKey: 'WRITE_KEY',
    apiHost: 'us-east-1.hightouch-events.com',
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { hightouch } from '@c15t/scripts/hightouch';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [
    hightouch({
      writeKey: 'WRITE_KEY',
      apiHost: 'us-east-1.hightouch-events.com',
    }),
  ],
});
```

## How c15t loads it

* **Category:** `measurement` (Analytics)
* **Loads when:** measurement consent is granted
* **On revocation:** unloaded - c15t removes the script element it created. The `window.htevents` runtime object is left in place until the next page load (c15t reloads the page on revocation by default), so treat the load gate as the consent boundary.

The helper maps Hightouch's browser snippet into the manifest engine:

```ts
hightouch({
  writeKey: 'WRITE_KEY',
  apiHost: 'us-east-1.hightouch-events.com',
});
```

It creates `window.htevents`, defines the official queue methods, queues:

```ts
window.htevents.load('WRITE_KEY', {
  apiHost: 'us-east-1.hightouch-events.com',
});
window.htevents.page();
```

and loads:

```txt
https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js
```

`writeKey` is required and must be a non-empty string after trimming. `apiHost` is optional; Hightouch's SDK defaults to `us-east-1.hightouch-events.com`, so pass it only when your Event Source uses another region or a first-party tracking host.

## Configure page tracking

By default the helper queues `htevents.page()` before the vendor bundle loads. If you want to handle page views yourself, set `trackPageView` to `false`.

```ts
import { hightouch } from '@c15t/scripts/hightouch';

hightouch({
  writeKey: 'WRITE_KEY',
  trackPageView: false,
});
```

To proxy or self-host the loader, pass a custom URL:

```ts
hightouch({
  writeKey: 'WRITE_KEY',
  scriptUrl: 'https://analytics.example.com/events.min.js',
});
```

## Consent behavior

c15t blocks the Hightouch SDK from loading until `measurement` consent is granted and unloads it on revocation. Hightouch does not expose a browser API that prevents collection while loaded — the SDK writes identifiers and delivers events to Hightouch as soon as it runs — so gating the load is the only default that reliably honors missing or denied consent. See the [RudderStack consent notes](/docs/integrations/rudderstack#consent-behavior) for the full reasoning behind this model versus vendor consent-API mapping (as used for Google Tag Manager).

## Tracking events in your app

c15t gates the Hightouch browser SDK from loading until `measurement` consent is granted. Your application code that calls Hightouch's runtime API (`window.htevents.track`, `identify`, etc.) is **not** automatically gated - `window.htevents` does not exist until c15t initializes the integration, so unguarded calls made before that (or while consent is denied) throw. Once the integration is initialized with consent, early calls queue normally until the SDK finishes loading.

Guard event calls by checking consent state. From React:

```tsx
import { useCallback } from 'react';
import { useConsentManager } from '@c15t/react';

function SignupExample() {
  const { has } = useConsentManager();

  const trackSignup = useCallback(() => {
    if (has('measurement')) {
      window.htevents?.track('Signup Completed', { plan: 'pro' });
    }
  }, [has]);
}
```

From plain JavaScript:

```ts
import { getOrCreateConsentRuntime } from 'c15t';

const { consentStore } = getOrCreateConsentRuntime();

if (consentStore.getState().has('measurement')) {
  window.htevents?.track('Signup Completed', { plan: 'pro' });
}
```

## Types

### HightouchOptions

|Property|Value|
|:--|:--|
|Type Name|\`HightouchOptions\`|
|Source Path|\`./packages/scripts/src/vendors/analytics/hightouch.ts\`|

\*ExtractedTypeTable: Could not extract "HightouchOptions" from "./packages/scripts/src/vendors/analytics/hightouch.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Script

|Property|Value|
|:--|:--|
|Type Name|\`Script\`|
|Source Path|\`./packages/core/src/libs/script-loader/types.ts\`|

\*ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.\*