Embed Interactive Content on Webflow
No Webflow app needed. Copy one line of code, paste it into an Embed element, and you're live.
CalcStack tools are embedded on Webflow 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 Webflow?
Lead capture built in
Every calculator can gate results behind an email form. Leads arrive with full context, every input, every result, benchmark position, source URL, and a quality score.
Industry benchmarks
Show visitors how they compare to industry averages. Benchmarks increase engagement, make your calculators more valuable, and generate more qualified leads.
White-label ready
Remove all CalcStack branding on Growth and Agency plans. Your calculators look like a native part of your Webflow site, matching your fonts, colors, and design system.
How the Webflow Embed Works
Webflow lead generation through CalcStack works via a single Embed element in the Webflow Designer. Visitors interact with calculators, scorecards, or quizzes inside any Webflow page; their inputs become qualified leads with full context. Integration requires no apps, no extensions, no custom code, and adds nothing to your published site's JS bundle.
The embed loads inside an isolated iframe. Your Webflow site's design, interactions, and page speed 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 Webflow's free subdomain, custom domains, and Webflow Enterprise hosting. No server-side configuration is needed. According to BuiltWith adoption data and the State of Untapped community survey, Webflow has been one of the fastest-growing visual website builders for design-focused agencies and product teams since 2020.
Embed Code Reference
Add a CalcStack tool to any Webflow page using the Embed element in the Designer. For site-wide embeds (e.g., a calculator in the footer), use Project Settings → Custom Code. Both methods are shown below.
Iframe Embed (Per-Page)
Standard iframe embed via Embed element
<iframe src="https://calcstack.net/embed/profit-margin-calculator?customer=your-id" width="100%" height="600" frameborder="0"></iframe>Iframe with custom height and dark theme
<iframe src="https://calcstack.net/embed/marketing-health-score?customer=your-id&theme=dark" width="100%" height="800" frameborder="0"></iframe>Script Embed (Auto-Resize)
Script tag with automatic height adjustment
<div data-calcstack-tool="profit-margin-calculator" data-customer="your-id"></div>
<script src="https://calcstack.net/embed.js"></script>Site-Wide Embed via Project Settings
Add to Project Settings → Custom Code → Footer Code for site-wide availability
<div data-calcstack-tool="roi-calculator" data-customer="your-id"></div>
<script src="https://calcstack.net/embed.js"></script>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. Browse all available tools on the resources page.
Common Issues & Troubleshooting
Most Webflow embed issues are resolved in under a minute. Here are the three most common problems and their fixes.
Embed element shows "HTML Embed" placeholder in the Designer
Cause: Webflow does not render custom HTML inside the Designer canvas. The Embed element always displays a gray placeholder box while you are editing. This is expected Webflow behavior, not a CalcStack issue.
Fix: Click the eye icon in the top-right of the Designer to open a live preview, or publish your site and view it on your live domain. The CalcStack tool will render fully in both cases. You can also use the Webflow preview mode (keyboard shortcut: Ctrl/Cmd + Shift + P) to verify the embed is working without publishing.
Tool doesn't resize properly on mobile
Cause: The Embed element has a fixed width set in the Webflow Designer, or a parent container is constraining the element's width on smaller breakpoints.
Fix: Select the Embed element in the Designer and set its width to 100% on all breakpoints (desktop, tablet, mobile landscape, and mobile portrait). CalcStack tools are fully responsive and will auto-adapt to whatever width the container provides. If using the iframe method, ensure width="100%" is set in the iframe tag.
Embed not working on CMS collection pages
Cause: The Embed element was added to an individual CMS collection item rather than the CMS collection template. Webflow CMS pages are generated from a shared template, and custom code must be placed on the template to appear on all collection pages.
Fix: Navigate to the CMS Collection template page in the Designer (not an individual item). Add the Embed element to the template layout where you want the tool to appear. Every collection page generated from that template will now include the CalcStack embed. If you need different tools on different collection pages, use a CMS field to store the tool slug and reference it dynamically.
Popular Lead Generation Tools for Webflow Sites
These are the most-embedded tools on Webflow 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.
Mortgage Calculator
Essential for real estate and financial services Webflow sites.
Solar ROI Calculator
Perfect for solar installers showcasing savings on their Webflow site.
Break-Even Calculator
Show visitors when their investment will pay for itself.
Profit Margin Calculator
A must-have for e-commerce and SaaS pricing pages.
Turn Your Webflow Visitors Into Qualified Leads
Start with the Free plan, no credit card required. Embed interactive tools and start capturing leads today.