How to create a heatmap (for free)

Create a heatmap in 5 steps with Hotjar

To get a heatmap of any website or product page, you will need to use a sophisticated heat mapping tool like Hotjar to collect and render the data to help you understand how people use your site—what they click on, what frustrates them, and where on the page their attention wanes. 

And if you are new to Hotjar, no problem: we offer you a free trial if you just want to test it out.

Here's what you do:

• Head over to our Website Heatmap Tool page and sign up for a free account (or look at the pricing page  if you want to give the Business plan a go)

• Follow the sign-up instructions to install the Hotjar tracking code on your website

Once your tracking code is installed and verified, you are five minutes away from creating your first heatmap. Follow these five simple steps to get your first heat map up and running:

Step 1: enable 'session capture'

Continuous heatmaps are generated from sessions. When 'session capture' is enabled, heatmaps are available automatically and they start collecting user behavior data. So, you first need to verify that 'session capture' is enabled.

You can verify this by visiting Heatmaps in your Hotjar Account and checking the traffic coverage widget in the top-right corner of the page.

If you hover over this widget, you will see more information about your daily 'session capture' settings, which will apply to both Hotjar Recordings and Continuous Heatmaps.

If session capture is not enabled, you will see an orange 'Session Capture Disabled' button at the top of the page, which takes you to the session capture configuration page.

 Step 2: get started with continuous heatmaps

Click on Heatmaps in the left-hand navigation menu:

Step 3:  enter the URL of your heatmap page

Using the search bar at the top of your Continuous Heatmaps page, you can view a heatmap for any page you've tracked by entering the URL here.

You can also adjust your report targeting to suit your needs, including:

• Single page

• Exact match

• All pages containing

• All pages starting with

• All pages ending with 

To learn more you can check out our article on URL filtering for continuous heatmaps.

You can also select a page from the ‘popular pages’ list. This list shows the pages across your site that have collected the highest amount of session data over the past 30 days.

Step 4: click view heatmap

Your heatmap should appear within 90 seconds or less.

To quickly view this page URL again in continuous heatmaps, use the ‘pin page’ feature by clicking on the small pin icon to the right of the URL:

Step 5: select the date range that you're interested in

Our date ranges include relative ranges and a custom date range option. Relative ranges allow you to see heatmap data from up to 12 months in the past:

Custom date ranges allow you to view heatmap data from a specific time period, up to 12 months in the past.

Selecting a custom date range is useful if you want to compare heatmap data before and after changes were made to your web page or product.

The screenshot is captured from the last recording in the selected date range. 

And that’s it!

What your heat map data will look like

All you need to do to see a heatmap for a specific page is enter the link and you can start analyzing your users’ clicking, tapping, swiping, and scrolling habits. 

As more and more data gets recorded, Hotjar generates the heatmap visualization for the page. From within the interface, you can toggle between the three types of heatmaps—click map, move map, and scroll map—and also select the device you’d like to see a heat map report for:

You can also download a spreadsheet with a full breakdown of clicks by HTML element and scroll depth data from the top to measure your efforts:

In addition to the instant understanding that you will glean from your heatmaps, these rows of data are there to help you design pixel-perfect user experiences—for example, you and your UX design team can easily refer back to the data to find exactly where you need a CTA to capture users’ attention on desktop and mobile.

If you have any technical questions or doubts about heatmaps, check out our comprehensive heatmap help documentation.

Best pages to collect heat map data on

Heat maps allow you to achieve a deeper understanding of any of your website or product pages, but it makes more sense to start from the ones that are most important and effective for your company or online shop to achieve increased user traffic, product adoption and usability, and business objectives.

 1. Homepage and landing pages

Your homepage and main landing page(s) are the main entry points into your website. They are often responsible for your website visitors’ first impressions and their decision to continue browsing your product or abandon the website. A heatmap on these pages will help you determine how much information your users see or interact with, and what elements they click on or ignore.

UX and UI web designers play a major role here—because first impressions do matter. The website design they create and update as they get insights have to appeal to user senses and be in alignment with the product offering.

For example, it doesn’t make sense for a website promoting a mental health product to use dark and gloomy colors that are going to depress the user right off the bat. Customers will be pressing the ‘X’ button and dropping off the site before they even have a chance to read what might be inspiring content. 

On the other hand, it could help marketing teams working on the same site to promote sales or sign-ups with a CTA asking visitors things like: “Do you want to make a change in your life? Click here to find out how” in the middle of the screen or as a pop-up button.

2. Top pages

Your best-performing pages (the most-viewed product page, the blog post with the highest amount of comments, etc.) are obviously doing something right: eye tracking with a heat map can help you understand what is working well, so you can replicate the success elsewhere.

Product managers like to experiment here—if a website element is successful, they’ll repeat it across other pages to validate their ideas as they use heatmaps to measure the impact of these product page changes.

3. Under-performing pages

Pages with low click rates are as important as the popular ones, but for the opposite reason: there is likely something wrong with them—perhaps a bug needs to be fixed or it’s difficult for your customer to navigate—and using a heat map can help you understand what your visitors are (not) seeing or interacting with, so you can take action to improve the product experience.

4. New pages

Your newest web pages don’t have a lot of data: if you recently added a product page to your website, a heat map might be a good way to get some initial information, measure how the page is performing, and optimize it as user insights roll in.

Pro tip: if and when your page design changes, Hotjar’s heatmaps also help you monitor traffic with A/B testing, so you can compare old and new versions of your website and decide on user-centric optimizations that will help increase conversion.