Skip to calculator

For your site

Embed the calculator.

One line of HTML puts a working slope calculator on your page. No script to install, no key to register, no tracking, and no attribution required.

Live Preview

This is the real embed, running here exactly as it would on your page.

The Code

<iframe
  src="https://onlineslopecalculator.com/embed/frame"
  title="Slope calculator"
  width="100%"
  height="560"
  loading="lazy"
  allow="fullscreen"
  style="border:1px solid #ebebeb;border-radius:12px"
></iframe>

Paste it wherever the calculator should appear. Adjust the height to suit your layout — 560 pixels suits most single-column pages.

Auto-Height Version

<iframe
  id="slope-calculator"
  src="https://onlineslopecalculator.com/embed/frame"
  title="Slope calculator"
  width="100%"
  height="560"
  loading="lazy"
  allow="fullscreen"
  style="border:1px solid #ebebeb;border-radius:12px"
></iframe>

<script>
  addEventListener('message', function (event) {
    if (event.origin !== 'https://onlineslopecalculator.com') return;
    if (event.data && event.data.type === 'slope-calculator:height') {
      document.getElementById('slope-calculator').height = event.data.height;
    }
  });
</script>

The frame reports its own height, so this version resizes itself instead of leaving a gap or a scrollbar. The origin check means it only ever listens to messages from this domain.

What Your Visitors Get

The embed is the two-point calculator: slope as an exact fraction, angle, percent grade, rise, run, distance, midpoint, the equation in slope-intercept form, and a live graph that redraws as they type. It follows their system light or dark preference on its own.

Terms, Such As They Are

  • Free for any site, including commercial ones.
  • No attribution required — though a link back is welcome.
  • No key, no registration, no rate limit.
  • Please do not rehost a copy. Pointing the frame at this domain means your visitors always get the current version, including any corrections.

Accessibility and Privacy

The frame carries a title attribute, which screen readers announce before entering it — keep it in place. Inside, every field is labelled, the graph describes itself, and everything is reachable by keyboard.

Nothing is collected. No cookies are set, no analytics run, and no request leaves this domain. The only thing the frame ever sends to your page is its pixel height. That means the embed adds no consent obligations of its own — see the privacy page for the full position.

Common Questions

Is the embeddable calculator free to use?

Yes, for any site including commercial ones. There is no licence to buy, no key to register and no attribution requirement, though a link back is always appreciated.

Does the embed track my visitors?

No. It sets no cookies, loads no analytics or advertising, and makes no request to any third party. The only message it sends to your page is its own pixel height, so the frame can resize itself.

Will it slow my page down?

Very little. The frame is a static page of a few kilobytes with no framework, and the snippet uses loading="lazy" so nothing is fetched until the calculator scrolls into view.

Can I change the colours or the size?

The frame follows the visitor’s light or dark system preference automatically, and you can style the iframe element itself — width, height, border and corner radius — from your own CSS. The interior styling is fixed so that updates do not break your page.