Learn / Guides / Heatmaps guide

Back to guides

How to create a heatmap (for free)

A heatmap (or heat map) is a color-coded data visualization, usually with a color scale gradient from blue (cold) to red (hot). You can create a data heatmap with spreadsheet tools like Excel, or generate a website heatmap using a free heatmap tool like Hotjar.

In this tutorial, we show you how to use Hotjar to create heatmaps that help you understand how people use your website—what they click on or ignore, and what frustrates them—so you can optimize for improved conversions, user experience (UX), and the metrics that matter to your business.

Last updated

23 May 2024

Reading time

7 min


Illustration visualizing user behavior on a website using Hotjar Heatmaps


Heatmaps are color-coded representations of data that reveal how users engage with your website. Using a free heatmap tool like Hotjar, you can discover which elements of your site capture people’s attention, and which ones get overlooked—enabling you to make real improvements.

In this article, you’ll learn

  • How to create a free website heatmap using Hotjar using our step-by-step guide

  • The best pages to collect heat map data on, like your homepage and landing pages, top pages, underperforming pages, and new pages

  • What creating a heat map in Excel looks like (and why Hotjar’s free heatmap software is probably a better option for your team)

Sign up for a free Hotjar account, add the tracking code to your website, and start using our free heatmap software today.

How to create a free website heatmap using Hotjar

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

Hotjar’s free heatmap tool gives you valuable user insights

🔥 Already using Hotjar?

If you need some help setting up your first Hotjar heatmap, head to our Help Center and check out our how to set up heatmaps page.

Before you get started, make sure you’ve done the following:

  1. 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 Plus or Business plan a go)

  2. Follow the instructions to install the Hotjar tracking code on your website

Once your tracking code is installed and verified, follow these five simple steps to generate your first heat map.

1. Check 'Session capture' is enabled

To generate a Hotjar heatmap, session capture must be enabled. 

If you need to enable it manually, you’ll see a ‘Session capture: DISABLED’ drop-down on the top right.

Click the Site Settings link and toggle session capture on.

Now you’ll see a new message on the top right about traffic coverage: click it to see how many sessions you can capture each day on your current plan.

💡Pro tip: the conclusions you draw from your heatmaps will be stronger if you collect unsampled data. By tracking all interactions, you can be confident that every decision you make is based on full coverage and not fragments of data.

2. Create a new heatmap

Click the heatmap icon on the left menu, then the ‘+ New heatmap’ button.

3. Enter the URL of your heatmap page

Use the URL filter to view a heatmap for any page on your website. You can view:

  • A heatmap of a single page, e.g. mystore.com/product-category/item1

  • A combined heatmap of multiple pages, e.g. mystore.com/product-category 

If you’re not sure where to start, click the box and you’ll get a list of URL suggestions based on your site’s most popular pages.

4. Click ‘View heatmap’

And that’s it! Your heatmap should appear in 90 seconds or less. 

It only takes one person to visit the page for Hotjar heatmaps to start working—but you might need to wait for a few more visitors to start to see patterns on your heat map.

The default view will show you a desktop click map; click the icons to toggle between desktop, mobile, and tablet sessions, and to view click (or tap on mobile), move, and scroll maps.

Here’s what the three different types of heatmap look like:

5. Filter your heatmap data

You can get a lot more value from your heatmap if you filter the session data to only show a relevant time period or specific user cohort.

To filter your heatmap by date, click the calendar icon drop-down menu and select a preset time period (from 24 hours to 12 months) or enter a custom date range. 

Click the ‘+ Add Filter’ button and pick one or multiple filters. Some ideas to get you started:

  • Filter by Rage click to see where visitors click in frustration

  • Filter by New users to see how first-time visitors behave

  • Filter by Browser or Operating system to troubleshoot tech-specific issues

You can keep things simple or get as advanced as you like: it’s even possible to set up user attributes to filter heatmaps by custom metrics such as ‘users who signed up in the last 30 days’ or ‘customers who spent more than $200’. 

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

💡Pro tip: click on “Engagement zone” in the panel on the right to display a grid on top of the page.

This is a visual representation of the aggregated data points from click, move, and scroll heatmaps, all in a single view. The different shades (or opacity) highlight which elements of the page users most engage with (darker color) or neglect (no cell or lighter color).

Engagement zones make it easy to spot which areas of your page don’t get the love they deserve at a glance, so you can improve them.

