How do I embed CalcStack on a custom HTML site?

Paste one line of iframe code into your HTML page. It works on any website, landing page, or web application.

Does CalcStack require any JavaScript libraries?

No. CalcStack runs entirely in an iframe. No dependencies, no JavaScript to install, no conflicts with your existing code.

Will CalcStack work with my website framework?

Yes. The iframe embed works with React, Vue, Angular, Next.js, Gatsby, Hugo, Jekyll, and any HTML-based framework.

HTML / Any Website Integration

Turn HTML / Any Website Visitors Into Leads With Interactive Content

One line of embed code. Works on any HTML page, landing page, or custom-built website. No plugins, no dependencies, no framework required.

See Plans & Pricing

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 in 3 simple steps

Copy the embed code

Go to your CalcStack dashboard, choose a calculator, and copy the one-line embed code. You can pick from an iframe snippet or a script tag — both work on any HTML page without dependencies or a build step.

Paste into your HTML

Add the embed code anywhere in your HTML file, landing page template, or CMS custom code section. It works inside any <div>, section, or body tag. The tool renders asynchronously so it never blocks your page from loading.

Start capturing leads

The calculator loads instantly. Visitors calculate, see benchmarks, and share their email to save results. Leads arrive in your dashboard with full context — every input, every result, and a lead quality score.

See a Live Example

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

According to W3Techs CMS Usage Statistics, custom HTML sites — pages built without a traditional CMS — make up a significant portion of the web. CalcStack embeds are designed for this reality: a single iframe that works on any page, regardless of stack or hosting.

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.

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

<script src="https://calcstack.net/embed.js" data-tool="profit-margin-calculator" data-customer="your-id"></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.

Browse All Tools View Plans & Pricing

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.

See Plans & Pricing Read the Embed Guide

Frequently Asked Questions

What websites can I embed CalcStack on?▼

Any website that supports custom HTML. This includes static HTML pages, landing page builders (Unbounce, Leadpages, Instapage), custom React/Vue/Angular apps, internal tools, and any CMS with a custom code block. If you can paste HTML, you can use CalcStack.

Do I need a specific framework or library?▼

No. The embed code is a single script tag with no dependencies. It works in plain HTML, React, Vue, Angular, Svelte, or any other framework. No npm install, no build step.

Will the calculator slow down my page?▼

No. The tool loads asynchronously in an iframe. It does not block rendering, affect your page speed score, or interfere with your existing JavaScript.

Can I embed multiple calculators on one page?▼

Yes. Each tool has its own embed code. You can place multiple tools on the same page, each targeting a different section or audience.

Does CalcStack work with single-page applications?▼

Yes. The embed code works in SPAs built with React, Vue, Angular, or any other framework. The iframe loads independently of your app routing, so navigation between pages does not break the embed.

Can I pass URL parameters to the embed?▼

Yes. You can append query parameters to the embed URL to pre-fill inputs, track UTM sources, or customize the experience. This is useful for personalized landing pages or A/B testing.

How do I track CalcStack leads on a custom website?▼

CalcStack sends leads to your CRM via webhook. For custom sites, you can also listen for postMessage events from the iframe to trigger your own analytics or conversion tracking.

Can I use CalcStack behind a login wall?▼

Yes. The embed works on any page, including authenticated sections of your website. The tool renders in an iframe regardless of your site authentication setup.