Tools
Heatmap tools for websites
Heatmap tools show where visitors click, how far they scroll and what they ignore, across thousands of visits at once. This guide compares 12 website heatmap tools feature by feature using each vendor's own site, shows how to set one up on Shopify or WordPress and how Convertica reads the results. No prices, ratings or affiliate links.
What is a website heatmap?
A website heatmap is a picture of a web page with color laid over it to show where visitors clicked, how far down they scrolled or where they moved, combined from many sessions. Warm colors such as red mean more activity, cool colors such as blue mean less. Heatmap tools record that behavior and draw the map for you.
Heatmaps show what visitors do, not why. They are a research tool: they point to where a page confuses people or loses their attention, so you can form a hypothesis and fix or test it. A heatmap on its own will not raise your conversion rate.
Types of website heatmaps
The main types of website heatmap are click maps, scroll maps and move or attention maps. Many heatmap tools add views such as confetti maps, which show individual clicks by segment, and rage click or dead click reports. Each answers a different question about the page.
| Heatmap type | What it shows | Question it answers |
|---|---|---|
| Click map | Where visitors click or tap, combined | Are people clicking the main call to action, or something else? |
| Scroll map | How far down the page visitors scroll | Does important content sit below the point most people reach? |
| Move or attention map | Where the mouse moves or rests, or which areas hold attention | Which parts of the page do people look at longest? |
| Confetti map | Each click as a dot, colored by segment such as traffic source | Do visitors from ads behave differently from visitors from search? |
| Rage and dead clicks | Repeated clicks, and clicks on things that do nothing | What do visitors expect to work that does not? |
| Revenue heatmap | Revenue tied to each page element | Which elements are linked to sales, not just clicks? |
Static and dynamic heatmaps
A static heatmap lays clicks over one snapshot of the page. A dynamic heatmap records the page as each visitor saw it, so clicks inside menus, pop-ups, tabs and carousels land on the right element. If your site changes after it loads, as single-page apps, product filters and cart drawers do, check that the tool says it handles those states before you trust its map.
Heatmaps and session recordings
A heatmap combines many visits into one picture of a page. A session recording replays one visitor's visit, click by click, across every page they saw. Use the heatmap to find where a pattern is, and recordings to see why it happens. Almost every tool on this page sells both together.
The best heatmap tools compared
The best heatmap tool depends on what you need around the heatmap: free recordings, surveys, funnels, A/B tests or revenue data. This table compares 12 heatmap tools by what each suits and what its site says about a free plan. Every detail comes from the vendor's own website, checked in October 2026. Plans change, so confirm with the vendor before you sign up.
| Tool | Suits | Free plan |
|---|---|---|
| Microsoft Clarity | Any site that wants free heatmaps and recordings to start with | Free forever stated, no traffic limits |
| Hotjar | Existing Hotjar users, and teams that want heatmaps with surveys and interviews | Free plan stated, through Contentsquare |
| Contentsquare | Larger sites that need journey analysis across web and apps | Free plan stated |
| Crazy Egg | Small teams that want several map views and simple A/B tests | Free plan stated, with heatmaps and surveys |
| Mouseflow | Teams that want funnels, form analytics and friction detection with their heatmaps | Free plan stated |
| Lucky Orange | Small online stores that also want live chat and surveys | Free trial stated, no free plan |
| Inspectlet | Teams that want recordings, heatmaps and form analytics on a budget | Free plan stated, no time limit |
| Fullstory | Product teams that want every interaction captured without tagging | Free plan stated |
| Heatmap.com | Online stores that want to see revenue, not just clicks, on each page element | Free trial stated, no free plan |
| Wingify Behavior Analytics | Teams already testing in Wingify (VWO) that want heatmaps per variant | Free trial stated, no free plan |
| PostHog | Product teams that want heatmaps next to analytics and experiments | Free tier stated, open source |
| Zoho PageSense | Smaller sites that want heatmaps, funnels and testing in one tool | Forever free plan stated, with heatmaps and recordings; A/B testing is in paid plans |
Heatmap tool features compared
Heatmap tools differ most in what they add to the map: session recordings, rage click detection, AI summaries, mobile app support, surveys and A/B testing. This matrix shows which features each vendor lists on its own site. "Not stated" means we could not find it there, not that the tool lacks it.
| Tool | Click map | Scroll map | Move or attention map | Rage or dead clicks | Session recordings | AI summaries or insights | Mobile app SDK | Built-in A/B tests | Surveys | Form analytics |
|---|---|---|---|---|---|---|---|---|---|---|
| Microsoft Clarity | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Not stated | Not stated | Not stated |
| Hotjar | Yes | Yes | Yes | Not stated | Yes | Yes | Not stated | Not stated | Yes | Not stated |
| Contentsquare | Yes | Yes | Yes | Not stated | Yes | Yes | Not stated | Add-on | Yes | Yes |
| Crazy Egg | Yes | Yes | Not stated | Not stated | Yes | Yes | Not stated | Yes | Yes | Not stated |
| Mouseflow | Yes | Yes | Yes | Yes | Yes | Yes | Not stated | Not stated | Yes | Yes |
| Lucky Orange | Yes | Yes | Yes | Not stated | Yes | Yes | Not stated | Not stated | Yes | Yes |
| Inspectlet | Yes | Yes | Yes | Yes | Yes | Yes | Not stated | Yes | Yes | Yes |
| Fullstory | Yes | Yes | Not stated | Yes | Yes | Yes | Replay | Not stated | Yes | Not stated |
| Heatmap.com | Yes | Yes | Not stated | Yes | Yes | Yes | Not stated | Yes | Yes | Not stated |
| Wingify Behavior Analytics | Yes | Yes | Not stated | Yes | Yes | Not stated | Yes | In Wingify Experimentation | Yes | Yes |
| PostHog | Yes | Yes | Yes | Yes | Yes | Yes | Replay | Yes | Yes | Not stated |
| Zoho PageSense | Yes | Yes | Yes | Yes | Yes | Yes | Not stated | Yes | Yes | Yes |
12 website heatmap tools in detail
Each website heatmap tool below is described from its vendor's own site: what it is, the features the vendor lists and who it suits. Dedicated behavior analytics tools come first, then tools where heatmaps sit inside a testing or analytics platform.
1. Microsoft Clarity
A free behavior analytics tool with heatmaps and session recordings.
- Click, scroll, area and attention heatmaps, with dead, rage and error click views
- Session recordings with highlights and AI summaries
- SDKs for Android, iOS, Flutter and React Native apps, and a Google Analytics integration
Suits: any site that wants free heatmaps and recordings to start with. Free plan: Free forever stated, no traffic limits. Vendor site
2. Hotjar (now part of Contentsquare)
Hotjar is now part of Contentsquare. Its site says new Hotjar accounts can no longer be created, and new users sign up to Contentsquare instead.
- Heatmaps and session recordings
- Surveys and user interviews
- Funnels, error and performance monitoring, and AI summaries
Suits: existing hotjar users, and teams that want heatmaps with surveys and interviews. Free plan: Free plan stated, through Contentsquare. Vendor site
3. Contentsquare
A digital experience analytics platform covering web and mobile journeys.
- Heatmaps, journey maps and session replay
- Error and performance monitoring, and frustration shown in journeys
- Autocapture of every action without tagging, and voice of customer tools
Suits: larger sites that need journey analysis across web and apps. Free plan: Free plan stated. Vendor site
4. Crazy Egg
A website analytics tool known for its heatmaps, with recordings, surveys and A/B testing.
- Five map views: heatmap, scrollmap, confetti, overlay and list
- Session recordings with AI analysis, surveys and error tracking
- A/B tests built with a visual editor or URL redirects
- Heatmaps and recordings for each test variant, and a GA4 integration
Suits: small teams that want several map views and simple a/b tests. Free plan: Free plan stated, with heatmaps and surveys. Vendor site
5. Mouseflow
Session recording and heatmap software with funnels, form analytics and feedback.
- Heatmaps compared across periods, devices and segments
- Session recordings with rage click capture and friction detection
- User journeys, conversion funnels, form analytics and surveys
Suits: teams that want funnels, form analytics and friction detection with their heatmaps. Free plan: Free plan stated. Vendor site
6. Lucky Orange
A conversion toolkit with heatmaps, recordings, live chat and surveys.
- Click, scroll and move heatmaps, including dropdowns and pop-ups
- Session recordings, conversion funnels and form analytics
- Surveys, announcements and live chat
Suits: small online stores that also want live chat and surveys. Free plan: Free trial stated, no free plan. Vendor site
7. Inspectlet
Session recording and heatmap software with form analytics and A/B testing.
- Session recordings of mouse, scroll, click and keypress activity
- Dynamic heatmaps and form analytics
- A/B testing, feedback surveys, error logging and AI insights
Suits: teams that want recordings, heatmaps and form analytics on a budget. Free plan: Free plan stated, no time limit. Vendor site
8. Fullstory
A behavioral data platform that autocaptures interactions across web and mobile.
- Autocapture of interactions, session replay and heatmaps
- Funnels and friction detection
- In-app guides and surveys
Suits: product teams that want every interaction captured without tagging. Free plan: Free plan stated. Vendor site
9. Heatmap.com
An ecommerce analytics tool whose heatmaps show revenue rather than clicks.
- Element-level heatmaps that show revenue, not clicks
- Revenue per session by page, product and traffic source
- Funnels that show revenue lost at each drop-off, and A/B tests judged on revenue per session
- A Shopify app
Suits: online stores that want to see revenue, not just clicks, on each page element. Free plan: Free trial stated, no free plan. Vendor site
10. Wingify Behavior Analytics (formerly VWO Insights)
The behavior analytics side of Wingify, which VWO Insights now leads to.
- Click, tap and scroll heatmaps and session recordings
- Form analytics and rage and dead click detection
- Automatic masking of sensitive data, and web and mobile app SDKs
Suits: teams already testing in wingify (vwo) that want heatmaps per variant. Free plan: Free trial stated, no free plan. Vendor site
11. PostHog
An open source product platform that combines analytics, experiments, feature flags, session replay and heatmaps.
- A/B, A/B/n, holdout and redirect tests, built on feature flags
- Bayesian or frequentist analysis
- Heatmaps, clickmaps and scrollmaps, with rage and dead click detection
- Session replay on web and in iOS and Android apps
Suits: product teams that want heatmaps next to analytics and experiments. Free plan: Free tier stated, open source. Vendor site
12. Zoho PageSense
A conversion tool that combines testing, heatmaps, session recording, funnels and form analytics.
- A/B, split URL and multivariate tests with a visual and code editor
- Heatmaps and session recordings with AI summaries
- Funnel and form analytics
- Personalization, full-stack SDKs and mobile A/B testing
Suits: smaller sites that want heatmaps, funnels and testing in one tool. Free plan: Forever free plan stated, with heatmaps and recordings; A/B testing is in paid plans. Vendor site
Free heatmap tools
The best free heatmap tool for most websites is Microsoft Clarity: Microsoft says it is free forever, with no traffic limits and no sampling, and each heatmap covers up to 100,000 page views. Crazy Egg, Mouseflow, Inspectlet, Fullstory, Contentsquare (including Hotjar), PostHog and Zoho PageSense also state free plans, limited by sessions, pages or features.
Read the limits before you choose. PostHog, for example, says its free plan collects heatmap data on up to 3 pages you pick. A free plan is a good way to start: install one tool on your most important pages, collect a few weeks of data, and only pay for more when you know which features you use. Running two or three free tools at once adds scripts to every page and makes your site slower.
Open source heatmap tools
PostHog is the open source option in this list: its code is public and it can be self-hosted, although PostHog itself points most teams to its cloud version. Microsoft has published Clarity's tracking script as open source, but the service that stores and draws the heatmaps runs only on Microsoft's side.
Hotjar alternatives
Hotjar is now part of Contentsquare, and Hotjar's own site says it is no longer possible to create a new Hotjar account: new users sign up to Contentsquare instead, and existing users log in with their Hotjar details. If you want a tool like Hotjar, the choice is Contentsquare itself or one of these alternatives.
- Microsoft Clarity if the main need is free heatmaps and recordings.
- Mouseflow for heatmaps with funnels, form analytics and feedback surveys, the closest match to Hotjar's mix.
- Crazy Egg for several map views, surveys and simple A/B tests in one tool.
- Lucky Orange for small stores that also want live chat and announcements.
- PostHog for product teams that want heatmaps, replay, analytics and experiments together, open source.
How to set up a website heatmap in 5 steps
To set up a website heatmap, pick one tool, add its tracking code to every page through your platform's app or plugin, Google Tag Manager or your site's header, connect it to your consent banner, then let it collect visits before you read the map. Most tools start drawing heatmaps once the code is live.
-
Pick one tool and one question
Choose the tool from the tables above, and decide which page and which question you want answered first, such as why visitors leave the product page.
-
Install the tracking code
Use the vendor's app or plugin if your platform has one, Google Tag Manager if you already use it, or paste the snippet into the site's header so it loads on every page.
-
Connect it to your consent banner
Where the law or the vendor requires consent, pass the visitor's choice to the tool. Microsoft, for example, requires Clarity sites in the EEA, UK and Switzerland to send a consent signal.
-
Mask personal data
Check that form fields, emails and payment details are hidden in recordings, and mask any other element that shows personal data.
-
Check it works, then wait
Visit the site yourself, confirm the session appears in the tool, and compare page speed before and after in PageSpeed Insights. Then let visits build up before you read the map.
Heatmaps on Shopify and WordPress
Shopify and WordPress sites can add most heatmap tools without code, through an app or a plugin. The table lists what each vendor's own documentation describes; tools not listed may still work by pasting their snippet into the theme.
| Tool | Shopify | WordPress |
|---|---|---|
| Microsoft Clarity | Listed as a supported platform in Clarity's setup | Listed as a supported platform in Clarity's setup |
| Mouseflow | Paste the tracking code into the theme once | Dedicated plugin |
| Lucky Orange | App from the Shopify App Store | Plugin from the WordPress plugin directory |
| Inspectlet | Paste the tracking code into the theme | Plugin, then enter your website ID |
| PostHog | Add the snippet in the theme editor | Plugin, or add the snippet to the theme |
| Wingify | App from the Shopify App Store (not on checkout pages) | Plugin |
On Shopify, check which pages a tool can record: Wingify's Shopify app, for example, says its code runs across the store except the checkout, post-purchase and order status pages. For the rest of a store's conversion work, see how to increase your Shopify conversion rate.
How to read a website heatmap in 6 steps
To read a website heatmap, start with a clear question, separate desktop from mobile, check you have enough sessions, then look at where clicks and scrolling stop compared with where your important content sits. Confirm what you see in session recordings before you change anything.
-
Start with a question
For example: why do people leave this product page without adding to cart? A question tells you which map to look at and what to look for.
-
Split by device
Desktop and mobile layouts differ, so their heatmaps do too. A combined map can hide a problem that only phones have.
-
Wait for the pattern to settle
A heatmap from a handful of visits is noise. Collect data until more sessions no longer change where the hot spots are.
-
Compare scroll depth with your content
If most visitors never reach your reviews, price details or call to action, move them up or test a shorter page.
-
Look for clicks on things that are not links
Clicks on images, headings or icons that do nothing show what visitors expect to work. Rage clicks show frustration.
-
Confirm in recordings, then test
Watch session recordings of visitors who clicked the odd spot or left early. Then write a hypothesis and fix or A/B test the change.
How Convertica uses heatmaps in A/B tests
Convertica uses heatmaps to explain test results and to find the next test, not as proof on their own. When Convertica split tested its own lead capture form, the testing tool, VWO, recorded a heatmap for each variation, so the team could see how behavior differed between versions as well as which one won.
Two things stood out. Many visitors clicked the logo and the links to pricing, services and the about page, which suggested they wanted to know who they were dealing with before handing over details. And visitors were clicking an area of the form that did nothing, which suggested it was confusing them. That became the hypothesis for the next test: remove the area and see whether more people submit.
That is the job a heatmap does well: it turns "the page is not converting" into a specific question you can test. If your testing tool records heatmaps per variant, use them: a variant that wins or loses for an unexpected reason usually shows it on the map. Heatmaps were part of the 80/20 process in one blog revenue case study on an affiliate site.
What heatmaps miss
Heatmaps miss the why behind behavior, anything that happens after the visitor leaves the page, and the difference between a click that helped and one that confused. They also struggle with pages that change for each visitor, such as personalized content, carousels and menus that open on tap. Pair them with other evidence.
- Session recordings show the order of what one person did.
- Funnel reports in your analytics show where people leave across several pages.
- On-page polls and surveys ask visitors what stopped them.
- A/B tests prove whether a change actually works.
Heatmaps also only show people. Tools try to filter out bots (Clarity, for one, turns bot detection on by default), so a heatmap cannot tell you whether an AI assistant or shopping agent can read and use the page. The AI visibility checker looks at that side.
A CRO audit brings these together: heatmaps and recordings are two of the ten steps.
Heatmap tools and privacy
Heatmap tools record how real people use your site, so privacy is part of choosing one. Compliance depends on your setup more than the tool: whether you ask for consent where the law requires it, what you mask, the vendor's data processing agreement and what your privacy policy says. Rules differ by country, so ask your legal adviser about your case.
- Consent: Microsoft says Clarity needs explicit consent before it places cookies for visitors in the EEA, UK and Switzerland. Without consent, Clarity still records page views and basic interactions, but sessions are split up and full replays are not available.
- Masking: check which fields the tool hides by default, and add your own masks for anything that shows names, addresses or order details.
- Your policy: name the tool and what it records in your privacy policy, and keep the two in step when you change tools.
How to choose a heatmap tool
Choose a heatmap tool by the heatmap types and recordings you need, how it handles privacy, whether it copes with your site's technology, what it does to page speed, and whether it connects to your analytics and testing tools. For most sites, a free plan is enough to find out which features matter.
- Click, scroll and move maps, split by device and traffic source
- Session recordings you can filter by page, device and behavior
- Automatic masking of personal data in forms and recordings
- Works with your consent banner and privacy policy
- Handles your site's technology, such as single-page apps, dropdowns and pop-ups
- An app or plugin for your platform, or a Google Tag Manager install
- Loads asynchronously, with no visible effect on page speed
- Connects to Google Analytics 4 and your A/B testing tool
- Mobile app support, if you have an app
Short answer
Heatmap tools record where website visitors click, how far they scroll and where they move, then combine many sessions into one colored map. Microsoft Clarity is free with no traffic limits; Contentsquare (now home to Hotjar), Mouseflow, Crazy Egg and PostHog add funnels, surveys or tests. Use them to find where a page confuses people, then fix it.
- The main types are click maps, scroll maps and move or attention maps; many tools add confetti maps and rage or dead click reports.
- Microsoft Clarity is free outright, and several other tools state free plans with limits on sessions, pages or features.
- Hotjar no longer takes new accounts: new users sign up to Contentsquare, or pick an alternative such as Clarity or Mouseflow.
- On Shopify and WordPress most tools install through an app, a plugin or one snippet in the theme; connect them to your consent banner.
- A heatmap on its own will not raise your conversion rate; it turns a vague problem into a specific question to test.
Questions about heatmap tools
What are the best heatmap tools?
The best heatmap tools for most websites are Microsoft Clarity, Contentsquare (which now includes Hotjar), Crazy Egg, Mouseflow, Lucky Orange, Inspectlet and Fullstory. Online stores can also look at Heatmap.com, which maps revenue rather than clicks. Teams that already A/B test may prefer the heatmaps built into their testing tool, such as Wingify (VWO).
Is there a free heatmap tool?
Yes. Microsoft Clarity says it is free forever with no traffic limits and no sampling. Crazy Egg, Mouseflow, Inspectlet, Fullstory, Contentsquare (which now includes Hotjar), PostHog and Zoho PageSense also state free plans, with limits on sessions, pages or features. Check each vendor's current terms.
Can you still sign up for Hotjar?
No. Hotjar is now part of Contentsquare, and Hotjar's site says it is no longer possible to create a new Hotjar account. New users sign up to Contentsquare, which states a free plan, and existing Hotjar users log in with their existing details. Alternatives include Microsoft Clarity, Mouseflow, Crazy Egg and Lucky Orange.
What is a website heatmap?
A website heatmap is a picture of a web page with color laid over it to show where visitors clicked, how far they scrolled or where they moved, from many sessions combined. Warm colors mean more activity and cool colors less, so you can see at a glance what draws attention and what is ignored.
Do heatmap tools slow down a website?
Heatmap tools add a tracking script to your pages, which adds some load. Most vendors load it asynchronously so it does not block the page. Check your page speed in PageSpeed Insights before and after installing, and avoid running several heatmap and recording tools at once.
Are heatmap tools GDPR compliant?
Heatmap tools can be used in line with GDPR, but compliance depends on your setup: a consent banner where required, masking of personal data in recordings, a data processing agreement with the vendor, and a privacy policy that names the tool. Several vendors mask sensitive fields automatically. Ask your legal adviser about your case.
How many visitors do you need for a useful heatmap?
You need enough visits for the pattern to settle, so that more data no longer changes where the hot spots are. Low-traffic pages take longer. Split heatmaps by device, because desktop and mobile layouts differ, and each needs its own sample.
Can Excel make a heatmap?
Excel can make a heatmap of a table: conditional formatting with a color scale shades each cell by its value. That is a data heatmap, not a website heatmap. To see clicks and scrolling on a web page, you need a heatmap tool that records visitor behavior on the site.
Does Google Analytics have heatmaps?
No. Google Analytics 4 does not draw click or scroll maps on your pages. Its only heat map is a cell style in free-form explorations that shades table values by size. For click and scroll heatmaps, add a heatmap tool; Microsoft Clarity documents an integration with Google Analytics, so you can connect the two.
What is the difference between a heatmap and a session recording?
A heatmap combines many visits into one colored picture of a page, showing where clicks and scrolling cluster. A session recording replays one visitor's visit, click by click, across every page they saw. Heatmaps show where a problem is; recordings help explain why. Most heatmap tools include both.
Is there an open source heatmap tool?
Yes. PostHog is open source and includes heatmaps, session replay, analytics and experiments; it can be self-hosted, although PostHog points most teams to its cloud version. Microsoft has published Clarity's tracking script as open source, but Clarity's heatmaps are only available as Microsoft's hosted service.
Can heatmap tools track mobile apps?
Some can. Microsoft Clarity lists SDKs for Android, iOS, Flutter and React Native apps, and Wingify lists web and mobile app SDKs for its behavior analytics. PostHog and Fullstory state session replay in mobile apps. Most other tools on this page describe website tracking, including the mobile web.
How do I add a heatmap to my website?
Sign up for a heatmap tool, then add its tracking code to every page: through the tool's Shopify app or WordPress plugin, through Google Tag Manager, or by pasting the snippet into your site's header. Connect it to your consent banner where required, check a test visit appears, then wait for visits to build up.
