All Calculators Quick Start
📚 Documentation

Add a Calculator to Any Website

Every AbdulDev calculator is a single, self-contained HTML file — no frameworks, no dependencies. This guide shows you how to embed one on a custom-coded site or any CMS in just a few minutes.

1 Overview

You received a collection of 600 ready-to-use calculators across 6 categories (Business, Construction, Electrical, Financial, Health, Math). Each one lives in its own .html file inside the matching category folder.

Because every calculator ships as a complete, standalone web page, there is nothing to install — you simply place the file (or its code) where you want it to appear. The same calculator works identically on a hand-coded HTML site and on every major CMS.

🌐 WordPress 🔧 Elementor 🎨 Wix ⬜ Squarespace 🛒 Shopify 🌊 Webflow 🏗 Joomla / Drupal 📄 Others

2 How the widgets work

Understanding three small things makes everything below obvious:

  • Self-contained. All CSS and JavaScript are written inline in each file. There are no external libraries, fonts, or build steps to load.
  • Scoped & conflict-free. Every calculator uses a unique CSS prefix (e.g. .roic, .bmr) and wraps its JavaScript in a private function. That means you can place several different calculators on the same page and they will never clash with each other or with your theme.
  • Responsive by default. Each widget fluidly fills the width of its container and reflows for phones, tablets and desktops.
✓ Good to know: Because the styles are scoped, your website's own fonts and colors won't break the calculator, and the calculator won't restyle your site.

3 Quick start (60 seconds)

  1. Pick a calculator. Open the calculator index, choose a tool, and note its file — for example Business Calculators/roi-calculator.html.
  2. Upload the file to your website (via your host's file manager, FTP, or your CMS media/files area).
  3. Embed it on any page with a one-line iframe, or paste its code inline. Both methods are explained below.
  4. Publish. That's it — the calculator is live and fully interactive.
Not sure which method? If you just want it working fast and safe, use Method A (iframe). If you want the calculator to blend seamlessly into the page with no scrollbars, use Method B (inline code).

4 Two ways to embed

There are exactly two approaches. Here is how they compare:

 Method A — iframeMethod B — inline code
Setup effortEasiest (1 line)Easy (paste code)
Style isolationTotal — sandboxedScoped (very safe)
Auto-heightNeeds a height valueAutomatic
Best forQuick, safe embedsSeamless, native feel

5 Method A — embed with an iframe

Upload the calculator's .html file to your site, then drop an iframe wherever you want it to appear. Point src at the uploaded file's URL:

<iframe
  src="/calculators/business-calculators/roi-calculator.html"
  title="ROI Calculator"
  loading="lazy"
  style="width:100%; max-width:1100px; height:1100px; border:0; display:block; margin:0 auto;">
</iframe>

Adjust the height value to suit the calculator (taller tools need more). The width is already responsive at 100%.

Optional: make the iframe auto-fit its height

If the calculator file is hosted on the same domain as your page, this snippet resizes the iframe to its content automatically — no guessing the height and no inner scrollbar:

<iframe
  id="adCalc"
  src="/calculators/business-calculators/roi-calculator.html"
  title="ROI Calculator"
  style="width:100%; border:0; display:block;"
  onload="this.style.height=this.contentWindow.document.body.scrollHeight+20+'px';">
</iframe>
⚠ Note: Auto-height only works when the iframe and the page share the same origin (same domain). For cross-domain embeds, set a fixed height as in the first example.

6 Method B — paste the code inline

This drops the calculator straight into your page so it flows like native content (auto height, no scrollbars). Open the calculator's .html file in a text editor and copy three parts into your page's HTML:

  1. Everything inside <style>...</style> (the appearance).
  2. The widget markup — the single <div class="prefix" id="prefixRoot">...</div> block (the calculator itself).
  3. Everything inside <script>...</script> (the logic).

You can skip the outer <!DOCTYPE>, <html>, <head> and <body> wrappers — your page already has those. The result looks like this:

<!-- 1) Paste the styles -->
<style>
  /* ...the .prefix { ... } CSS from the file... */
</style>

<!-- 2) Paste the calculator markup -->
<div class="roic" id="roicRoot">
  <!-- ...the widget's HTML... -->
</div>

<!-- 3) Paste the script -->
<script>
  /* ...the (function(){ ... })(); logic from the file... */
</script>
✓ Multiple calculators on one page? No problem. Each uses a unique prefix, so just paste each one's three parts. They won't interfere with one another.

7 Custom-coded / static website

For a hand-built HTML site (or static-site generators like Hugo, Jekyll, Eleventy, Astro):

  • Whole page: just upload the calculator's .html file and link to it — it already works as a standalone page.
  • Inside an existing page: use either Method A (iframe) or Method B (inline). Inline gives the most seamless result.

A minimal page that hosts one calculator via iframe:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mortgage Calculator</title>
</head>
<body>
  <h1>Free Mortgage Calculator</h1>
  <iframe src="calculators/financial-calculators/biweekly-mortgage-calculator.html"
          style="width:100%;height:1200px;border:0;" title="Mortgage Calculator"></iframe>
</body>
</html>

8 WordPress (Block Editor)

  1. Upload the calculator file: Media → Add New won't accept .html, so use Plugins like "Filester / WP File Manager", or upload via your host's File Manager / FTP into a folder such as /wp-content/uploads/calculators/.
  2. Edit the page or post where you want the calculator.
  3. Click + to add a block and choose the "Custom HTML" block.
  4. Paste an iframe snippet (pointing at your uploaded file) or the full inline code.
  5. Click Update / Publish. Preview the page to confirm.
