Embed Interactive Content on Any Website
One line of embed code. Works on any HTML page, landing page, or custom-built website. No plugins, no dependencies, no framework required.
CalcStack tools are embedded on HTML / Any Website 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 HTML / Any Website?
One line of code
A single script tag is all you need. No dependencies, no build step, no framework requirements. Paste it into your HTML and you are live in under 60 seconds.
Works everywhere
Static HTML pages, landing page builders, email platforms with custom code, internal tools, if it supports HTML, it supports CalcStack. No server-side rendering or special hosting required.
Industry benchmarks
Show visitors how they compare to industry averages. Benchmarks increase engagement, time on page, and lead quality because visitors want to know where they stand.
White-label ready
Remove all CalcStack branding on Growth and Agency plans. The calculator looks like your own, your colors, your domain, your brand experience.
Anatomy of the CalcStack Embed
Custom HTML sites can add CalcStack lead generation with a single iframe tag. Visitors interact with calculators, scorecards, or quizzes inline; their inputs become qualified leads with full context routed via webhook to your CRM. The embed works on any stack (Astro, Eleventy, plain HTML, or hand-coded sites) with no build step required.
The embed loads inside an isolated iframe. Your HTML page, scripts, and styles 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 means CalcStack works identically on static hosting (Netlify, Vercel, GitHub Pages), shared hosting, dedicated servers, and local development environments. No server-side configuration is required. According to HTTP Archive's annual Web Almanac and BuiltWith technology surveys, JAMstack and static-site adoption (Hugo, Jekyll, Astro, 11ty, Next.js exports) has grown sharply since 2020, and iframe embeds are the dominant pattern for adding interactive functionality without breaking the static build.
Embed Code Reference
Three ways to embed CalcStack on any HTML page: a raw iframe for maximum control, a script tag with automatic resizing, or a framework component wrapper for React and Vue projects.
Basic iframe embed
<iframe src="https://calcstack.net/embed/profit-margin-calculator?customer=your-id" width="100%" height="600" frameborder="0" loading="lazy"></iframe>Script tag with auto-resize
<div data-calcstack-tool="profit-margin-calculator" data-customer="your-id"></div>
<script src="https://calcstack.net/embed.js"></script>React / Vue component wrapper
<CalcStack tool="profit-margin-calculator" customer="your-id" height={600} onLeadCapture={(lead) => console.log(lead)} />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 HTML embed issues are resolved in under a minute. Here are the three most common problems and their fixes.
iframe blocked by Content Security Policy (CSP) headers
Cause: Your server sends a Content-Security-Policy header that does not allow iframes from external origins. The browser blocks the CalcStack iframe before it can load.
Fix: Add frame-src https://calcstack.net to your CSP headers. The full header should read: Content-Security-Policy: frame-src 'self' https://calcstack.net. If you use a meta tag instead of a header, add the same directive to the content attribute.
Tool does not auto-resize in single-page applications
Cause: Raw iframes do not respond to SPA route changes. When the parent page navigates without a full reload, the iframe height may become stale or the tool may not reinitialize.
Fix: Use the script embed instead of a raw iframe. The script tag handles SPA navigation and dynamic resizing automatically. It listens for DOM mutations and re-initializes when the host element re-enters the page after a route change.
Cross-origin postMessage events not received
Cause: Your event listener does not filter by origin, so messages from CalcStack are either ignored or lost among messages from other iframes and browser extensions.
Fix: Listen for messages from origin https://calcstack.net specifically. Filter by event.data.source === 'calcstack' to avoid conflicts with other iframes. See the resources page for a full postMessage API reference.
Popular Calculators
These are the most-embedded tools on custom HTML 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.
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.
Mortgage Calculator
Essential for real estate and financial services sites.
Cost Per Lead Calculator
Help marketing teams understand their acquisition costs.
Turn Your HTML / Any Website Visitors Into Qualified Leads
Start with the Free plan, no credit card required. Embed interactive tools and start capturing leads today.
Also available on: