Microsoft Clarity
Free, unlimited heatmaps and session recordings for every Webflow page.
Microsoft Clarity is a free user-behavior analytics tool that shows you exactly how visitors interact with your Webflow site through heatmaps, session recordings, and frustration signals. Setting up Microsoft Clarity on Webflow takes a few minutes through either the native Webflow App or a single snippet in Project Settings, and once live it captures where people click, how far they scroll, where they rage-click, and which pages silently lose them. It is the qualitative counterpart to GA4, and because it is genuinely unlimited and free forever, it has become one of the highest-value integrations available to any Webflow site. Pair it with Google Analytics for the complete what-and-why picture.
What Microsoft Clarity shows you
- Heatmaps — click, scroll, and mouse-move visualizations on any published page, revealing exactly where attention concentrates and where it dies.
- Session recordings — full visitor replays annotated with metadata like location, device, traffic source, and engagement time, so you can watch real behavior on real pages.
- Frustration signals — automatic detection of rage clicks, dead clicks, quick-backs, and excessive scrolling that point to broken elements, confusing UI, or hidden CTAs.
- AI Copilot — a natural-language assistant that answers questions like "where do mobile users drop off?" and returns data-backed insights without building a single report.
- Unlimited everything — no session caps, no pageview limits, no paid tiers, no maximum on websites or team members, at any scale.
- GA4 and GTM integration — link Clarity sessions to your Google Analytics data so a metric in GA4 can be matched to a recording in seconds.
How Clarity complements Google Analytics
GA4 tells you what happened: which page got traffic, which source converted, where the bounce rate spiked. Clarity tells you why: the visitor on that high-bounce page clicked a non-button image, hit a dead link, and left in frustration. The two tools cover opposite halves of the same question, and production Webflow sites almost always run both. A typical workflow is to spot a problem in GA4 — say, a pricing page with high exit rate — then open Clarity recordings on that exact page to watch users hesitate, rage-click, or scroll past the CTA. GA4 finds the symptom, Clarity shows the cause, and together they turn raw metrics into design decisions.
How to add Microsoft Clarity to Webflow
- Create a Clarity project. Sign up free at clarity.microsoft.com and add a new project for your Webflow site's domain.
- Install the native Webflow App (recommended). Open the Microsoft Clarity listing in the Webflow App Marketplace, click Add app, select your site, then choose your Clarity project and authorize. The app injects the tracking code automatically — skip to step 6.
- Or grab the manual snippet. In your Clarity project, go to Settings > Setup > How to setup and copy the snippet containing your Project ID.
- Open Webflow Custom Code. In Webflow, go to Project Settings > Custom Code.
- Paste into the head. Drop the snippet into the Inside
<head>tag field and save. - Publish your site. Clarity only collects data on the published site — changes to Custom Code require a publish to go live.
- Verify the install. Visit your live site and confirm requests to
clarity.ms/collectin the browser Network tab, or open your Clarity dashboard and watch live users appear within a few minutes.
Why Clarity is genuinely free
The most common question about Clarity is whether the free price is a bait-and-switch. It is not. Microsoft positions Clarity as a free, unlimited analytics layer that strengthens its broader advertising and cloud ecosystem — the company monetizes the surrounding platform, not the product itself. The official pricing page lists every feature, including heatmaps, recordings, AI Copilot, and unlimited team members, as available at no cost, with no premium tier to graduate onto. For a Webflow site of any size, the bill stays at zero indefinitely.
Microsoft Clarity vs. Hotjar vs. Webflow Analyze
All three surface user behavior, but they answer different questions and sit at very different price points.
| Tool | Best for | Pricing | Limitation |
|---|---|---|---|
| Microsoft Clarity | Free, unlimited heatmaps and recordings | Completely free, no limits | No surveys, feedback widgets, funnels, or A/B testing |
| Hotjar | Qualitative research plus active user feedback | Free plan caps at 35 sessions/day; paid tiers above | Free tier is tight; full feature set costs money |
| Webflow Analyze | Zero-config glance at top pages and forms | Built into your Webflow dashboard | No heatmaps, recordings, or behavioral detail |
Clarity wins on free unlimited behavior data. Hotjar wins if you need surveys, on-page feedback, and user interviews that Clarity does not offer. Webflow Analyze wins for a quick in-dashboard glance with no setup at all. The strongest Webflow stacks run Clarity alongside Analyze and GA4 rather than choosing between them.
Best Clarity + Webflow use cases
Diagnose why a pricing page converts poorly
Open Clarity recordings on your pricing page and watch where visitors hesitate, scroll past plans, or rage-click elements that look interactive but aren't. Pair the recordings with click heatmaps to confirm which plan gets the most attention and which CTA is being missed.
Find dead clicks and broken UX on a CMS template
Clarity's dead-click detection flags elements users expect to be clickable but aren't — a heading styled like a link, an image that looks like a button. On a Webflow CMS template page, this surfaces broken interactions across every instance of the template at once.
Validate a redesign before and after launch
Record baseline heatmaps and frustration-signal rates on the old design, launch the redesign, then compare. Clarity's per-URL heatmaps give you a before-and-after behavioral comparison that pure traffic metrics can't.
Measure scroll depth on long-form blog content
See whether readers actually reach your key CTA buried mid-article or footer sign-up form. Scroll heatmaps show the exact percentage of users who pass each section, so you can move the CTA to where attention actually lands.
Watch real users navigate a multi-step form
Session recordings show exactly where users abandon a Webflow form — which field stalls them, whether validation errors frustrate them, and whether they rage-click the submit button. Pair this with Google Tag Manager to fire GA4 conversion events on the same form.
Limitations to know
- No capture inside Canvas or iframes. Clarity cannot record behavior inside embedded third-party widgets, iframe-based forms, or the Webflow Designer Canvas — only your published live site.
- Sensitive content is masked by default. Form inputs and payment fields are stripped from recordings to protect privacy, which can limit visibility into field-level interactions.
- No funnels or A/B testing. Clarity is an observation tool, not an experimentation platform — use GA4 Explorations or a dedicated testing tool for funnel reporting and experiments.
- Heatmaps aggregate per URL. Heavily dynamic CMS template pages can produce noisy heatmaps because behavior from many different items is blended into one URL.
Related Webflow integrations
- Google Analytics — the quantitative what-happened layer that pairs with Clarity's why.
- Google Tag Manager — deploy Clarity and link it to GA4 from a single container.
- NoCodelytics — CMS-item-level analytics for content-heavy sites where Clarity's per-URL aggregation gets noisy.
Frequently asked questions
Yes. Microsoft Clarity is completely free with no paid tier, no session caps, no pageview limits, and no ceiling on heatmaps, websites, or team members. Microsoft's own pricing page lists every feature as available at no cost. The company monetizes the broader ecosystem around its analytics and cloud products, not Clarity itself, so there is no upsell path and no plan to graduate onto. For any Webflow site of any size, the cost stays at zero indefinitely.
The fastest path is the native Webflow App: open the Microsoft Clarity listing in the Webflow App Marketplace, click Add app, select your Clarity project, and authorize it. The app injects the tracking code automatically. The manual path is to copy the snippet from your Clarity project settings, paste it into Webflow Project Settings under Custom Code in the Inside head tag field, save, and publish. Either way, confirm installation by checking for requests to clarity.ms/collect or by watching live users appear in your dashboard.
For most Webflow sites, yes, because Clarity is free and unlimited while Hotjar's free plan caps you at 35 session recordings per day. Clarity also ships AI Copilot and frustration-signal detection at no cost. Hotjar pulls ahead only if you need surveys, on-page feedback widgets, or user interviews, none of which Clarity offers. If your goal is free, unlimited heatmaps and recordings, Clarity wins. If you need active user research and feedback collection, Hotjar is the stronger tool.
Yes. Microsoft Clarity works with any published Webflow site through either a one-click native Webflow App in the official marketplace or a manual tracking snippet pasted into Project Settings under Custom Code. Both methods capture heatmaps, session recordings, and frustration signals across static pages and CMS template pages. Webflow sites are a natural fit for Clarity because the clean, JavaScript-driven markup records cleanly, and there are no code or plan restrictions that block the integration.
Clarity tracks click, scroll, and mouse-move heatmaps, full session recordings with frustration signals like rage clicks, dead clicks, and quick-backs, plus scroll depth and engagement metadata for every visitor. It also offers an AI Copilot that answers natural-language questions about user behavior. Clarity does not track personal identity, masks sensitive content like form inputs by default, and does not provide funnel reporting, A/B testing, or revenue attribution. It is a qualitative observation tool, not a quantitative attribution platform.
Launch faster with Webflow templates
Every template is CMS-ready and integration-friendly — connect your tools and ship.
