Paste one line. The calculator is live.

Three steps, no code to write.

The embed code is a single line. It loads the calculator exactly where you paste it.

1. 1Copy

   Copy the code

   In your calculator, open the Finalize step and click “Copy Code.” It looks like this:

   Code to paste · 1 lineCopy Code

   <script src="https://www.spacefit.co/embed.js?id=YOUR_ID"></script>

   Send to my web developerGuide, code and the address to declare

   YOUR_ID is replaced by your calculator's ID when you copy from Finalize.

2. 2Paste

   Paste it into the page

   Open your site editor (WordPress, Shopify, Wix, and so on) and paste the code where the calculator should appear: your unit sizes, rates or booking page. Your platform is covered in section 05.

3. 3Publish

   Publish

   Save and publish. The calculator appears and sizes itself. You can change your colors, sizes and wording later from the dashboard, without touching the code.

Three checks, or nothing shows up.

If any of these three is missing, your page stays empty or shows a message instead of the calculator. Check them before you publish.

Right where you paste it, nowhere else.

The code inserts the calculator exactly where the <script> tag sits. To control that spot, put it inside a container:

<div class="my-calculator-wrapper">
  <script src="https://www.spacefit.co/embed.js?id=YOUR_ID"></script>
</div>

.my-calculator-wrapper100% of the widthPreview

You size this container with plain CSS: see section 06, Adjust the width.

Full width, automatic height.

The calculator always uses 100% of its container's width, so there is no width attribute to set. Its height follows its content: it sends its real height to the page and the code adjusts it live, at every step of the visitor's journey. Nothing to do on your side.

Your platform, same line.

It's the same line everywhere. Only the spot where you paste it changes.

Limit it, center it: plain CSS.

To cap the maximum width or center the calculator, style the parent container:

.my-calculator-wrapper { max-width: 960px; margin: 0 auto; }

For developers.

Advanced · for developers

Not technical? You can safely skip this section.

script-src 'self' https://www.spacefit.co; frame-src 'self' https://www.spacefit.co;

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://www.spacefit.co') return;
  const frame = document.querySelector('iframe[src*="spacefit.co/fit/"]');
  if (!frame || event.source !== frame.contentWindow) return;
  const data = event.data || {};
  switch (data.type) {
    case 'SPACEFIT_IFRAME_READY':
      // The calculator has loaded
      break;
    case 'SPACEFIT_RESIZE':
      // Content height ({ height }): embed.js handles it
      break;
    case 'SPACEFIT_CALCULATED':
      // Calculation finished (version 1):
      // { version: 1, calculator, volume_m3, items_count, multi_box,
      //   recommended: [{ label, size_sqm, width_m, depth_m, height_m, unit_type? }],
      //   lang }
      // recommended: 1 to 3 units, best first.
      console.log('Calculation', data);
      break;
  }
});

One symptom, one fix.

Start with the three checks in section 02: they are the easiest causes to fix.

Stuck? We'll help.

Write to us or book a call and we'll look at your page with you.