Learn / Guides / Heatmaps guide
How to create a heatmap (for free)
A heatmap 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 heat mapping 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
21 Aug 2023Set up your heatmap today
Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps 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.
🔥 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.
If you're new to Hotjar, no problem: there’s a free forever plan or a free trial on Plus and Business plans to get you started:
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)
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.
Set up your heatmap today
Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.
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 from 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 are often responsible for your website visitors’ first impressions and their decision to continue browsing or abandon the website.
A heat map on these pages will help you determine how much information your users see or interact with, and what elements are being clicked on or ignored.
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: a heat map can help you understand what is working well so you can replicate the success elsewhere.
3. Under-performing pages
Your worst-performing pages are as important as the previous ones, but for the opposite reason: there is likely something wrong with them, and placing a heat map there can help you understand what your visitors are (not) seeing or interacting with so you can take action.
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.
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 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.
Here are some resources to help you get even more from heatmaps:
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 format style. 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!
Next steps
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: when you set up session capture, you also get Hotjar Recordings so you can watch individual users browsing your website across multiple pages. Plus, when you’re ready to take your optimization efforts to the next level, you’re all set up to ask users for feedback, run surveys, and conduct user interviews, all from the same Hotjar account.
Set up your heatmap today
Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.
