Hotjar

How to integrate Hotjar with Webflow

Hotjar offers multiple integration paths for Webflow sites, from simple tracking code installation to advanced behavioral analytics.

While Hotjar doesn't have an official Webflow marketplace app, you can use custom Code Embeds for quick setup or build custom integrations using Hotjar's APIs for automated workflows, user segmentation, and compliance management.

Use custom Code Embeds

The primary integration method uses Webflow's custom code feature to embed Hotjar's tracking script site-wide. This enables immediate access to heatmaps, session recordings, and feedback tools without any coding knowledge.

Core capabilities include:

• One-click installation through Webflow's Site Settings
• Automatic heatmap generation for all pages showing clicks, scrolls, and mouse movements
• Session recordings that capture real user journeys
• Feedback widgets and exit surveys deployable without additional code

To implement, copy your Hotjar tracking code from the Hotjar dashboard and paste it into Webflow's Site Settings > Custom Code > Head Code section. After publishing your site, Hotjar automatically begins collecting behavioral data.

For page-specific tracking, use Webflow's Embed element to place the tracking code on individual pages. This approach works well for landing page campaigns or A/B testing specific layouts.

Build with Webflow and Hotjar APIs

Direct API integration unlocks advanced capabilities beyond basic tracking, including automated user segmentation, GDPR compliance workflows, and cross-platform data synchronization. This approach suits teams needing programmatic control over behavioral data or integration with existing analytics infrastructure.

Key capabilities include:

• User attribute synchronization for personalized tracking
• Automated GDPR data deletion upon user request
• Custom event tracking for conversion analysis
• Survey response export to external systems

Implement user segmentation

Build targeted behavioral analysis using the Identify API:

1. Configure user attributes: Pass Webflow user data (e.g., subscription tier, location) to Hotjar for segmented recordings
2. Create tracking logic: Use JavaScript to call hj('identify', userId, {attributes}) after user authentication
3. Filter recordings: Apply attribute-based filters in Hotjar to analyze specific user cohorts

The Identify API supports up to 100 custom attributes per site, enabling granular analysis of user behavior patterns across different segments.

Automate compliance workflows

Implement GDPR/CCPA compliance using the User Lookup API:

1. Create deletion request form: Build a Webflow form for users to request data removal
2. Connect via webhooks: Route form submissions to your backend service
3. Execute deletion: Call DELETE /v1/users/{user_id} to remove all Hotjar data for that user

This endpoint requires authentication via OAuth 2.0 and is available on Observe Scale and Ask Scale plans.

Note: GDPR compliance via Hotjar’s User Lookup API requires custom backend development and custom OAuth setup.

Export behavioral insights

Sync survey responses and feedback with your CMS using the Survey Responses API:

1. Authenticate with OAuth: Generate bearer tokens using client credentials
2. Retrieve responses: Call GET /v1/sites/{site_id}/surveys/{survey_id}/responses
3. Process data: Transform responses and update Webflow CMS collections via Webflow's API

Rate limits allow 3,000 requests per minute, supporting high-volume data synchronization workflows.

What you can build

Integrating Hotjar with Webflow opens possibilities for data-driven optimization and personalized user experiences.

• E-commerce optimization: Track user behavior through product pages and checkout flows to identify friction points, then use session recordings to understand why customers abandon carts and optimize the purchase journey
• Lead generation improvement: Analyze form interactions with heatmaps to optimize field placement and reduce abandonment, while exit surveys capture reasons why visitors leave without converting
• Content engagement analysis: Use scroll maps to understand how far users read your content and reposition key information above the fold based on actual engagement patterns
• A/B testing validation: Compare heatmaps across different page variants to see which layouts drive more engagement and use session recordings to understand the qualitative differences in user behavior