How to Add Microsoft Clarity to Your Website

Clarity is Microsoft's free heatmap and session recording tool. Make a project at clarity.microsoft.com, open Settings, then Setup, and either pick your platform or copy the tracking code into the head of your site. Data shows up almost immediately, and you can watch live visitors to confirm it works.

Three ways Clarity offers to install
MethodBest for
Third-party platformWordPress, Wix, Squarespace, Shopify and others
Manual tracking codeAny site where you can edit the <head>
NPM packageJavaScript apps you build yourself

Updated

Analytics tells you how many people left a page; Clarity shows you why, with recordings of real sessions, click and scroll heatmaps, and flags for rage clicks and dead clicks. It costs nothing, which makes it the usual first step before paid tools.

Add Microsoft Clarity on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

  1. Copy your Clarity project ID from Settings, Setup.
  2. Clarity is not in the Add-ons list, so ask in the AI chat: "add Microsoft Clarity with project ID YOUR_ID to every page".
  3. Review the change in preview, then publish.
  4. Open the live site and check Clarity for a live session.

AI chat edits use credits and are available on paid plans.

WordPress

  1. Go to Plugins, Add Plugin, and search for Microsoft Clarity (by Microsoft).
  2. Install and activate it.
  3. Open the plugin's page and connect or create your Clarity project.

WordPress.com users need a paid plan to install it.

Wix

  1. In Clarity's setup, pick Wix from the platform list and follow its prompts, or copy the tracking code.
  2. For the code route, open Settings, Custom Code, then + Add Custom Code.
  3. Paste it, choose All pages and Head, and click Apply.

Custom code needs a published site on a connected domain.

Squarespace

  1. Choose Squarespace in Clarity's platform list, or copy the code.
  2. Open Code Injection and paste the code into Header.
  3. Save, then visit the live site.

Code Injection is limited to Core, Plus and Advanced plans.

Plain HTML

  1. Copy the code from Get tracking code.
  2. Paste it inside <head> on every page.
  3. Deploy, then check the Network tab for POST requests to clarity.ms/collect.

Sources

  • Microsoft Learn, set up Clarity manually: https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-setup (checked October 28, 2026, used for the Clarity steps)
  • Microsoft Learn, Clarity Consent Mode: https://learn.microsoft.com/en-us/clarity/setup-and-installation/consent-mode (checked October 28, 2026, used for the Clarity steps)
  • WordPress.org, Microsoft Clarity plugin: https://wordpress.org/plugins/microsoft-clarity/ (checked October 28, 2026, used for the Clarity steps)
  • Wix Help Center, embedding custom code: https://support.wix.com/en/article/embedding-custom-code-on-your-site (checked October 28, 2026, used for the Clarity steps)
  • Squarespace Help Center, using code injection: https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection (checked October 28, 2026, used for the Clarity steps)

Clarity's consent rule

Since October 31, 2025, Clarity enforces consent signals for visits from the European Economic Area, the UK and Switzerland. Without a valid signal, those sessions lose features. Consent Mode is on by default for those regions, and you pass consent through Clarity's Consent API or a supported consent platform such as CookieYes.

If you have EU or UK visitors, set up your consent banner first; /guides/how-to-add-cookie-banner-to-website explains how.

Privacy defaults

Clarity masks sensitive content by default, so typed form values are not shown in recordings. Microsoft also says Clarity should not be used on sites aimed at people under 18.

It cannot see inside canvas elements or third-party iframes, so an embedded booking widget will appear blank in replays.

How it works

  1. Sign in at clarity.microsoft.com and add a project for your site.
  2. Go to Settings, then Setup, and choose a platform or Get tracking code.
  3. Install the code on every page.
  4. Visit the site and check the live user count, or look for requests to clarity.ms/collect in the Network tab.

Tips

  • One tracking code can cover several subdomains of the same site.
  • Link Clarity to Google Analytics from its setup page to jump from a GA session to its recording.
  • Leave bot detection on so crawler visits do not inflate session counts.
  • Heatmaps need traffic; give a new page a week before judging its scroll depth.

Frequently asked questions

Is Microsoft Clarity really free?

Yes. Microsoft offers Clarity free of charge, including recordings and heatmaps.

Does Clarity slow down my site?

The script loads asynchronously and is light, so most sites see no visible change. Test your pages before and after if speed is critical.

Can I use Clarity without cookies?

Yes. Turn the cookies setting off in Clarity's advanced settings and pass consent when visitors accept. Without cookies, multi-page visits are not stitched together into one session.

Related: Website heatmaps, How to add a cookie banner, How to add Hotjar, How to set up Google Analytics, Core Web Vitals.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

Product

Who It's For

Features

Resources

Company

View Sitemap