Hotjar

Webflow gives you full control over layout, interactions, and responsive design. But it does not tell you what visitors actually do once they land on a published page. There is no built-in heatmap, session recording, or scroll-depth tool. Without behavior data, design decisions rely on assumptions rather than evidence.

Connecting Hotjar with Webflow fills that gap by layering click maps, session replays, and on-site surveys directly onto your live pages. You add a single tracking script to your Webflow site, and Hotjar starts collecting interaction data — where visitors click, how far they scroll, and where they drop off. Surveys and feedback widgets let you ask visitors why they behaved the way they did.

This integration is particularly useful for UX designers validating layout decisions, conversion rate optimizers diagnosing funnel drop-offs, ecommerce managers tracking checkout abandonment, and agencies running behavior-based audits on client Webflow sites. Product managers on SaaS marketing sites also use the combination to align page copy with how visitors actually describe their needs.

How to integrate Hotjar with Webflow

What is Hotjar? Hotjar is a website behavior analytics and user feedback platform, now part of Contentsquare. It provides heatmaps, session recordings, conversion funnels, and on-site surveys that show how visitors interact with web pages. Hotjar suppresses keystroke data on input fields by default and holds SOC-2 Type 2, ISO 27001, ISO 27017, ISO 27018, and ISO 27701 certifications.

Teams connect Hotjar and Webflow when they need to understand visitor behavior on published pages — not just traffic volume or page views, but actual click patterns, scroll depth, and points of friction. The integration is especially common after a site redesign or when conversion rates plateau without a clear cause.

The Hotjar-Webflow integration supports 2 approaches:

• Custom code injection places the Hotjar tracking script in your Webflow site settings, activating heatmaps, recordings, surveys, and funnels across all pages without writing application code.
• Hotjar's client-side JavaScript APIs handle custom event tracking and user identification, while its server-side REST API exposes survey-related data only (no endpoints for heatmaps or recordings). Webflow's Data API can programmatically update CMS collections.

Most implementations start with custom code injection and add API-level customization as tracking requirements grow.

Add the Hotjar tracking code to Webflow

Paste a single JavaScript snippet into your Webflow site settings, and Hotjar starts collecting data across every page. No marketplace app is required. Hotjar does not have one on the Webflow App Marketplace. A paid Webflow hosting plan is required because the custom code in head and body tags feature is not available on the free Starter plan.

To install the tracking code site-wide:

1. Log into your Hotjar account and go to the Sites & Organizations page. Click Install tracking code next to your site, then click Copy.
2. In Webflow, click the Webflow icon in the top-left corner, then open Site Settings > Custom Code.
3. Paste the Hotjar tracking code into the Head Code field and click Save Changes.
4. Click Publish, select your top-level domain, and click Publish to Selected Domains.
5. Return to your Hotjar Sites page and wait for the status to change to Collecting data. Visiting the published page yourself speeds up detection.

Once the snippet is live, these features activate through the Hotjar dashboard alone. No additional code changes to Webflow:

• Heatmaps showing click, scroll, and rage-click patterns
• Session recordings with frustration signal detection
• Popup, button, full-screen, and bubble surveys
• Conversion funnels tracking multi-page user journeys
• Feedback widgets for page-level user input

Custom code does not render in the Webflow preview. Always test on the published live site to confirm Hotjar is working. If you only need to track specific pages, add the tracking code in Page Settings > Custom Code > Head Code for individual pages instead of using the site-wide setting.

Deploy Hotjar through Google Tag Manager

If Google Tag Manager is already installed on your Webflow site, you can deploy Hotjar through GTM instead of pasting the script directly. This approach centralizes all tracking scripts in one place and supports conditional loading — for example, delaying Hotjar until a user consents to analytics cookies.

To set up Hotjar via GTM:

1. In GTM, create a new tag and paste your Hotjar tracking code.
2. Set the trigger type to Page View. Do not use DOM Ready or state-change triggers — these conflict with Hotjar's SPA detection system.
3. Publish the GTM container and verify the Collecting data status in Hotjar.

The GTM path is useful when you need to gate Hotjar behind a cookie consent mechanism, since Webflow does not include a built-in consent banner.

Embed a Hotjar survey at a specific page location

The Hotjar tracking script loads surveys as overlays configured from the Hotjar dashboard. If you need a survey embedded inline at a specific location on the page — rather than as a popup — you can use a Code Embed element.

To embed a survey inline:

1. In Hotjar, create a survey and copy the embed snippet from the survey settings.
2. In Webflow, drag a Code Embed element onto the canvas where you want the survey to appear.
3. Paste the Hotjar survey embed snippet into the Code Embed element.
4. Publish the site and test on the live page.

Code Embed elements place code inline in the page body, not in the <head>. This method works for survey widgets but is not appropriate for the main Hotjar tracking script, which requires <head> placement for accurate data collection.

Build with the Webflow and Hotjar APIs

