How to Embed a Free Calculator on Your Website

Adding a working calculator to your website used to mean writing JavaScript, wiring up a form, and maintaining the math forever. It doesn't anymore. If a tool already exists as an embeddable widget, you can drop it into any page with a single line of HTML — an <iframe> — and it keeps working without you touching it again. This guide walks through exactly how, using the free tools in our embed showcase.

What "embedding" actually means

An embed is a small window into another page. The <iframe> element loads a self-contained version of the tool from our server and displays it inside your layout, as if it were part of your page. Your visitors interact with it directly; nothing they type is sent to you, and you don't host or update any code. Because the tool runs from our domain, every fix and improvement we ship appears in your embed automatically.

Step 1: Copy the embed code

Open the embed showcase and find the tool you want — a paint calculator, a compound-interest calculator, a 3D packing visualizer, and more. Each card has a Copy embed code button. Click it and the full snippet is on your clipboard. It looks like this:

<iframe src="https://3d.quietools.com/embed/room-paint-flooring-calculator"
  width="100%" height="600" style="border:0" loading="lazy"
  title="Room Paint & Flooring Calculator — 3d.quietools.com"></iframe>

If you'd like to see the tool before committing, click Preview widget on the same card to open the standalone version we serve inside the frame.

Step 2: Paste it into your page

Put the snippet into your page's HTML wherever you want the tool to appear. How you do that depends on your platform:

WordPress: add a Custom HTML block and paste the snippet in. (In the older classic editor, switch from Visual to Text mode first.)
Static site or hand-coded HTML: paste the snippet straight into your markup between the elements where it belongs.
Ghost, Notion-to-web, or most CMSs: use an HTML or Embed block and paste the code.
Squarespace, Wix, and similar builders: drag in an Embed or Custom Code element and paste the snippet.

Save or publish the page, then load it in a browser. The calculator should appear and work immediately.

Step 3: Adjust the size (optional)

Two attributes control the frame. width="100%" makes the tool fill the column it sits in, which keeps it responsive on phones — leave that as is in most cases. height="600" sets the pixel height; if a tool feels cramped or leaves a gap, raise or lower that number until it fits. Everything else in the snippet — loading="lazy" for performance and the title for accessibility — is already set sensibly, so you can leave it alone.

Will it slow my page down?

Minimally. The snippet includes loading="lazy", so the browser only fetches the tool when it scrolls near the viewport. The widget pages are lightweight and ad-free, and because they load in a separate frame they can't interfere with your own styles or scripts.

Is it really free? What's the catch?

It's free for personal and commercial sites, and there's no account or API key. The only condition is attribution: each widget shows a small "Powered by 3d.quietools.com" link, and we ask that you keep it intact rather than editing the iframe to strip it out. That link is how the tools stay free — please don't remove it or re-host the tool yourself. Full details are on the embed showcase page.

Ready to add one?

Browse the full set of embeddable calculators and 3D widgets in the embed showcase, copy the snippet for the one you want, and paste it into your page. If you build something interesting with it, tell us — we love to see where the tools end up.