How to Set Up Heatmaps on Your Website with Hotjar

Posted March 16th, 2026 in Analytics. Tagged: heatmap.

The visual tools assist you to observe the area in which people click, scroll, or spend time on your web pages in the form of heatmaps. Hotjar is among the most trendy tools to create heatmaps – and it is not hard to install it, as long as you follow the steps below.

At the conclusion of this guide, you will know:

What heatmaps are
Why they matter
How to install Hotjar
How to create heatmaps
The way to perceive and interpret heatmap data.

Who uses Heatmaps and When to Use Heatmaps

Heatmap can be used by any person who is in charge of a site, but desires to perform better. You do not have to be a technical expert. When you own a small business site, an online store, landing pages, and do the marketing campaigns, heatmaps might assist you in understanding what your visitors are doing.

Heatmaps should be taken into consideration in case you observe such issues as low conversions, low button clicks, and high bounce rates. As an example, a heatmap can reveal that people are not purchasing your product when visiting your product page, but are not paying attention to your “Add to Cart” button. Unless the visitors are scrolling to the point where important information is available, you will of course know when they have stopped.

Heatmaps also come in handy once a page has been redesigned. You can observe actual behavior as opposed to making assumptions as to whether the new layout works or not. To summarize it all, heatmaps should be applied when clarity is desired over assumptions.

Preparations Before Hotjar set up

To install Hotjar, it is better to prepare a few things. This will save time and create confusion in the future.

First of all, you should make sure that you have access to the backend or the code of your website. You will get permission to insert a tracking script. In case your site is handled by a web developer, notify him early enough to help you. The tracking code can not be installed without access.

Second, make a choice of the pages to analyze. Effort not to follow everything simultaneously. Begin by high-impact pages such as your home page, product pages or landing pages. It is conversions that these pages tend to influence the most.

Third, be clear about your objective. Do you want to raise the number of button clicks? Improve form submissions? Increase sales? The heatmap data can be made significant when you have known where you are going to. Otherwise, you can gather information and be unaware of what to do.

A set up becomes easier and efficient with proper preparation.

1. Understanding Heatmaps and Why You Need Them

We should first define a heatmap before beginning the setup.

A heatmap is a graphical overlay to your web page that indicates:

Where users have clicked (Click Heatmap)
The extent of the scrolling down (Scroll Heatmap) of the page used by users.
Where users scroll their mouse (Move/Attention Heatmap)

A heatmap is simply a colored overlay to your page:

Red / Warm colors imply high involvement.
Yellow / Moderate colors imply average engagements.
Blue / Cool colors imply low involvement.

Why use heatmaps?

In order to understand what the users engage in.
To determine areas that go unvisited by the users.
To enhance page layout and call-to-action.

2. Create a Hotjar Account

Hotjar is free to use and you have to join it in order to use heatmaps.

Step A: Open Hotjar Website

Go To: https://hotjar.com/product/heatmaps/
Click the Sign Up/ Get Started button.

Step B: Enter Your Email

You will have a form that requests your email.
Enter your email address.
Choose a password.

Step C: Verify Your Email

Hotjar will also send an email verifying.
Click on Verify, on the email.

3. Add Your Website to Hotjar

After signing up, you must enter your site to be monitored on Hotjar.

Step A: Go to Dashboard

Upon logging in, you will have taken you to your Hotjar Dashboard.

Step B: Add Your Site URL

Click on Add New Site or Add Website.
Insert the URL of your site.

Step C: Select Your Plan

Hotjar offers:

Free plan
Paid plan

Select the plan that best suits you. In case you are only trying, begin with a free plan.

4. Install Hotjar Tracking Code on Your Website

Now Hotjar needs to be installed on your site so it can collect data.

This is the most important technical step, but I will explain it clearly.

Step A: Find Your Tracking Code

In Hotjar Dashboard, go to Sites & Organizations.
Click the site you just added.
You will see a section titled “Install Tracking Code”.

Step B: Copy the Script

A script will be shown inside a box (starts with <script>).
Select all of it and copy.

5. Add Tracking Code to Your Website

This step depends on the type of platform your site uses.

If Your Site Uses WordPress

Login to your WordPress Admin (yourdomain.com/wp-admin).
Go to Appearance – Theme Editor (or Header/Footer Scripts plugin if available).
Open the file header.php.
Paste the Hotjar script just before </head>.
Save changes.

If Your Site Uses Shopify

Login to Shopify.
Go to Online Store – Themes – Edit Code.
Open theme.liquid.
Paste the code before </head>.
Save.

If Your Site Uses a Tag Manager (e.g., Google Tag Manager)

Login to Google Tag Manager.
Add a new tag called Hotjar Tracking.
Choose Custom HTML Tag.
Paste the script.
Trigger on All Pages.
Save.

6. Confirm Tracking Code Installation

Return to Hotjar Dashboard.
Click Verify Installation.
Hotjar will check if the tracking code is live.

If installation is successful:

Hotjar will show a green check mark
It may take a few minutes

7. Create Your First Heatmap

With Hotjar installed, it is now possible to configure heatmaps.

Step A: Go to Heatmaps Section

Hotjar Dashboard Heatmaps are found in the left menu of the Hotjar Dashboard.

Step B: Click “New Heatmap”

Select the button New Heatmap or Create Heatmap.

