# Hotjar

[Hotjar](https://www.hotjar.com/) is a tool used for product experience insights. With Hotjar, you can use heatmaps, recordings, surveys, and user interviews for a full picture of your User Experience.

{% hint style="warning" %}
Client-side only integrations cannot be used in HIPAA mode.
{% endhint %}

## Destination Info

* Accepts [Track](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#track) and [Identify](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#identify) calls
* Connection Modes:

<table><thead><tr><th width="158.33333333333331" align="right"> </th><th width="215" data-type="checkbox">Client-side</th><th data-type="checkbox">Server-side</th></tr></thead><tbody><tr><td align="right">Web</td><td>true</td><td>false</td></tr><tr><td align="right">Mobile</td><td>false</td><td>false</td></tr><tr><td align="right">Server</td><td>false</td><td>false</td></tr></tbody></table>

## Getting Started

### Follow these steps to enable the Hotjar destination:

1. Go to your Hotjar "Organization Settings" and copy your Hotjar Site ID. You'll enter this into the configuration setting in Freshpaint.&#x20;

   <figure><img src="/files/kzIBzbmrsp9PXF7sH40Z" alt=""><figcaption></figcaption></figure>
2. If you’re already using Hotjar, remove Hotjar’s snippet from your code. Freshpaint will load Hotjar's tracking code for you.

### Enable events in order to send them to Hotjar&#x20;

<figure><img src="/files/pvhqVDW3yi7MSLEtDOwu" alt=""><figcaption></figcaption></figure>

### Set up User Identification

In order to create user profiles and use those profiles to filter Recording and Heatmap data, create Segments, or show Feedback widgets and Surveys only to specific users, you need to have [User Identification ](https://documentation.freshpaint.io/readme/setting-up-identify)set up. See below for more on User Identification with Freshpaint and Hotjar.

### Confirm Data is Sending to Hotjar

If this integration is set up correctly, you will see Heatmaps and Recordings beginning to populate.

<figure><img src="/files/KRtYEhc4x32gpA5DF9c2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lw9Vs0DDRaZ1MXJYLP5Y" alt=""><figcaption></figcaption></figure>

## Identify

When you call [freshpaint.identify](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#identify), Freshpaint will create a user in Hotjar by calling Hotjar's [**Identify API**](https://help.hotjar.com/hc/en-us/articles/360033640653).  The user properties sent to Hotjar are saved as **User Attributes**. These User Attributes can be used by Hotjar to enable advanced filtering and segmentation, giving you quality insights faster than before. You can send up to **100 user attributes** on any site, with any number of users associated with those attributes. Read the following [What Are User Attributes](https://help.hotjar.com/hc/en-us/articles/4402892526487) article in Hotjar's documentation to learn more.

Here is an example of an identify call to Freshpaint:

```
freshpaint.identify({
    "email": "john.doe@example.com",
    "firstName": "John",
    "lastName": "Doe",
    "phone": "555-555-5555"
  }
)
```

{% hint style="warning" %}

#### Hotjar's Identify API cannot store arrays or objects passed to it

Hotjar's Identify API will reject these values if you attempt to pass them in the identify call.
{% endhint %}

Consider the following example:

```
freshpaint.identify({
    "email": "john.doe@example.com",
    "firstName": "John",
    "lastName": "Doe",
    "phoneNumbers": {
        "555-555-5555",
        "222-222-2222"
    }
  }
)
```

In the example above, the all the values in the `phoneNumbers` field will be rejected by Hotjar.

## Events

When you send an event to Hotjar via the Freshpant App, or when you call freshpaint.track, Freshpaint creates an event in Hotjar through their  [Events API](https://help.hotjar.com/hc/en-us/articles/4405109971095).

{% hint style="warning" %}
Hotjar doesn't pass any event properties from Freshpaint as Hotjar currently doesn't support them. For more details on events in Hotjar, see this article on [What Are Events?](https://help.hotjar.com/hc/en-us/articles/4413876230423) in Hotjar's documentation.
{% endhint %}

Consider the following example track call:

```
freshpant.track("Test Event", {
  event_id: "1234",
  test_property: "testing123"
});
```

Hotjar will reject the properties of the event - only the event name, "Test Event" will be recorded.

For Hotjar's Observe tools (Heatmaps and Recordings), Events are available on the Observe Business or Observe Scale plans. With the Ask tools (Feedback and Surveys), Events are available on the Ask Plus, Ask Business, or Ask Scale plans. See the [Hotjar pricing page](https://www.hotjar.com/pricing/) for plans and pricing details.

When you enable the Hotjar destination in Freshpaint, recordings will automatically be sent to Hotjar.

<figure><img src="/files/teyIBLNJKLLH2vo7FyUj" alt=""><figcaption></figcaption></figure>

When you enable the Hotjar destination in Freshpaint, heat maps will also automatically be sent to Hotjar.

<figure><img src="/files/uWRO8lMDBgSK55zl3ynK" alt=""><figcaption></figcaption></figure>

You can also view reports on the data you're sending to Hotjar on your Hotjar Dashboard:

<figure><img src="/files/rqcOXwi8gUciu1svrkHP" alt=""><figcaption></figcaption></figure>

## Configuration Options

### Connection Mode

Only client-side connection mode is available for this destination. Events originating from the user's web browser will be sent directly to Hotjar.

### Event Transformations

Set up transformations to modify your data before it's sent to your destination. Read more about transformations [here](https://documentation.freshpaint.io/transformations).

<figure><img src="/files/aOKkpLvEjEmGXuzLhTCA" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.freshpaint.io/integrations/destinations/apps/hotjar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.