How to Add Heatmaps and Session Recordings to a Framer Website

Framer makes it easy to ship beautiful websites fast. But a beautiful site isn't necessarily one that converts. Animations can distract, scroll-triggered sections may never be reached, and the CTA you designed around may be ignored.

Heatmaps and session recordings show you how visitors really experience your Framer site.

Table of Contents

1. Install in Under 5 Minutes
2. Verify the Install
3. What to Analyze on a Framer Site
4. Design Decisions Heatmaps Settle
5. Key Takeaways

Install in Under 5 Minutes

1. Create a free DeepSync project for your Framer domain.
2. Copy your tracking snippet.
3. In Framer, open Site Settings → General → Custom Code.
4. Paste the snippet in the End of head tag box.
5. Publish your site.

Custom code runs only on the published site, not in the Framer editor preview. Docs: Install on Framer.

Verify the Install

Open your published site in a private window, scroll and click around, then check Sessions in DeepSync. If nothing appears, check your consent setup (no data troubleshooting).

What to Analyze on a Framer Site

Use scroll heatmaps to see where attention drops, and click heatmaps to spot dead clicks on elements that look clickable.

Design Decisions Heatmaps Settle

• "Is the hero too tall?" — If most mobile visitors never scroll past it, yes.
• "Do people watch the product video?" — Check clicks and replay.
• "Is the testimonial carousel worth it?" — If no one interacts, replace with a static grid.
• "Should the CTA be repeated?" — If people scroll deep then leave, add CTAs lower.

Key Takeaways

• Paste the snippet in Framer's Custom Code (end of head) and publish.
• Analyze hero CTA clicks, scroll depth, and mobile layout first.
• Use heatmaps to settle design debates with evidence.

Conclusion

Design with intuition, then verify with behavior. Your next Framer iteration will be better for it.

Start free · Landing page heatmaps guide