How to Embed a Free TDEE Calculator on Your Website

You want readers to calculate calories without leaving your article — and you do not want to rebuild a TDEE calculator from scratch. The cleanest option is a cross-origin iframe: the widget lives on TDEEHQ, your page only hosts a box. Your theme cannot break the calculator, and our deploys cannot reshuffle your layout outside that box.

This guide is the public how-to. Tune width and default units on the embed customize page, copy the snippet, then follow the platform section that matches your site.

What you get

• Free Mifflin-St Jeor / Katch-McArdle TDEE calculator (same core as our homepage)
• Mobile-friendly compact layout sized for ~360–560px columns
• Auto-height via embed.js so the frame does not clip results
• Required Powered by TDEEHQ backlink with UTM tracking
• Optional ?units=metric or imperial default

Live preview

This is the same widget partners embed:

The canonical snippet

Prefer generating this from tdeehq.com/embed so your max-width, start height, corners, and units match the preview. The default looks like this:

WordPress

1. 1Edit the post or page in the block editor (Gutenberg).
2. 2Add a Custom HTML block (not Paragraph, not Code).
3. 3Paste the snippet from /embed.
4. 4Update / publish and preview on mobile.
5. 5Elementor: use an HTML widget the same way. Classic editor: Text tab (HTML), not Visual.

Ghost

1. 1In the editor, type /html or insert an HTML card.
2. 2Paste the full iframe + script snippet.
3. 3Preview — you should see the calculator, not the markup.

Webflow and Framer

1. 1Add an Embed (Webflow) or Code / Embed (Framer) element.
2. 2Paste the snippet.
3. 3Set the parent div to the max-width you chose on /embed (for example 480px).
4. 4Publish and test.

Squarespace

1. 1Add a Code block.
2. 2Paste the snippet (display source as HTML, not escaped).
3. 3Save and check mobile preview.

Shopify

1. 1Theme editor → the section/page that should show the calculator.
2. 2Add a Custom Liquid or HTML section that allows iframes.
3. 3Paste the snippet.
4. 4If the theme strips iframes, ask your developer to allow frame-src for https://tdeehq.com in the storefront CSP.

Plain HTML / static sites

1. 1Paste the snippet wherever you want the calculator in the page body.
2. 2Keep both the iframe and the embed.js script tag.
3. 3Serve the page over HTTPS.

If your editor only shows plain HTML

Many WYSIWYG toolbars have a </> icon that inserts a code sample (grey box of text). That is for showing code to readers — it will not run an iframe. You need a true HTML / Embed field. If your CMS has no such field, link readers to the free TDEE calculator instead, or ask your developer to allow an HTML embed.

CSP and security notes

• If you use Content-Security-Policy, allow https://tdeehq.com in frame-src (and script-src for embed.js if you host the script tag).
• Do not hotlink our CSS or JS beyond embed.js — the iframe is self-contained.
• Do not strip the embed page chrome; Powered by TDEEHQ is required for the free widget.

Stable URL promise

The widget path https://tdeehq.com/embed/tdee is reserved for this product. We will not repurpose it, so partner embeds keep working across deploys.

Questions about a branded or white-label build? Contact us. For how we estimate TDEE itself, see About TDEEHQ.