How to create a heatmap (for free)

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.

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.

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.

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.

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.

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.

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.

Here are some resources to help you get even more from heatmaps:

• Complete guide to heatmaps

• How to use heat maps to improve your website’s UX

• How to use ecommerce heatmaps to increase conversions

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.

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.