> ## Documentation Index
> Fetch the complete documentation index at: https://www.macaly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Hotjar

> Add Hotjar to your Macaly project

Hotjar shows you how visitors actually use your site. Heatmaps reveal where people click and scroll. Session recordings let you watch real visits. If analytics tells you *what* happened, Hotjar shows you *why*.

<Callout icon="user">
  Available on all plans
</Callout>

## Why use Hotjar

* **See where every click, scroll, and tap lands.** Heatmaps show which parts of your page get attention and which get ignored.
* **Watch real visits, not just numbers.** Session recordings show you where visitors get confused, hesitate, or drop off.
* **Hear from visitors without asking them to leave.** On-page surveys and feedback buttons let visitors tell you what's working.
* **Find the step where people abandon your flow.** Funnel reports pinpoint exactly where signups, checkouts, or onboarding fall apart.

## What you need

Before you start, make sure you have:

* A **Hotjar account**. Create one for free at [hotjar.com](https://www.hotjar.com)
* Your **Hotjar Site ID**. A number that looks like `1234567`

<Accordion title="How to find your Site ID">
  1. Log in to [Hotjar](https://insights.hotjar.com)
  2. Go to **Settings**
  3. Under **Organization**, click **Sites & organizations**
  4. Your **Site ID** is listed next to your site name
</Accordion>

## Add Hotjar to your project

Open the chat in your Macaly project and ask the agent:

```
Add Hotjar to my site. My Site ID is 1234567.
```

The agent adds the Hotjar tracking script to your project. Once your site is published, Hotjar starts collecting data automatically.

<Tip>
  Replace `1234567` with your actual Site ID from your Hotjar dashboard.
</Tip>

## Verify it's working

<Steps>
  <Step title="Open your browser's developer tools">
    In Chrome, go to **View > Developer > Developer Tools** and select the **Network** tab.
  </Step>

  <Step title="Visit your published site">
    Open your live Macaly project and refresh the page.
  </Step>

  <Step title="Filter for Hotjar">
    Type `hotjar` in the Network tab filter field. You should see requests loading — with only your Site ID appearing. That means Hotjar is installed correctly.
  </Step>
</Steps>

<Info>
  Tracking scripts run in the editor preview too, but data will be attributed to the preview domain, not your published site. For accurate recordings and heatmaps, check your Hotjar dashboard after deploying.
</Info>

## What to track

Hotjar starts recording sessions and generating heatmaps as soon as it's active. You can also ask the agent to help with more advanced setups:

| What you want         | Example prompt                                                                   |
| --------------------- | -------------------------------------------------------------------------------- |
| Track a specific page | *"I want Hotjar heatmaps only on the pricing page"*                              |
| Add a feedback widget | *"Add a Hotjar feedback button to the bottom right of every page"*               |
| Tag recordings        | *"Tag Hotjar recordings when someone reaches the thank-you page"*                |
| Identify users        | *"Pass the logged-in user's email to Hotjar so I can search recordings by user"* |

<Info>
  **Cookie consent.** Hotjar sets cookies to recognize returning visitors and record sessions. If your site has visitors from the EU, UK, or other regions with privacy laws, you are responsible for ensuring a cookie consent solution is in place before Hotjar loads.
</Info>

## Good to know

* Hotjar's **free plan** includes limited session recordings and heatmaps per month. Check [Hotjar pricing](https://www.hotjar.com/pricing/) for current limits
* Heatmaps need a minimum number of visits before they become useful. Give it a few days of traffic
* Hotjar automatically masks sensitive fields like passwords and credit card numbers in recordings
* If you also use [Google Tag Manager](/en/integrations/google-tag-manager), you can load Hotjar through GTM instead of adding it directly. The agent can help with either approach