Prefer a plugin-free inline embed? The Custom HTML block accepts the full inline code (styles + markup + script) directly — no file upload needed.

9 WordPress + Elementor

  1. Edit your page with Elementor.
  2. From the widget panel, search for the "HTML" widget and drag it onto the canvas.
  3. Paste the calculator's inline code (or an iframe) into the HTML Code box.
  4. Click Update. The calculator appears live inside your section.
✓ Tip: These widgets already use the brand teal palette. If your Elementor theme forces global heading colors, the calculators set their own colors explicitly, so the title and numbers stay correct.

10 Wix

  1. In the Wix Editor, click Add (+) → Embed Code → Embed HTML (the "HTML iframe / Custom Embed" element).
  2. Click Enter Code and choose "Code".
  3. Paste the calculator's inline code, or an iframe pointing at the file (upload it first under Site Files if needed).
  4. Drag the element's handles to size it, then Publish.
⚠ Wix tip: Wix wraps custom embeds in their own iframe, so give the element enough height. If the calculator is cut off, increase the element's height in the editor.

11 Squarespace

  1. Edit the page and add a section, then click an insertion point and choose the "Code" block.
  2. Set the block's mode to HTML (turn off the "Display Source" toggle).
  3. Paste the inline code or an iframe embed.
  4. Click Apply, then Save.
Note: Code blocks are available on Squarespace Business and Commerce plans. For file hosting, upload the .html via a Link/File field or an external host and reference its URL in the iframe.

12 Shopify

  1. On a page: Go to Online Store → Pages, edit a page, click the <> (Show HTML) icon in the rich-text toolbar, and paste an iframe or the inline code.
  2. In a theme section: In Online Store → Themes → Edit code, add a Custom Liquid section/block (or a custom snippet) and paste the calculator code there.
  3. Upload the .html file under Settings → Files if you want to use an iframe src, then copy the file's URL.
  4. Save and preview the storefront.
✓ Theme-safe: The widgets are scoped, so they won't inherit your theme's form or button styles.

13 Webflow

  1. Drag an "Embed" element (Add panel → Components → Embed) onto your page.
  2. Paste the calculator's inline code or an iframe into the code editor.
  3. Click Save & Close, then Publish.
Note: The free embed element allows up to ~10,000 characters. If a calculator's inline code is larger than that, use the iframe method (host the .html in Webflow Assets or externally) instead.

14 Joomla & Drupal

Joomla

  1. Create or edit an Article (or a "Custom HTML" module).
  2. In the editor, switch to Code / Toggle Editor view (disable the WYSIWYG so it won't strip the script).
  3. Paste an iframe or the inline code and save.

Drupal

  1. Add or edit a Block / Basic page.
  2. Set the Text format to "Full HTML" (so scripts aren't filtered out).
  3. Use the Source <> view and paste the embed code, then save.
⚠ Heads up: Some editors strip <script> tags for security. If the calculator looks styled but does nothing, switch the text format to one that allows scripts (Full HTML) or use the iframe method.

15 Google Sites & other platforms

  • Google Sites: Insert → Embed → Embed code, then paste an iframe (host the file on Google Drive/another host) or the inline code.
  • Notion, Ghost, HubSpot, Weebly, GoDaddy, Duda: all provide an "Embed", "Custom HTML", or "Code" block — use the same iframe or inline snippet.
  • General rule: if a platform has any way to insert raw HTML, these calculators will work there.

16 Responsive sizing & height

  • Width is always fluid — the widget fills its container up to a comfortable max width and centers itself.
  • Inline embeds (Method B) size their height automatically; nothing to configure.
  • iframe embeds (Method A) need a height. Either set a generous fixed height, or use the auto-height snippet for same-origin files.
  • To constrain how wide a calculator gets on large screens, wrap it (or the iframe) and set max-width:
<div style="max-width:760px; margin:0 auto;">
  <!-- iframe or inline calculator here -->
</div>

17 Customize colors & branding

Each calculator defines its palette once, as CSS variables at the top of its style block. Change a few values to match your brand — every button, accent and highlight updates automatically.

/* Find this near the top of the calculator's <style> */
.roic{
  --ac:#1abfb4;     /* primary accent  */
  --ac2:#0d9e94;    /* accent gradient */
  --hero:#0c2d2c;   /* dark header bg  */
  --bg:#f2f9f8;     /* page background */
  /* ...change these to your brand colors... */
}
✓ Tip: Only edit the variable values (the hex colors). Leave the variable names as-is so the rest of the styles keep working.

18 Troubleshooting & FAQ

The calculator shows but the buttons do nothing

Your editor likely stripped the <script>. Use a true "Custom HTML / Code / Embed" block (not the visual editor), set the text format to one that allows scripts (e.g. Drupal "Full HTML"), or switch to the iframe method.

It looks unstyled or plain

The <style> block didn't come along. With Method B, make sure you pasted all three parts (styles + markup + script). With an iframe, confirm the src URL points to the real file.

The iframe is cut off / has a scrollbar

Increase the iframe's height, or use the auto-height snippet (same-origin only). Inline embeds avoid this entirely.

Can I put several calculators on one page?

Yes. Each one is scoped and isolated, so any number of them coexist without conflicts.

Do I need an internet connection or any account?

No. The files are fully self-contained — no external services, CDNs, or API keys. They even work offline.

Will they slow down my site?

No. Each calculator is a small, dependency-free file. Add loading="lazy" to iframes so they load only when scrolled into view.

Ready to add one?

Browse the full library and pick your first calculator.

📂 Open the calculator index