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>
<p style="max-width:640px;margin:8px auto 0;font:13px/1.4 system-ui,-apple-system,sans-serif;text-align:center;color:#6b7280;">
Free <a href="https://movingcalculator.io" target="_blank" rel="noopener">moving cost calculator</a> by MovingCalculator.io
</p>
<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>Keep the small attribution line under the calculator. It’s how the tool stays free, and it links back to us so we keep the lights on. Everything else, the size, the placement, the page, is yours.
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.