Microsoft Clarity

How to build with Microsoft Clarity and Webflow

Microsoft Clarity bridges the gap between pageview analytics and understanding user struggles. Connect Clarity to Webflow using three methods: the Microsoft Clarity marketplace app for one-click setup (recommended), manual code embedding for custom configurations, or API integration for programmatic data access.

Let’s look at the integration types in detail:

Use the Microsoft Clarity app

The Microsoft Clarity marketplace app offers the fastest integration with guided setup and automatic project creation. Install from Webflow's marketplace, authorize your sites, and link or create a Clarity project. The data appears within minutes after publishing.

This method provides:

• Complete dashboard access within Webflow: View recordings, heatmaps, and insights without leaving your workspace  
• Automatic tracking code deployment: No manual code copying required  
• Copilot AI integration: Get summarized insights and recommendations within your workflow  
• Automatic deployment: Clarity improvements deploy through the native integration

The marketplace app works best for teams wantinga  straightforward setup without technical implementation.

Embed tracking code manually

Manual implementation provides complete control over tracking code placement and configurations. Create a project in your Clarity dashboard, copy the JavaScript tracking code, and paste it into Webflow's Site Settings under Custom Code (Head code section). However, the Microsoft Clarity app remains the recommended approach for one-click installation.

The Webflow custom code documentation covers three methods:

1. Site-wide code through Site Settings (Head or Footer Code)  
2. Page-specific code via individual page settings  
3. The Custom Code Embed element for in-page placement.

The Head Code section is recommended for analytics, and all sections support up to 50,000 characters.

Here are the implementation steps:

1. Create your Microsoft Clarity account at https://clarity.microsoft.com/, enter your Website URL, and copy your tracking code from Settings → Setup  
2. Navigate to Site Settings → Custom Code in Webflow  
3. Paste the Clarity tracking code in the Head Code section  
4. Publish your site to activate tracking — saving in the Designer isn't sufficient  
5. Wait 2-3 minutes, then verify tracking by checking for active users in Clarity

Place code in Head Code rather than Footer Code — analytics scripts load more reliably when initialized before page content.

The manual implementation enables:

• Custom data masking: Add data-clarity-mask="true" to sensitive form fields  
• User identification: Implement window.clarity('identify', userId, sessionId, pageId, friendlyName) to track users across sessions  
• Custom event tracking: Use window.clarity('event', eventName) to log specific interactions  
• GDPR consent integration: Control tracking with window.clarity('consent') based on user preferences

Manual integration works best when you need customization beyond the marketplace app, such as custom event tracking or advanced cookie consent integration.

Build with Webflow and Microsoft Clarity API

For programmatic control, both platforms provide REST APIs. S

API capabilities include: custom event tracking for Webflow interactions, automated content optimization by correlating Clarity metrics with Webflow CMS performance, GDPR consent management, and programmatic session data retrieval.

The Clarity Data Export API at GET https://www.clarity.ms/export-data/api/v1/project-live-insights provides JWT-authenticated data retrieval, designed for periodic exports rather than real-time streaming. The Webflow API supports programmatic site management including custom code deployment via PUT https://api.webflow.com/v2/pages/:page_id/custom_code.

Access analytics data programmatically

The Clarity Data Export API provides JSON-formatted analytics data through REST endpoints. Retrieve traffic metrics, engagement time, scroll depth, and dimensional breakdowns by browser, device, country, and campaign. Combine with the Webflow CMS API to correlate engagement metrics with content performance — list collection items and match with Clarity session data to identify high-engagement content.

Authentication: Generate JWT tokens in Clarity project settings under Data Export (admin permissions required). Include tokens as Authorization: Bearer YOUR_TOKEN. For site tracking via the Clarity tracking code, no additional authentication is required—the project ID in your snippet handles authentication.

Primary endpoint:

GET https://www.clarity.ms/export-data/api/v1/project-live-insights?numOfDays={1|2|3}&dimension1={dimension}&dimension2={dimension}&dimension3={dimension}



