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 Contentsquare.

In this tutorial, we show you how to use Contentsquare 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.

How to create a website heatmap using Contentsquare

To get a heatmap of any website or product page, you'll need to use a sophisticated heat mapping tool like Contentsquare. 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.

1. Head into Zoning Analysis or Heatmaps

Note: the below steps might differ slightly depending on which Contentsquare plan you’re part of. See our Heatmap instructions for Free and Growth plans and our Heatmap instructions for Enterprise and Pro plans for more details.

If you’re part of the Free or Growth plans, you’ll head into “Heatmaps” and click “New Heatmap.”

If you’re a Pro or Enterprise user, you’ll head into “Zoning Analysis” and click “Select a page or page group.”

2. Enter page URLs

Define the page(s) you want to create heatmaps for by listing the URL.

If you’re on the Enterprise of Pro plan, you can also select page groups:

3. Analyze your heatmaps

Your heatmap will be available to view once Contentsquare has collected enough data.

You’ll be able to view three types of heatmap: move map, click map, or scroll map. Here’s what each one looks like:

4. View engagement zones

Zone-based heatmaps are 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.

And those who are part of the Enterprise or Pro plans have access to this type of heatmap.

View zone-based heatmaps by selecting “Zoning” from the dropdown.

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.

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.

Add filters by clicking “Add filter.” Here are some filter ideas:

• 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’. 

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.

Make your website easier (and more enjoyable) to use

Quickly identify areas of your site that delight or frustrate your users, like testimonials that catch their attention or content they gloss over. Improve what isn’t working and replicate what is.

Get buy-in for your next project

Share interesting insights from your heatmaps with other stakeholders and team members to make the case for your next UX initiative. Prioritize your roadmap based on what will have the greatest impact on users based on data-driven hypotheses.

Easily spot and squash bugs

Filter your heatmaps by rage clicks or errors to find broken elements or issues, like buttons that don’t work as expected. Jump straight from your heatmap to an associated Contentsquare Recording to watch exactly what happened—and learn how to fix it.

Best pages to collect heat map data on

Heatmaps 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 heatmap 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 heatmap 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.

💡 Pro tip: if you’re running A/B tests to improve conversion rate or other metrics that matter to your business, Contentsquare 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.

Creating a heat map in Excel vs. Contentsquare

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 with heatmapping software (right)

Excel heatmaps can be helpful when you’re trying to spot patterns and trends in numerical data, whereas a website heatmap tool like Contentsquare 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.

Plus, when you’re ready for even more insights, you can combine Contentsquare Heatmaps with Contentsquare Session Replay, Voice of Customer, Surveys, and more 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 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 Contentsquare. 

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

FAQs about setting up your heatmaps