How to Add Heatmaps and Session Recordings to a Webflow Site

Short answer: paste the DeepSync script tag into your Webflow site's custom code, in the head section, and publish. Custom code runs only on the published site, not in the Designer. Site-wide custom code is a feature of paid Webflow site plans, so check yours. Once live, you get heatmaps and recordings for every page, including CMS pages.

Table of Contents

1. Install
2. Verify
3. What to Analyse on a Webflow Site
4. Webflow-Specific Notes
5. Key Takeaways

Install

The script is the same single tag used on any website (install on any website):

<script async src="YOUR_LOADER_URL"></script>

1. Create a free DeepSync project for your domain and copy the snippet from its install settings.
2. In Webflow, open your site's settings and find the custom code section.
3. Paste the snippet into the head code area.
4. Save, then publish the site.

The tag must be on every page. Site-level custom code does that. Adding it to a single page's settings covers only that page.

Webflow's menus change from time to time, and custom code availability depends on your plan, so confirm the exact location in Webflow's own help pages.

Verify

1. Open the published site in a normal browser window.
2. Scroll and click on a couple of pages.
3. Open Sessions in DeepSync. Your visit should appear shortly.

If nothing appears:

• Did you publish? Saving is not enough.
• Are you on the published domain? The Designer and preview do not run custom code.
• Consent. DeepSync projects default to consent-required mode and record nothing until your cookie banner sends a consent signal (consent setup).
• Staging domain. If you test on the webflow.io address, check the project is set up for it, and remember staging sessions count toward your limit.

More in I installed the snippet but see no data.

What to Analyse on a Webflow Site

Webflow sites are usually marketing sites, so the questions are about attention and conversion.

Forms. Webflow forms show a success message without changing the page by default. To count submissions as a goal, either redirect to a thank-you page and use that URL, or fire a custom event on success.

Mobile. Check each breakpoint. Layouts designed on desktop often push the call to action far down on phones.

Webflow-Specific Notes

• Interactions and animations. Elements that animate in on scroll start hidden. If a recording shows blank sections that the visitor clearly scrolled through, entrance animations are the likely reason. The capture is complete; playback is holding the animation at its start (capture limits).
• CMS collection pages. Each item has its own URL. Group them when analysing a template.
• Embeds. Third-party embeds in iframes, such as video players and scheduling widgets, appear as empty boxes in recordings.
• E-commerce. Track purchases with a goal on the order confirmation page.
• Page speed. Large background videos and unoptimised images are common on Webflow sites. Check real-user load times on mobile.
• Tag manager alternative. If you already use Google Tag Manager on the site, you can install through it instead (GTM guide). A direct tag loads earlier.

Key Takeaways

• Paste the tag into site-level head code and publish.
• Custom code runs only on the published site.
• Blank sections in replay are usually entrance animations.
• Use a thank-you page or event to count form submissions.

Conclusion

Webflow makes it easy to design a site. A heatmap tells you whether visitors use it the way you designed it.

Start free · Install on any website