One of Clarity’s most powerful tools just got a visual refresh! Clarity’s live extension, your go-to-tool for viewing heatmaps and session recordings directly on your site, has a brand-new look, making it easier than ever to see your site’s most important engagement data without logging into the Clarity dashboard.
Whether you’re analyzing dropdowns, testing new page elements, or analyzing engagements, Clarity’s live extension makes key insights easier to view directly on your live site. Let’s walk through what’s new and how the updated experience works.
Things you need to know:
- Extension works on both Google Chrome and Microsoft Edge
- You need to have Clarity installed on the site you want to use the extension on before you can use it
- You can look at heatmaps and watch recordings directly on your site while you are browsing without ever leaving!
How it works
Watch how people are engaging right from your site! Simply download the extension on Chrome or Edge and set up a free Clarity account if you don’t already have one.
Then simply navigate to the page or specific experience you want to explore and select the heatmap, area heatmap, or session recording icon on the Clarity widget (see screenshot below).
Features
There are three primary features within the Live Extension widget (which you can move around to any part of your site in case it gets in the way). They are: heatmaps, area heatmaps and session recordings.
Heatmaps
The extension combines two types of heatmap into one view. Click heatmaps capture the most clicked (or tapped) elements on a page and scroll heatmaps reveal the most viewed areas on a page by showing how far users scroll. Clarity Live makes it easy to see engagement for flyouts, popups, dropdown lists, and other elements that can be difficult to capture in a typical heatmap experience. In addition, users can see the “average fold” line which represents the average of how far down a user has scrolled.
Area heatmaps
Instead of visualizing engagement on the element level, these heatmaps allow you to select an area, which could contain several elements, to get the total clicks and click distribution rate. The Live Extension allows you to be in control by selecting an area that could include just one element or a selection that can be as large as the entire page.
Example area heatmap on the case study home page
Session recordings
The live extension gives you a front-row seat to individual sessions playing them right on your site, next to the heatmaps you are showing. These animated renderings capture how a user explored your site, by showing you where they clicked or tapped, where they hesitated, and how they moved their cursor. The extension makes it incredibly simple and easy to find recordings for a specific experience, too. For example, if you wanted to see how a user engages with a particular popup, you could fire the popup on your site, and select the recording icon on the widget, and you would instantly see relevant recordings made within the last three days.
Recordings show directly on the page you are on side by side with the heatmap
You can also select an area in recordings which allows you to see recordings with clicks on a certain area of your site. See below for how it works!
Once you pin the extension to your browser, you are able to click on it and show the “see more recordings” and “see more heatmaps” buttons which will re-direct you to your Clarity dashboard more additional recordings and heatmaps as shown in the screenshot below. You can also toggle the widget on and off as needed.
The Microsoft Clarity Live extension helps you easily see where users engage with your site, where they get stuck, and test out new ideas. You don’t have to go to a separate website or comb through columns of data to get the info you need! Clarity Live does the hard work for you by creating heatmaps and session recordings that you can view without leaving your site.
We want to know how you like the Live Extension if you have set it up on your site already! We’d love for you to take this quick survey so we can implement your user feedback to make the experience the best it can be for you! Take the survey here.