Embed Calculy Calculators

How it works

Every calculator page on Calculy renders in embed mode when opened with ?embed=1. In embed mode the site header, footer, page title, info section, and FAQ are hidden so only the interactive calculator remains.

• Direct iframe — the simplest option. Paste an <iframe> tag and you are done. The iframe keeps a fixed height.
• Loader div + embed.js — recommended. The loader builds the iframe for you and auto-resizes its height to fit the calculator content, so nothing gets cut off on any screen.

Embedded calculators show a small fixed Calculy corner badge that links back to the full calculator page. That is all the attribution we ask for — embeds are free for any site.

Quick start

One line. Paste this anywhere custom HTML is allowed:

<iframe src="https://calculy.in/finance/fd-calculator?embed=1" width="100%" style="border:0"></iframe>

URL parameters

All embed options are passed as query parameters on the calculator URL. The loader div passes them through data-params automatically.

Finding the right URL and parameter names

1. Open any calculator on Calculy, for example the FD calculator.
2. Tweak the inputs to your liking.
3. Watch the URL bar — it updates automatically with the current values as query params.
4. Copy that URL and reuse it in your embed. The field id of each input is its param name.

For example, the FD calculator uses principal, rate, tenure, and freq; the SIP calculator uses monthlyAmount, expectedReturn, and tenure. Since every calculator is different, always check the calculator's own page inputs — or use the calculator once and copy the resulting URL.

Pre-filled parameters are computed automatically on load, so your visitors see results instantly without touching the form.

Examples

1. Basic iframe embed (simplest)

Pre-fills the FD calculator with principal, rate, and tenure. No auto-resize.

<iframe src="https://calculy.in/finance/fd-calculator?embed=1&principal=100000&rate=7&tenure=5" width="100%" style="border:0"></iframe>

2. Loader div embed (recommended, auto-resize)

The loader replaces the .calculy-embed div with an iframe and auto-resizes its height to the content.

<div class="calculy-embed"
     data-category="finance"
     data-calculator="sip-calculator"
     data-params="monthlyAmount=10000&expectedReturn=12&tenure=10"></div>
<script src="https://calculy.in/embed.js" async></script>

3. Loader with share button

Pass showShare=true to show the share button inside the embed.

<div class="calculy-embed"
     data-category="finance"
     data-calculator="fd-calculator"
     data-params="principal=100000&rate=7&tenure=5&showShare=true"></div>
<script src="https://calculy.in/embed.js" async></script>

4. Result-only mode (all params provided)

Hides the form and shows only the result section. Requires all input params in the URL.

<div class="calculy-embed"
     data-category="finance"
     data-calculator="fd-calculator"
     data-params="principal=100000&rate=7&tenure=5&showResult=true"></div>
<script src="https://calculy.in/embed.js" async></script>

Equivalent direct iframe:

<iframe src="https://calculy.in/finance/fd-calculator?embed=1&principal=100000&rate=7&tenure=5&showResult=true" width="100%" style="border:0"></iframe>

5. Result-only mode with missing params (shows an error)

If showResult=true is set but required params are missing or incomplete, the embed shows a critical error: "Could not calculate result. Please provide all required parameters."

<div class="calculy-embed"
     data-category="finance"
     data-calculator="fd-calculator"
     data-params="principal=100000&showResult=true"></div>
<script src="https://calculy.in/embed.js" async></script>

6. Loader with max height (internal scroll)

Cap the iframe at a fixed height. Instead of growing, the embedded page scrolls internally.

<div class="calculy-embed"
     data-category="finance"
     data-calculator="fd-calculator"
     data-params="principal=100000&rate=7&tenure=5"
     data-max-height="600"></div>
<script src="https://calculy.in/embed.js" async></script>

7. Dynamic embeds (SPA / injected content)

The loader is idempotent — it marks every processed element and never double-embeds. If you inject a .calculy-embed element into the DOM after the page has loaded, call window.CalculyEmbed.init() to re-scan for new embeds. It is safe to call multiple times.

<div id="calculator-slot"></div>
<script src="https://calculy.in/embed.js" async></script>
<script>
  var slot = document.getElementById('calculator-slot');
  var embed = document.createElement('div');
  embed.className = 'calculy-embed';
  embed.setAttribute('data-category', 'finance');
  embed.setAttribute('data-calculator', 'emi-calculator');
  embed.setAttribute('data-params', 'principal=2000000&rate=8.5&tenure=20');
  slot.appendChild(embed);
  if (window.CalculyEmbed) window.CalculyEmbed.init();
</script>

8. Multiple embeds on one page

Add as many loader divs as you like — a single embed.js script powers them all.

<div class="calculy-embed"
     data-category="finance"
     data-calculator="fd-calculator"
     data-params="principal=100000&rate=7&tenure=5"></div>

<div class="calculy-embed"
     data-category="finance"
     data-calculator="sip-calculator"
     data-params="monthlyAmount=10000&expectedReturn=12&tenure=10"></div>

<script src="https://calculy.in/embed.js" async></script>

Frequently asked questions