Calculators Installation Instructions

Method 1 — Simplest

🌐

Upload Directly to Any Web Host Easiest

1

Log in to your web hosting control panel (cPanel, Hostinger, SiteGround, etc.).

2

Open File Manager and navigate to your public_html folder (or a subfolder like public_html/tools/).

3

Click Upload and select the .html file(s) you want to install.

4

Once uploaded, visit yoursite.com/calculator-name.html in a browser to confirm it works.

5

Link to it from any page, menu, or button on your site — done!

💡 Tip: Rename the file to something clean before uploading — e.g. bmi.html or mortgage.html — so the URL looks tidy.

Method 2 — WordPress

📝

Embed in a WordPress Page Easy

1

Upload the .html file to your server via File Manager (see Method 1 above) so it has its own URL.

2

Option A — Link: In any WordPress page or post, add a button or hyperlink pointing to the calculator's URL. Clean and simple.

3

Option B — Embed: In the WordPress block editor, add a Custom HTML block and paste this code, replacing the URL:

<iframe src="https://yoursite.com/bmi.html" width="100%" height="700" frameborder="0" style="border-radius:12px;"></iframe>

4

Publish the page. The calculator will appear inline, fully functional, right inside your WordPress site.

💡 Tip: Adjust height="700" up or down depending on how tall the calculator is. Preview on mobile too — add scrolling="auto" if needed.

Method 3 — Standalone Page Builders

🔧

Kajabi, Kartra, ClickFunnels, Systeme.io, etc. Medium

1

Best approach: Host the file on a web server or free host (see Method 1), then embed it using an iframe in your page builder's HTML/code block.

2

In your page builder, look for a block called Custom Code, HTML Element, or Embed. Every major builder has one.

3

Paste the iframe code from Method 2 Step 3, using your hosted file's URL.

4

Alternative (Kajabi/Systeme): Some platforms let you upload raw HTML as a page. Check your platform's "Custom Page" or "Code Page" option — you may be able to paste the entire file contents directly.

💡 Free hosting option: Upload the file to Netlify Drop (drag-and-drop at netlify.com/drop) for a free URL in under 60 seconds — no account needed for a quick test.

How To Rebrand (White Label)

CHANGE THE TITLE

Open the file in any text editor (Notepad, TextEdit, VS Code). Find the <title> tag near the top and update it to your brand name.

CHANGE THE COLORS

Search for the main color hex (e.g. #2d3af0) and replace all instances with your brand color. Most tools use 1–2 colors throughout.

ADD YOUR LOGO / NAME

Find the <header> section and edit the <h1> text. You can also add an <img> tag with your logo URL.

UPDATE THE FOOTER

Each file has a <footer> tag at the bottom. Replace the existing text with your website name and URL.

💡 Quick edit tip: Use Find & Replace All (Ctrl+H / Cmd+H) in any text editor to swap colors, names, or URLs across the whole file in one step.

Your 16 Calculator Files

percentage-calculator.html

age-calculator.html

days-between-dates-calculator.html

bmi-calculator.html

mortgage-calculator.html

time-zone-converter.html

word-counter.html

pregnancy-due-date-calculator.html

unit-converter.html

days-until-calculator.html

fraction-calculator.html

retirement-savings-calculator.html

budget-calculator.html

body-fat-calculator.html

water-intake-calculator.html

ideal-weight-calculator.html

How To Install Your Calculators