Skip to content
OverCalculator

Embedding OverCalculator tools

Any OverCalculator tool can be embedded on your website with a single<iframe>. Pick a tool from the embeddable calculator gallery, or open any calculator page and click Get Embed Code to generate a snippet for that exact page.

How to embed

Copy the snippet and paste it into your page's HTML where you want the tool to appear:

<iframe src="https://www.overcalculator.com/embed/calculators/percentage" width="100%" height="600" frameborder="0"></iframe>
  1. Copy the iframe snippet from the gallery card or from the Get Embed Code button on a calculator page.
  2. Paste it into your page's HTML (most CMSes accept raw HTML in a custom HTML block).
  3. Publish and reload — the tool renders immediately.

The snippet is the same one the Get Embed Code button produces, so the embedded tool behaves exactly like the calculator page it came from.

Sizing and responsive tips

  • The snippet sets width="100%", so the embed fills its container — it works in a full-width section or a narrow sidebar.
  • height="600" is a comfortable default for most tools. If the form feels cramped in your layout, raise the height (for example height="700"); the iframe scrolls when the content is taller.
  • Keep the width percentage-based rather than a fixed pixel width so the embed reflows on phones and tablets.
  • If your theme constrains iframes, you can also wrap the snippet in a container and apply max-width: 100% to the iframe.

Attribution

Every embed renders a small Powered by OverCalculator bar below the form that links back to the full calculator page. Please keep that bar visible — it is how the tool stays free and how your readers can reach the formula, assumptions, and sources behind a result. Do not hide, clip, or scroll it out of view (for example with overflow tricks or negative margins).

Prefill inputs from the URL

Embed URLs accept ?field=value parameters that prefill the calculator's inputs when it loads. The parameter names match the inputs on the calculator's form. Only parameters that match a declared input are applied; anything else in the query string (for example utm_source) is safely ignored. On/off inputs take true or false.

<iframe src="https://www.overcalculator.com/embed/calculators/percentage?percent=15&whole=200" width="100%" height="600" frameborder="0"></iframe>

The example above opens the percentage calculator with 15% of 200 already entered. Fill a calculator, copy its URL, and embed that URL to share a specific calculation.

The Get Embed Code button carries the current page URL — including any parameters — into the embed, so a shared or prefilled calculator link can be embedded as-is and opens with the same inputs.

Browse the embeddable calculator gallery