For teams that need user identification, custom event tracking, or programmatic data sync between Hotjar and Webflow, both platforms provide APIs. Hotjar's API surface includes a limited server-side REST API for survey data plus two client-side JavaScript APIs for event tracking and user identification. Webflow's Data API v2 handles CMS operations, webhook registration, and site publishing. This path requires server-side development.

Three API systems are relevant to this integration:

• The Hotjar JavaScript APIs (Events API and Identify API) run client-side and handle custom event tracking and user identification
• The Hotjar REST API at api.hotjar.io handles survey data retrieval via server-side requests
• Webflow's Data API v2 handles CMS collections, form submissions, and site publishing
• Webflow webhooks trigger real-time events — such as form_submission — that your backend can process

Hotjar's REST API is limited to survey-related endpoints. There are no REST endpoints for heatmaps, recordings, or user management. Plan for this constraint when designing your integration architecture.

Track custom events on Webflow pages

The Hotjar Events API fires named events from the browser that you can use to trigger surveys, segment recordings, or build funnels in Hotjar. This is useful for tracking interactions that Hotjar does not capture automatically — like specific button clicks, form submissions, or scroll milestones on your Webflow pages.

To track a CTA click and a form submission, add this script to your Webflow page's custom code (before </body>):

<script>
 // Track CTA button click
 document.querySelector('.cta-button').addEventListener('click', function() {
   hj('event', 'cta_clicked');
 });

 // Track Webflow form submission
 document.querySelector('#my-webflow-form').addEventListener('submit', function() {
   hj('event', 'form_submitted');
 });
</script>



Event names can be up to 250 characters and accept alphanumeric characters, underscores, dashes, spaces, periods, colons, pipes, and forward slashes. Each Hotjar site supports up to 10,000 unique events on a rolling basis. Older events become unsearchable beyond that limit.

Identify logged-in users with the Identify API

The Identify API associates a known user (such as a Webflow Memberships user) with their Hotjar session recordings. This enables attribute-based survey targeting and recording segmentation in the Hotjar dashboard.

To identify a user, add this to your page-level custom code before </body>:

<script>
 hj('identify', 'user_12345', {
   plan_type: 'pro',
   signup_date: '2024-01-15',
   is_paying_customer: true
 });
</script>



If multiple hj('identify') calls occur in a single session, Hotjar uses the most recent values. Every call must include the userId parameter. Using email as the userId is supported but discouraged — email changes create duplicate users in Hotjar.

Sync Hotjar survey responses to Webflow CMS

Hotjar supports native webhooks that fire HTTP POST requests when a survey response is submitted or a recording is created. You can receive these payloads on your backend and write the data to a Webflow CMS collection using the Webflow Data API.

To set up the sync:

1. In Hotjar, open a survey's edit view and configure a webhook URL in the Forward Response section.
2. Build a backend endpoint that receives the survey_response payload — which includes fields like survey_name, device, country_code, response_origin_url, recording_url, and user_attributes.
3. From your backend, create a CMS item via the Webflow API:

curl -X POST https://api.webflow.com/v2/collections/{collection_id}/items \
 -H "Authorization: Bearer <token>" \
 -H "Content-Type: application/json" \
 -d '{
   "fieldData": {
     "name": "Survey Response - User 12345",
     "hotjar-user-id": "abc123",
     "response-text": "The checkout flow was confusing",
     "device": "mobile",
     "country": "US",
     "submitted-at": "2025-03-15T10:30:00Z",
     "recording-url": "https://insights.hotjar.com/recordings/..."
   }
 }'



4. Create the item as live to make it visible on your live site:

curl -X POST https://api.webflow.com/v2/collections/{collection_id}/items/live \
 -H "Authorization: Bearer <token>" \
 -H "Content-Type: application/json" \
 -d '{"itemIds": ["item_id_here"]}'



Live CMS data is cached for 5 minutes on non-Enterprise plans, so changes will not appear instantly. This pattern works for both survey_response and recording_created webhook events.

What can you build with the Hotjar Webflow integration?

Integrating Hotjar with Webflow lets you make design and content decisions based on actual visitor behavior instead of guesswork.

• CTA placement validation: Run click heatmaps on landing pages to see whether visitors interact with your primary call-to-action or ignore it entirely. Compare click patterns before and after repositioning a CTA button, and use the data to justify layout changes to stakeholders.
• Checkout funnel diagnosis: Track session recordings across product pages, cart, and confirmation pages on a Webflow ecommerce site to identify exactly where shoppers abandon the flow. Pair recordings with exit-intent surveys that ask "What nearly stopped you from completing your purchase?"
• Form field optimization: Use Hotjar's form analysis (available on Growth plans and above) to see which fields cause hesitation or abandonment on Webflow lead generation forms. Identify a multi-field contact form where visitors consistently drop off at the phone number field, then test a shorter version.
• Agency UX audit reports: Install Hotjar on a client's Webflow site and build a behavior-based audit using heatmaps, scroll depth data, and session recordings. Replace assumption-driven recommendations with visual evidence of navigation friction and content engagement patterns.

If you need more control over user segmentation, event-based survey targeting, or syncing response data into CMS collections, the API integration path covers those cases with full flexibility.