3 powerful ways to use heatmaps

The right free heatmap tool can unlock priceless insights. Here are three ways to use heatmaps to improve the user experience—and boost conversion rates.

Set up your free heatmap today

Use Hotjar’s free heatmap generator to understand what customers love (and hate) about your site and make empathy-driven improvements.

Best pages to collect heat map data on

Heat maps allow you to take a deeper dive into any of your website pages, but it makes sense to start with the ones that are most important to you in terms of traffic, 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’re often responsible for your website visitors’ first impressions and their decision to continue browsing or abandon the website. 

Use a free heatmap tool to analyze these pages and determine how much information your users see or engage with, and which elements are being clicked on or ignored.

Heatmaps showed us that very few users scroll down beyond our hero, so when redesigning our landing pages, we used this information to redesign only that section. This reduced our costs in terms of design and engineering overhead whilst delivering a 15% increase in our conversion rate.

Simon Tinsley
Growth Manager, ClickMechanic

2. Top pages

Your best-performing pages (like the most-viewed product page or the blog post with the highest amount of comments) are obviously doing something right. A heat map on these pages helps you understand what’s working well, so you can replicate the success elsewhere.

3. Under-performing pages

Your worst-performing pages are as important as the best-performing ones, but for the opposite reason: there’s likely something wrong with them, and placing a heat map there uncovers what your visitors are (not) seeing or interacting with so you can take action.

We studied Hotjar's heatmaps to understand where users were clicking during Taskworld’s signup process. The entire process revealed some great insights. We discovered a few issues which only required 5 minutes to be resolved. This quick fix boosted our conversion by 40%.

Shiv Sharma
Head of Content, Taskworld

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 free heatmap is an effective way to get some initial information, measure how the page is performing, and optimize it as user insights roll in.

💡 Pro tip: if you’re running A/B tests to improve conversion rate or other metrics that matter to your business, Hotjar Heatmaps let you view heatmaps of your A/B tests variations, so you can compare old and new versions and see why one variant works better and get ideas for future tests.

We put Hotjar on all our pages. If our conversion rate drops after a change, our Heatmaps help us identify and solve the issue. Hotjar has helped define our website strategy and make the experience even better for our customers.

Anna Grunanger
Head of Acquisition, Vimcr

Creating a heat map in Excel vs. Hotjar

You can create a heatmap visualization from any numerical data set using popular spreadsheet tools like Microsoft Excel, Google Sheets, or LibreOffice. The quickest way to do it is to select the relevant cell values and apply conditional formatting to format cells.

In Google Sheets, go to Format > Conditional formatting, then select Color scale and pick your preferred color palette—the example below uses ‘Green to yellow to red’ as its color scheme. You can also customize the minpoint (for the minimum value), midpoint, and maxpoint (for the highest value) if required.

#The same website click data points visualized in Google Sheets (left) and Hotjar (right)
The same website click data points visualized in Google Sheets (left) and Hotjar (right)

Excel heatmaps can be helpful when you’re trying to spot patterns and trends in numerical data, whereas a website heatmap tool like Hotjar goes a step further by overlaying real user activity onto a screenshot of the actual page. 

This makes it much easier to see where real visitors click and scroll—no pivot tables or dialog boxes required!—enabling you to empathize with your users in ways that endless columns of numbers simply can’t. It’s also much easier to track trends and share at-a-glance snapshots with your wider team using Hotjar Dashboards and Highlights, so you can get aligned and prioritize your UX roadmap with users in mind. 

Plus, when you’re ready for even more insights, you can combine Hotjar Heatmaps with Hotjar Recordings, Feedback, Surveys, and Engage to get a full picture of user behavior, deeply understand your customers’ pain points, and deliver a user experience that proactively addresses their needs.

With such a powerful and insightful free heatmap tool at your service, there’s no need to struggle with fussy spreadsheets.

Create your first heatmap in minutes

Heatmaps are a quick, visual way to understand what’s happening on your website.

The good news: now you know exactly how to create a free website heatmap using Hotjar. 

The better news: by monitoring and analyzing your free heatmap, you can troubleshoot conversion blockers, discover optimization opportunities, and enhance the user experience.

Sign up for a free Hotjar account, add the tracking code to your website, and start using our free heatmap software today.

FAQs about setting up your heatmaps