Microsoft Clarity integration
Microsoft Clarity is a free tool for heatmaps and session recordings. Webflow has an official Clarity app built by Microsoft; on Framer we add the snippet in custom code, and on Astro or Next.js we use the @microsoft/clarity package. Since 31 October 2025 Clarity needs a consent signal for visitors from the EEA, UK and Switzerland, so we wire it to your cookie banner.
| Complexity | Low |
|---|---|
| Method |
|
| Typical setup | 2 to 4 hours |
| What we do | We install Clarity, connect it to your banner with the consent API and tag key sessions so they are easy to find. |
| Category | Analytics |
Setup by platform
How we set up Microsoft Clarity
Framer
- Embed
The Clarity snippet goes in the head through Framer’s site custom code. With GTM and Framer’s Cookie Banner, Clarity can be added from GTM instead.
Webflow
- Native
- Embed
Microsoft’s official Clarity app on the Webflow Marketplace installs the script for you. The head snippet in custom code works too when we need more control over consent.
Astro
- API
@microsoft/clarity with Clarity.init(projectId) in a client script, and Clarity.consentV2 called from the banner when the visitor chooses.
Next.js
- API
@microsoft/clarity initialised in a client component in the root layout, with consentV2 from the banner and Clarity.event or setTag for key moments.
Use cases
What teams use it for
Free heatmaps and recordings
Clicks, scroll depth and session replays on every page, without traffic limits.
Pair with GA4
Clarity’s GA integration links recordings to the segments you already look at in Analytics.
Find key sessions fast
Tag checkout or demo-booking sessions with events so the team can review them first.
Before you add it
What to watch out for
Consent and GDPR
Consent is required in the EEA, UK and Switzerland
Without a consent signal, every pageview is a new session: funnels show full drop-off and nobody returns. We send consentv2 from the banner.
Consent and GDPR
Test Google Consent Mode support
One Clarity doc says it honours Google Consent Mode automatically, while the FAQ still calls it coming soon. We test it, and call the consent API directly when in doubt.
Limits
What it can’t see
Clarity doesn’t capture canvas or third-party iframes, so embedded calendars or video players show as blanks. It shouldn’t be used on sites aimed at under-18s.
FAQ
Questions about Microsoft Clarity
Is Clarity really free?
Microsoft says Clarity is free, with no traffic limits and no forced upgrade.
Why do our EU sessions show one page per session?
Since 31 October 2025 Clarity needs a consent signal for EEA, UK and Swiss visitors. Without it, every pageview counts as a separate session. Connecting the banner fixes this for visitors who accept.
Does Clarity slow down the site?
Microsoft says the script is asynchronous and doesn’t affect how fast the page loads. We still load it after consent, so declined visitors never download it.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call