Embed Interactive Content on Framer
Add an Embed component, paste your code, and start capturing leads. Works with any Framer template or custom design.
CalcStack tools are embedded on Framer websites across every major industry. The embed process takes under 60 seconds, paste one line of code and your interactive tool is live, branded to your website, capturing qualified leads. Read the full embed guide or see pricing.
Live demo
See a Live Example
This is a real CalcStack tool. Your visitors see this exact experience.
Why CalcStack
Why CalcStack for Framer?
Lead capture built in
Every calculator gates results behind an email form. Leads arrive with qualification data, every input, every output, benchmark comparisons, and a quality score. Not just a name and email.
Industry benchmarks
Show visitors how they compare to industry averages. Benchmarks make calculators more engaging and shareable, and they give your sales team richer context when following up with leads.
White-label ready
Remove CalcStack branding on Growth and Agency plans. Customize primary colors, accent colors, and fonts so calculators look native to your Framer design system.
Responsive by default
The embed adapts to your Framer layout on desktop, tablet, and mobile. No custom breakpoints or override code needed, set the Embed component width to "Fill" and the tool handles the rest.
How the Framer Embed Works
Framer lead generation through CalcStack works via the native Embed component. Visitors interact with calculators, scorecards, or quizzes inside any Framer page; their inputs become qualified leads with full context. Integration requires no custom code, no third-party plugins, and no build step, and adds zero impact on Framer's performance.
The embed loads inside an isolated iframe. Your Framer animations, transitions, and CMS bindings remain completely unaffected. The tool communicates lead data back to CalcStack via a secure postMessage bridge, your site never handles sensitive visitor data directly.
This architecture works identically on Framer's free tier, Mini plan, and custom domains. No server-side configuration, no environment variables, no API keys in your project. According to W3Techs and BuiltWith adoption data, Framer has been one of the fastest-growing site builders among design-focused teams for the past three years, with adoption concentrated in startups and agencies that prize design-led conversion experiences.
Embed Code Reference
Two ways to embed in Framer: the standard Embed component on the canvas, or a Code Component for advanced integration with your design system. Both methods support lead capture, custom styling, and CRM integration.
Using the Embed Component
Select any frame on your canvas, then go to Insert → Embed. In the properties panel, paste the URL or switch to HTML mode and paste the full embed snippet. The Embed component renders a placeholder on the canvas, preview or publish to see the live tool.
Standard iframe embed
<iframe src="https://calcstack.net/embed/profit-margin-calculator?customer=your-id" width="100%" height="600" frameborder="0"></iframe>Script embed with auto-resize
<div data-calcstack-tool="profit-margin-calculator" data-customer="your-id"></div>
<script src="https://calcstack.net/embed.js"></script>Using a Code Component
For tighter integration, create a Framer Code Component that wraps the CalcStack iframe. This gives you programmatic control over props like tool slug, customer ID, and theme, useful when embedding different tools across CMS collection pages.
Code Component example (paste in Framer's code editor)
import { addPropertyControls, ControlType } from "framer"
export default function CalcStackEmbed({ tool, customer }) {
return <iframe src={`https://calcstack.net/embed/${tool}?customer=${customer}`} width="100%" height="600" style={{ border: "none" }} />
}
addPropertyControls(CalcStackEmbed, {
tool: { type: ControlType.String, title: "Tool Slug", defaultValue: "profit-margin-calculator" },
customer: { type: ControlType.String, title: "Customer ID", defaultValue: "your-id" },
})Find your Customer ID in your CalcStack dashboard under Settings. Without a Customer ID, the embed runs as a demo with CalcStack branding and no lead capture.
Common Issues & Troubleshooting
Most Framer embed issues are resolved in under a minute. Here are the three most common problems and their fixes.
Embed component shows blank on canvas
Cause: Embed components in Framer render their content on preview and publish, not on the canvas in edit mode. The blank placeholder is expected behavior.
Fix: Click the Preview button (or press Cmd + P) to see the live tool. If it still shows blank in preview, verify the embed URL is correct and that your plan is active.
Tool doesn't match Framer's dark mode
Cause: By default, CalcStack embeds render in light mode. If your Framer site uses a dark color scheme, the tool will look out of place.
Fix: Add theme="dark" as a parameter to the embed URL (e.g. ?customer=your-id&theme=dark). On Growth plans and above, you can also customize primary and accent colors to match your exact Framer design tokens.
Embed sizing is off in responsive views
Cause: The Embed component has a fixed width or height that doesn't adapt across Framer's responsive breakpoints (desktop, tablet, mobile).
Fix: Set the Embed component width to "Fill" and add a min-height of 600px in the layout properties. The CalcStack tool auto-adapts to its container width, so a flexible Embed component is all you need. Check the resources page for tool-specific sizing recommendations.
Popular Lead Generation Tools for Framer Sites
These are the most-embedded tools on Framer sites. Each one captures qualified leads with industry-specific data. Browse all tools on the resources page.
ROI Calculator
Help prospects calculate return on investment before they buy.
Pricing Calculator
Let visitors configure pricing and see costs in real time.
Freelancer Rate Calculator
Perfect for freelancers and agencies showcasing their Framer portfolio.
Break-Even Calculator
Show visitors when their investment will pay for itself.
Conversion Rate Calculator
Let visitors benchmark their website conversion performance.
Profit Margin Calculator
A must-have for SaaS and e-commerce landing pages.
Turn Your Framer Visitors Into Qualified Leads
Start with the Free plan, no credit card required. Embed interactive tools and start capturing leads today.
Also available on: