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 Use
A fitness page with a working calculator gives people a reason to stay. They calculate their zones, read what they mean, then scroll back to your content. Static articles don't do that.
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
Visitors who calculate their zones tend to stick around. They look at their results, read the zone descriptions, then scroll back up to 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
What Visitors Get
The widget strips the full calculator to its core: enter age, get zones. No RHR tracker, no zone education tabs — just the Karvonen calculation, done cleanly.
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 try the full calculator to see what your readers will experience.