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

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>
  );
}

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:

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:

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:

import { getOrCreateConsentRuntime } from 'c15t';

const { consentStore } = getOrCreateConsentRuntime();

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

Types

HotjarOptions

Script