Authentication: Requires JWT Bearer token via the Authorization header.

Query Parameters:

• numOfDays - Values of 1, 2, or 3 (days of historical data)  
• dimension1, dimension2, dimension3 - Optional dimensions: Browser, Device, OS, Country

Integration example with Webflow:

Correlate Clarity session data with Webflow CMS collection list performance by matching timestamps with engagement metrics. Export Clarity data and update Webflow CMS fields via the Webflow CMS API to display popular content based on scroll depth and engagement. For multi-site implementations, explore multi-channel content delivery. The API is designed for periodic exports and daily reporting.  

Track Webflow interactions with custom events

The Clarity JavaScript API tracks custom events for Webflow interactions without backend infrastructure. Call methods through window.clarity after the tracking code loads.

Available methods:

• Webflow form tracking — window.clarity('event', 'webflow_form_field_focus') tracks interactions with .w-input fields  
• CMS collection engagement — window.clarity('event', 'cms_item_clicked') logs clicks on .w-dyn-item elements  
• User identification — window.clarity('identify', userId, sessionId, pageId, friendlyName) links form submissions to known users  
• Session tagging — window.clarity('set', 'webflow_collection', 'blog-posts') adds metadata for filtering sessions  
• Consent management — window.clarity('consent') or window.clarity('consent', false) controls tracking based on user preferences

This client-side approach requires no server infrastructure and begins collecting data within 2-3 minutes, with full dashboard availability in 5-10 minutes.

Sync data with Webflow webhooks

Important: This approach uses Webflow webhooks to capture site events, which you correlate with Clarity session data through manual analysis or custom middleware. Microsoft Clarity doesn't provide webhooks—you'll need to periodically retrieve Clarity data via the Data Export API.

Webflow's webhook system sends real-time notifications for form submissions, CMS updates, and site publishing through seven event types (form_submission, collection_item_created, collection_item_changed, collection_item_deleted, collection_item_unpublished, site_publish, and e-commerce events). Clarity provides a polling-based Data Export API instead. Connect Webflow webhooks to custom endpoints that receive events in real-time, then periodically retrieve Clarity session data to correlate behavior patterns.

Relevant webhook events:

• Form_submission: Fires when users submit forms with submission data and timestamps  
• site_publish: Triggers on publish, enabling deployment annotations  
• collection_item_created: Notifies when CMS content publishes for performance tracking

Create webhooks through the Webflow API. For real-time synchronization, build custom middleware that receives Webflow webhooks and periodically polls Clarity's API.

curl -X POST https://api.webflow.com/v2/sites/{site_id}/webhooks \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-server.com/webhook"
  }'

Note: This is a Webflow API endpoint for creating webhooks. Microsoft Clarity doesn't offer webhooks, but you can use Webflow webhooks to stream events to external systems for analytics integration.

Validate webhook authenticity via the x-webflow-signature header per the webhook signatures documentation.

Use cases combining webhooks with Clarity:

• Form abandonment analysis — Track form submissions via Webflow's Form Submissions API and form_submission webhooks to calculate completion rates  
• Content performance monitoring — Correlate Clarity metrics with CMS publication times using collection_item_created events  
• Deployment annotations — Create analytics markers when site_publish events occur to track post-update changes

What you can build

Integrating Microsoft Clarity with Webflow gives you visibility into actual user behavior patterns, conversion barriers, and UX friction points across your entire site.

• E-commerce checkout optimization: Identify cart abandonment patterns through session recordings. Watch users navigate product pages, add items to cart, and encounter checkout obstacles.    
• B2B lead generation optimization: Analyze form abandonment using Microsoft Clarity's heatmaps to identify which content sections drive interaction.    
• Content performance tracking: Use Clarity's heatmaps to understand actual reading behavior beyond page views. Scroll depth reveals where readers stop engaging.    
• Mobile-first responsive design optimization: Segment heatmaps by device type to uncover device-specific friction that aggregate analytics hide.