Step C: Enter Heatmap Details

Name your heatmap (e.g. “Homepage Click Heatmap”).
Type in the URL of the page you would like to monitor (e.g. homepage or product page).
Choose the device type:
- Desktop
- Mobile
- Tablet

8. Configure Heatmap Settings

There are some settings to be fined in advance before launching.

A. Page URL Rules

You can track:

Single page only
Everything in a pattern (e.g., /blog/*).

Apply URL patterns in case of template based site.

B. Sampling Method

The choice of visitors to be recorded is determined by sampling.

Default (balanced)
More sessions (wide capture)
Improved signal (quality over quantity).

Usually Default is fine.

C. Click & Scroll Map Options

Make sure that both Click and Scroll maps are on.

9. Start Heatmap Recording

Once settings have been filled in, click Start Recording or Create.
The data collection will be initiated when visitors visit the page at Hotjar.

Important:

Heatmaps need data to build
With low traffic on your site it might require more time.

10. Wait for Data to Appear

Heatmaps are not instant.
Hotjar would require sufficient visitors before the trends become obvious.

Depending on your traffic:

High traffic: ~few hours
Low traffic: ~few days

Progress can be checked under the name of a heatmap.

11. View the Heatmap Results

When sufficient data is obtained:

A. Open the Heatmap

Access Heatmaps on the Dashboard.
Select the name of your heatmap.

B. Choose Map Type

Inside the heatmap view:

Click Map: indicates where people were clicking.
Move Map: displays the selection of the cursor.
Scroll Map: indicates the distance of scrolling by users.

Switch these tabs to explore.

12. Read and Interpret the Results.

That is where the heatmap will be useful.

A. Click Map

Look for:

Red spots = lots of clicks
Blue areas = few or no clicks

Ask:

Am I getting people to where I want them to?
Do they press on something that is not clickable?

B. Scroll Map

This shows:

How far users scroll

Where they stop reading
When a piece of important content is located below a low-scroll area, it is possible to relocate it.

C. Move Map

Demonstrates movements of the mouse.
Attention zones may be implied by the movements of the mouse.

13. Use Insights to Improve Your Site

Heatmaps inform you about what users are doing – and where they hesitate.

Some of the changes that you could make include:

Move important key buttons up the page.
Cut down on content that is not scrolled through.
Make clickable items clear
Eliminate distractions.

14. Create More Heatmaps for Other Pages

The most beneficial applications of heatmaps are on:

Homepage
Product pages
Landing pages
Checkout pages

Repeat steps 7-12 for each page.

15. Best Practices: Heatmap Usage

Here are practical tips:

Track Pages of good traffic.

Heatmaps need data. Page visits will only provide relevant information on the sites that are frequently visited.

Compare Devices

People act differently on mobile as compared to desktop.
Plot individual heatmaps.

Use Alongside Other Tools

Heatmaps help, but also use:

Analytics data
User recordings
Surveys

Periodically Periodic Heatmap Reviews

Consider heatmaps on a monthly basis or significant updates.

16. Troubleshooting Common Issues

Problem: No data collected

Test whether the Hotjar script is properly installed.
Make sure that the page URL is the same.

Problem: Heatmap stuck at 0%

Low traffic?
Wait or in a wider rule of URL.

Problem: No scroll activity

Page is too short
Content loads dynamically (advanced set-up required).

17. Removing or Pausing a Heatmap

Go to the heatmap list.
Locate the heatmap you wish to stop.
Click Pause or Delete.

You might pause if:

You’ve collected enough data
You wish to cease following momentarily.

Measuring Impact After Making Changes

Half the work is to create a heatmap. The actual value is when you have made some improvements on what you learned.

You are supposed to create another heatmap once you change your layout, rearrange buttons, reduce the size of content, or streamline forms. This assists in the comparison of behavior before and after the changes. As an example, when users were not clicking on your main button previously, and you moved it to a higher position on the page, the new heatmap will indicate whether the clicks had risen.

Other metrics that you can track are conversions, sign-ups or purchases. Behavior is displayed visually in heatmaps, yet your analytics tool will validate whether performance has improved.

It is not necessary to change much simultaneously. Modify one or two factors, re-test and check results. This managed method can make you easily see what was successful and what was not.

Heatmaps are in support of decision-making. They guide you through the process of improving your site step by step and not by guessing.

Final Thoughts: Turning Insights into Action

Heatmaps are easy to install, yet when properly deployed, they are effective. They demonstrate the interaction of real users with your web site, where they click, where they scroll to a halt, and what they pass by. This eliminates assumptions and it substitutes with actual behavioral data.

Hotjar does not need advanced technical expertise to set up heatmaps. After the tracking code has been installed, heatmaps can be made and controlled easily. The third step and the most significant phase is the revise of the data and acting on it.

Keep in mind that heatmaps do not necessarily make your site better. They give you insight. The betterment occurs through the examination of patterns, the recognition of weak areas and the realization of changes that are thoughtful.

By checking heatmaps regularly and putting into the test the improvements, you will eventually create a better, more convenient, and more efficient site. Such minor changes may eventually yield some substantial increases in engagement and conversions.

About the Author

Anna Malik – digital nomad, enthusiast of everything online and in the cloud, productivity maniac. She travels around the world reviewing web applications and other resources for Web People for our blog.