@hotjar/browser demo

Installation

Add this package as a dependency in your project, then import the library in your code.

Check the following demo on how to use this library!

yarn add @hotjar/browser

import Hotjar from '@hotjar/browser'

Initialize Hotjar

In order for Hotjar to run, it needs to be initialized with your site ID. You can find your site ID on this page just before your site name.

You can press the button to initialize Hotjar which will allow to use the rest of the features.

Hotjar is not initialized

const siteId = 123;
const hotjarVersion = 6;

Hotjar.init(siteId, hotjarVersion);

// Initializing with `debug` option:
Hotjar.init(siteId, hotjarVersion, {
  debug: true
});

Identify API

One of the main interest of this library is to be able to use Hotjar Identify API.

You can fill the form to identify yourself with a name and favorite color.

const userId = 'abc_123';
const firstName = 'John';
const favoriteColor = 'blue';

Hotjar.identify(userId, {
  first_name: firstName,
  color: favoriteColor
});

Events API

You can also track specific actions taken by your users and send that data to Hotjar via the Hotjar Events API.

You can press the button to generate an event, you can then filter your Recordings by users who encountered that event during their session.

const actionName = 'subscribed';
Hotjar.event(actionName);

Manual URL changes

Depending on how your website routing works, you might need to manually instruct Hotjar when a route change has happened. More details about URL changes.

You can press the button to instruct Hotjar the URL has changed

The current page is /

const newPage = '/new';

Hotjar.stateChange(newPage);