c15t/docs/integrations/hotjar.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Hotjar
description: Product analytics and behavior insights with a prebuilt helper that
  seeds Hotjar globals before loading the vendor bundle.
group: integrations
icon: hotjar
---
Hotjar helps you understand behavior with heatmaps, session recordings, and feedback tools. The `hotjar()` helper sets up Hotjar's `_hjSettings` global and `hj` queue stub, then loads the vendor script once `measurement` consent is granted.

## Integrate with c15t

**React**

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

const scripts = [hotjar({ siteId: 1234567, version: 6 })];

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 { hotjar } from '@c15t/scripts/hotjar';

const scripts = [hotjar({ siteId: 1234567, version: 6 })];

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

**JavaScript**

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

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [hotjar({ siteId: 1234567, version: 6 })],
});
```

## How c15t loads it

* **Category:** `measurement` (Analytics)
* **Loads when:** measurement consent is granted
* **On revocation:** unloaded - c15t removes the loader script element from the DOM, which prevents further loader-driven network requests. Existing Hotjar requests, timers, event listeners, and globals may continue until they finish or are cleared by Hotjar-specific APIs.

To load Hotjar from a custom URL:

```ts
hotjar({
  siteId: 1234567,
  scriptUrl: 'https://cdn.example.com/hotjar.js',
});
```

## Tracking events in your app

c15t gates loading of the Hotjar script until `measurement` consent is granted. The `hotjar()` helper initializes Hotjar globals by creating a pre-load queue stub at `window.hj`, so calls to Hotjar's runtime API (`window.hj(...)`) can be queued before the real script loads. After the helper runs, `window.hj` exists as that queue stub; once Hotjar's script loads, it is replaced by Hotjar's real implementation.

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.hj?.('event', 'signup');
    }
  }, [has]);

  // Call trackSignup() from an event handler after signup succeeds.
}
```

From plain JavaScript:

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

const { consentStore } = getOrCreateConsentRuntime();

if (consentStore.getState().has('measurement')) {
  window.hj?.('event', 'signup');
}
```

## Types

### HotjarOptions

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

\*ExtractedTypeTable: Could not extract "HotjarOptions" from "./packages/scripts/src/vendors/analytics/hotjar.ts" using base path "/home/runner/work/c15t/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 "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*