Free Widget SDKEmbed Free Health Calculators
Embed Free Health Calculators
on Any Website
Add any of our 62+ calculators to your site with two lines of code. Free forever. No API key. No sign-up. Works on WordPress, Webflow, Wix, React, Vue — anything.
Quick Start — 2 lines of code
<!-- Step 1: Add script once, anywhere on your page -->
<script src="https://fitfueltools.com/widget.js" async></script>
<!-- Step 2: Place this div wherever you want the calculator -->
<div data-fitfuel="bmi-calculator"></div>Customisation Options
| Attribute | Default | Description |
|---|---|---|
| data-fitfuel | — | Required. Calculator slug (e.g. "tdee-calculator") |
| data-fitfuel-height | "600" | iframe height in pixels |
| data-fitfuel-theme | "light" | "light" or "dark" |
| data-fitfuel-on-result | none | Name of a global JS function to call with the result |
Code Examples
Custom height + dark theme
<div
data-fitfuel="tdee-calculator"
data-fitfuel-height="700"
data-fitfuel-theme="dark"
></div>Receive result data in your JavaScript
<div
data-fitfuel="macro-calculator"
data-fitfuel-on-result="handleMacroResult"
></div>
<script>
function handleMacroResult(result, slug) {
console.log('Calculator:', slug);
console.log('Result:', result);
// Use result data in your own app
}
</script>Listen via CustomEvent (no global function needed)
<div id="my-calc" data-fitfuel="calorie-deficit-calculator"></div>
<script>
document.getElementById('my-calc')
.addEventListener('fitfuel:result', function(e) {
console.log(e.detail); // { fitfuel: true, slug, result }
});
</script>Multiple calculators on one page
<!-- Load script once -->
<script src="https://fitfueltools.com/widget.js" async></script>
<!-- Place as many as you like -->
<h2>Check Your BMI</h2>
<div data-fitfuel="bmi-calculator"></div>
<h2>Calculate Your Calories</h2>
<div data-fitfuel="calorie-calculator" data-fitfuel-height="650"></div>
<h2>Set Your Macros</h2>
<div data-fitfuel="macro-calculator"></div>WordPress (paste in HTML block)
<!-- Add to Appearance → Theme Editor → header.php (before </head>)
OR use a plugin like "Header and Footer Scripts" -->
<script src="https://fitfueltools.com/widget.js" async></script>
<!-- Then in any post/page, add an HTML block with: -->
<div data-fitfuel="bmi-calculator"></div>Available Calculators
Use the slug shown below as the data-fitfuel value.
+ 50 more calculators available. Browse all →
Programmatic API
After the script loads, window.FitFuelWidget is available globally.
// Re-scan page for new data-fitfuel elements (useful in SPAs)
FitFuelWidget.init();
// Embed into a specific element manually
const el = document.getElementById('my-container');
el.setAttribute('data-fitfuel', 'bmi-calculator');
FitFuelWidget.embed(el);
// Check SDK version
console.log(FitFuelWidget.version); // "1.0.0"Frequently Asked Questions
Is the widget really free?
Yes, completely free. Each embedded calculator shows a small 'Powered by FitFuel Tools' link in the footer — that is all we ask in return.
Will it slow down my website?
No. The widget script is under 3KB and loads asynchronously (async attribute). It won't block your page rendering. The calculator iframe loads lazily — only when it's visible.
Does it work on WordPress / Shopify / Wix?
Yes. It's plain JavaScript and HTML — it works anywhere you can add a <script> tag and an HTML div. No plugins required.
Can I use it in a React / Next.js app?
Yes. Add the script tag in your _document.tsx or layout.tsx, then render the div in any component. Or use the iframe URL directly in a React <iframe> element: src='https://fitfueltools.com/embed/bmi-calculator'.
Can I receive the user's calculated result in my app?
Yes — use data-fitfuel-on-result='yourFunctionName' and the widget will call your function with the result object after the user calculates. You can also listen for the fitfuel:result CustomEvent on the container element.
What data is shared?
Nothing is shared with your server. All calculations happen in the browser. We only see standard analytics (page views) on the embed URL.
Ready to embed?
Copy the snippet below and paste it anywhere on your site.
<script src="https://fitfueltools.com/widget.js" async></script>
<div data-fitfuel="bmi-calculator"></div>