Skip to content
truedistance.org

Embed the true-scale solar system calculator

Put the interactive scale calculator directly onto your school page, astronomy blog, museum site or learning platform. It runs without advertising, without cookies and without analytics inside the frame.

Configurator & HTML code

HTML snippet to copy
<iframe src="https://www.truedistance.org/embed/" title="True-scale solar system calculator — truedistance.org" width="100%" height="780" style="border:0;max-width:100%;width:100%" loading="lazy"></iframe>
<p><a href="https://www.truedistance.org/">True-scale solar system calculator on truedistance.org</a></p>
<script>window.addEventListener("message",function(e){if(!e.data||e.data.type!=="td-resize"||typeof e.data.height!=="number")return;var f=document.querySelectorAll("iframe");for(var i=0;i<f.length;i++){if(f[i].contentWindow===e.source)f[i].style.height=Math.ceil(e.data.height)+"px";}});</script>

Copy the whole block: the <iframe> embeds the calculator, and the <p><a href="…">…</a></p> line directly below it names the source outside the frame.

Live preview of the embedded widget

How to embed in three steps

  1. 1. Choose the starting values. Pick the language, starting distance and outermost body above. Visitors on your page can still change every value interactively.
  2. 2. Copy the HTML snippet. The snippet consists of the <iframe> and a regular source link <p><a href="…">…</a></p> right underneath it.
  3. 3. Paste it into your page. In WordPress use a “Custom HTML” block, in Moodle or IServ switch the editor to HTML source view, and in Contao or Typo3 use an HTML content element.

Automatic height adjustment

Depending on whether the model ends at Earth (four rows) or Neptune (nine rows), the table grows or shrinks. The embedded calculator observes its own height with a ResizeObserver and sends window.parent.postMessage({ type: 'td-resize', height }, '*') to the parent page. With the small script included above, the frame adjusts seamlessly without a second scrollbar.

Privacy & license

The embed view (/embed/) loads no analytics, sets no cookies and makes no requests to external servers; fonts and planetary data come directly from this domain (see privacy policy). You therefore do not need a cookie banner for the calculator. The calculator and its figures are licensed under CC BY 4.0 — keeping the source link below the frame fulfills the attribution requirement.

To the calculator