Give Your Audience
Free Heart Rate Zones
Embed a personalized Karvonen calculator on your fitness blog, gym site, or trainer page. Your readers get a genuinely useful tool — no coding, no accounts, no cost.
What Your Visitors Will See
This is the actual widget, running live. Try it — enter an age and hit Calculate.
The iframe expands to ~680px tall once a visitor calculates their zones.
Add It to Your Site in 3 Steps
HTML block. Squarespace: use a Code block. Webflow: use an Embed element. Wix: use the HTML iFrame app. For hand-coded sites, paste anywhere inside <body>.<!-- Heart Rate Zone Calculator by CalculateMyHeartRate.com --> <iframe src="https://www.calculatemyheartrate.com/embed.html" width="420" height="680" style="border:none; border-radius:16px; display:block; max-width:100%;" title="Heart Rate Zone Calculator" loading="lazy" ></iframe>
div with width: 100%; max-width: 480px; and set the iframe's width="100%". The height stays fixed — 680px comfortably shows all five zones after calculation.Works on Every Major Platform
If your platform allows HTML, the widget works — no plugins, no API keys.
A Tool Your Audience Will Actually Use
The best content on a fitness site is content that does something. A working calculator turns a page visit into a moment of value — and keeps people around longer.
Credit your source
Every embed includes a "Full calculator" link back to CalculateMyHeartRate.com — giving your audience a path to the full experience if they want more.
Increase time on page
Interactive tools hold attention far longer than static text. Visitors who calculate their zones stay engaged — and are far more likely to read the rest of your content.
Free value for your audience
The Karvonen method is what coaches actually use. You're giving your readers a tool that's more accurate than anything they'd find in a generic fitness app.
No ads. No tracking.
The widget is completely clean — no ads are shown inside it, and no visitor data is collected or sent anywhere. What happens in the iframe stays in the iframe.
Mobile-friendly & dark mode
The widget adapts to any screen width and automatically switches to dark mode when the visitor's OS prefers it — no configuration required.
Lightweight & fast
Under 8KB of HTML. Lazy-loaded by default, so it doesn't affect your page's initial load time or Core Web Vitals scores.
Perfect for
Everything Visitors Need, Nothing They Don't
The widget is a clean, focused version of the full calculator — built for embedding, not for pages trying to do everything.
Sizing & Display Options
The widget works best between 360px and 520px wide. Below are the recommended configurations for common use cases.
| Use case | Width | Height | Notes |
|---|---|---|---|
| Sidebar widget | 300px |
680px |
Compact but fully functional at 300px; zone labels abbreviate on narrow widths |
| Content column | 420px |
680px |
Recommended default — optimal readability at this width |
| Full-width section | 100% |
680px |
Set max-width:520px on the iframe or a wrapper div to prevent over-stretching |
| Before results only | 420px |
320px |
Use if you want a compact form that expands; note the iframe won't auto-resize — visitors will scroll inside it after calculating |
FAQ
loading="lazy" attribute means the iframe won't even begin loading until a visitor scrolls near it. The entire widget is under 8KB — smaller than a typical thumbnail image. It won't affect your Lighthouse score or Core Web Vitals.
width and height attributes on the <iframe> tag. The widget is responsive within the iframe — it'll reflow cleanly down to about 300px wide. For height, 680px gives comfortable room for all five zones after calculation. If you want a tighter fit before the user calculates, 320px works for the form-only state.
Ready to Add It?
Scroll up for the embed code, or visit the full calculator to see everything the Karvonen method can do for your readers.