...

Free embeddable TDEE calculator for fitness bloggers, coaches and gyms. Every embed carries a "Powered by" backlink.

Try it live

This is exactly what your readers will see:

TDEE Calculator

Powered by TDEE Calculator

Get the code

Copy-paste this anywhere in your HTML (paste once per page). No signup, no API key, no dependencies — under 15 KB.

<div class="tdee-w">
<style>
.tdee-w{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;max-width:420px;border:1px solid #e5e7eb;border-radius:12px;padding:18px;background:#fff;color:#1a1a1a;box-sizing:border-box}
.tdee-w *{box-sizing:border-box}
.tdee-w h3{margin:0 0 12px;font-size:18px}
.tdee-w label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px}
.tdee-w input,.tdee-w select{width:100%;padding:9px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:15px}
.tdee-w .tdee-w-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tdee-w button{width:100%;margin-top:14px;padding:12px;background:#16a34a;color:#fff;border:0;border-radius:9px;font-size:16px;font-weight:700;cursor:pointer}
.tdee-w .tdee-w-res{display:none;margin-top:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;padding:12px;font-size:14px;line-height:1.7}
.tdee-w .tdee-w-res b{font-size:20px;color:#15803d}
.tdee-w .tdee-w-attr{margin-top:10px;font-size:12px;color:#6b7280;text-align:center}
.tdee-w .tdee-w-attr a{color:#2563eb;text-decoration:none}
</style>
<h3>TDEE Calculator</h3>
<div class="tdee-w-row">
<div><label>Age</label><input type="number" id="tdee-w-age" value="32" min="15" max="100"></div>
<div><label>Sex</label><select id="tdee-w-sex"><option value="m">Male</option><option value="f">Female</option></select></div>
</div>
<div class="tdee-w-row">
<div><label>Height (cm)</label><input type="number" id="tdee-w-h" value="178" min="120" max="230"></div>
<div><label>Weight (kg)</label><input type="number" id="tdee-w-w" value="75" min="30" max="300"></div>
</div>
<label>Activity level</label>
<select id="tdee-w-a">
<option value="1.2">Sedentary (little exercise)</option>
<option value="1.375">Lightly active (1-3 days/week)</option>
<option value="1.55" selected>Moderately active (3-5 days/week)</option>
<option value="1.725">Very active (6-7 days/week)</option>
<option value="1.9">Athlete / physical job</option>
</select>
<button type="button" onclick="tdeeWCalc()">Calculate my TDEE</button>
<div class="tdee-w-res" id="tdee-w-res"></div>
<div class="tdee-w-attr">Powered by <a href="https://tdeecalculatornet.net/" target="_blank" rel="noopener">TDEE Calculator</a></div>
</div>
<script>
function tdeeWCalc(){
var age=+document.getElementById('tdee-w-age').value,
s=document.getElementById('tdee-w-sex').value,
h=+document.getElementById('tdee-w-h').value,
w=+document.getElementById('tdee-w-w').value,
a=+document.getElementById('tdee-w-a').value;
if(!(age>0&&h>0&&w>0)){alert('Please fill in all fields.');return;}
var bmr=s==='m'?10*w+6.25*h-5*age+5:10*w+6.25*h-5*age-161;
var tdee=Math.round(bmr*a);
document.getElementById('tdee-w-res').style.display='block';
document.getElementById('tdee-w-res').innerHTML='Your TDEE: <b>'+tdee.toLocaleString()+' kcal/day</b><br>Lose weight: ~'+(tdee-500).toLocaleString()+' kcal/day<br>Maintain: ~'+tdee.toLocaleString()+' kcal/day<br>Gain muscle: ~'+(tdee+300).toLocaleString()+' kcal/day';
}
</script>

Why embed it?

FAQ

Can I remove the "Powered by" link? That link is what keeps the widget free. Please keep it.

Can I change the colors? Yes — the styles are plain CSS with tdee-w prefixed classes; override them in your own stylesheet.

Does it work on mobile? Yes, it's fully responsive down to small phones.

Related tools: TDEE Calculator · TDEE Formula Comparison · Adaptive TDEE Calculator · Embeddable TDEE Calculator · Macro Calculator · BMR Calculator