How to Embed Strtly Calculators on Your Website

#

Embedding Strtly calculators is quick and flexible. You can embed an entire category page or jump straight to a specific calculator using a hash anchor. An optional auto‑resize script ensures the iframe always fits its content.

1) Basic Embed (Full Page)

#

Paste this HTML where you want the calculators to appear:

<iframe src="https://strtly.com/calculators/personal-finance/?embed=1" width="100%" height="900" style="border:0;max-width:100%" loading="lazy"></iframe>

Replace personal-finance with any category:

• Construction & Trade: https://strtly.com/calculators/construction-trade/?embed=1
• Real Estate Investment: https://strtly.com/calculators/real-estate-investment/?embed=1
• Health & Fitness: https://strtly.com/calculators/health-fitness/?embed=1
• Small Business: https://strtly.com/calculators/small-business/?embed=1
• Car & Vehicle: https://strtly.com/calculators/car-vehicle/?embed=1
• Personal Finance: https://strtly.com/calculators/personal-finance/?embed=1
• Gaming & Entertainment: https://strtly.com/calculators/gaming-entertainment/?embed=1
• Educational & Academic: https://strtly.com/calculators/educational-academic/?embed=1
• Hobby & Craft: https://strtly.com/calculators/hobby-craft/?embed=1
• Trade & Professional: https://strtly.com/calculators/trade-professional/?embed=1

Tip: Keep width="100%" for responsive layouts. Adjust height as needed (or see auto‑resize below).

Recommended: Include a Backlink (SEO)

#

To credit the tool and help others find Strtly, add a small attribution link under the iframe. This is a normal follow link on your page, which helps SEO.

<iframe src="https://strtly.com/calculators/personal-finance/?embed=1" width="100%" height="900" style="border:0;max-width:100%" loading="lazy"></iframe>
<div style="text-align:right;font:400 12px/1.4 system-ui;margin-top:4px">
  Calculator by <a href="https://strtly.com/calculators/personal-finance/" target="_blank" rel="noopener">Strtly</a>
  <!-- rel is intentionally NOT set to nofollow -->
</div>

2) Link to a Specific Calculator

#

Use the section’s hash anchor to jump directly to a tool. Example for the TDEE calculator:

<iframe src="https://strtly.com/calculators/health-fitness/?embed=1#tdee-calculator" width="100%" height="760" style="border:0;max-width:100%" loading="lazy"></iframe>

Anchors are based on the calculator headings. Some examples:

• Emergency Fund: #emergency-fund-calculator
• Debt Avalanche vs Snowball: #debt-avalanche-vs-snowball-calculator
• One-Rep Max: #one-rep-max-calculator
• Body Fat (US Navy): #body-fat-percentage-calculator-us-navy-method
• GPA (with Credit Hours): #gpa-calculator-with-credit-hours
• HVAC Load (Simple): #hvac-load-calculator-simple-estimate

You can find the exact anchor by right‑clicking the heading in the category page and copying its link, or by checking the examples on each calculators page.

3) Auto‑Resize the Iframe Height (Recommended)

#

Strtly calculators can auto‑report their height when embedded. Add this script on your page (once, anywhere after your iframes):

<script>
  window.addEventListener('message', function (event) {
    if (!event || !event.data || event.data.type !== 'strtly-embed-size') return;
    var frames = document.querySelectorAll('iframe[src^="https://strtly.com/"]');
    for (var i = 0; i < frames.length; i++) {
      if (frames[i].contentWindow === event.source) {
        frames[i].style.height = Math.max(600, parseInt(event.data.height, 10) || 0) + 'px';
      }
    }
  });
</script>

What it does:

• Listens for height messages from Strtly iframes.
• Matches the sending iframe by contentWindow and sets an appropriate height.
• Applies a minimum height (600px) for better UX.

Under the hood, Strtly pages with ?embed=1 automatically send size updates on load, on resize, and whenever content changes.

4) Styling & Performance Tips

#

• Keep width:100% and remove borders for a seamless look.
• Use loading="lazy" to defer off‑screen iframes.
• If your page has narrow columns, consider setting a fixed max-width on a wrapper and keep the iframe at 100% inside it.
• If you embed multiple calculators on the same page, the single listener above works for all of them.

5) Troubleshooting

#

• Seeing scrollbars? Increase the iframe height or ensure the auto‑resize script runs on your page.
• Anchor didn’t scroll? Check the heading anchor spelling or test the URL directly in a new tab to confirm it lands at the right section.
• Content looks tight at the top? The embed mode hides the Strtly header/footer; ensure no parent CSS is forcing extra margins.

Need help with a specific CMS (WordPress, Webflow, Wix, Notion, etc.)? Contact us and we’ll add tailored instructions.