Embed the calculator on your site.
One iframe + a tiny resize listener. Works on any site that lets you paste raw HTML, which is most of them. Replace your-slug with your account’s slug from the dashboard.
<iframe
src="https://movingcalculator.io/embed/your-slug"
width="100%"
height="900"
frameborder="0"
style="border:0;width:100%;max-width:640px;"
loading="lazy"
title="Moving Calculator"
></iframe>
<script>
window.addEventListener('message', function (e) {
if (e.origin !== 'https://movingcalculator.io') return;
if (e.data && e.data.type === 'movingcalc-resize') {
var f = document.querySelector('iframe[src*="movingcalculator.io/embed"]');
if (f) f.style.height = e.data.height + 'px';
}
});
</script>WordPress (Block editor)
- 01Edit the page where you want the calculator.
- 02Add a 'Custom HTML' block (the / menu → Custom HTML).
- 03Paste the snippet above into the block.
- 04Save and view the page. The iframe appears with the calculator inside.
Heads up: Some security plugins strip <script> tags from posts. If the resize listener gets stripped, the iframe still works, it just stays at 900px tall instead of auto-resizing.
Wix
- 01From the editor: Add (+) → Embed Code → 'Embed HTML'.
- 02Click 'Enter Code' and paste the snippet.
- 03Click Update. Stretch the embed element to the width you want; the iframe inherits.
Heads up: Wix free tier hides custom HTML on mobile preview unless you flip a setting in the embed element panel.
Webflow
- 01From the Designer: Add an 'Embed' element where the calculator should live.
- 02Open the embed editor and paste the snippet.
- 03Save & close. Publish to staging or production.
Heads up: Webflow's embed element is HTML-only, no script execution in the editor preview. Works on the live site.
Squarespace
- 01Edit the page. Add a 'Code' block where you want the calculator.
- 02Set the language to HTML and paste the snippet.
- 03Save. The block renders the iframe.
Heads up: On the Personal plan, Code blocks are disabled. Upgrade or use a 'Markdown' block as a fallback.
Custom HTML / any other site
- 01Paste the snippet into any HTML file or template that renders <iframe> tags.
- 02If your CMS strips the <script> tag, drop it into your global footer/template instead.
- 03Adjust the iframe's max-width / height attributes to match your design.
Heads up: Make sure your site doesn't set a Content-Security-Policy that blocks frames. Our endpoint sets frame-ancestors: * so we accept being framed from any origin.