Put a calculator on your own page

Your page’s listener

const frame = document.querySelector("#cq-frame");

window.addEventListener("message", (event) => {
  // Only this frame's window, and only a message of ours.
  if (event.source !== frame.contentWindow) return;
  if (event.data?.source !== "craft-quantities") return;

  if (event.data.type === "result") {
    // A number: set it as a value, never as HTML.
    document.querySelector("#quantity").value = event.data.value;
  }

  if (event.data.type === "size" && Number.isFinite(event.data.height)) {
    frame.style.height = Math.ceil(event.data.height) + "px";
  }
});

Every message is an object with source: "craft-quantities", version: 1, type and slug. A size message adds height, in CSS pixels; a result adds value, unit and, where there is one, breakdown. The builder’s fitting script is this check, ready-made, for every frame on the page at once:

<script>(function(){if(window.cqEmbedFit)return;window.cqEmbedFit=1;window.addEventListener("message",function(e){var d=e.data;if(!d||d.source!=="craft-quantities"||d.type!=="size"||typeof d.height!=="number"||!isFinite(d.height))return;var f=document.getElementsByTagName("iframe");for(var i=0;i<f.length;i++){if(f[i].contentWindow!==e.source)continue;var a=document.createElement("a");a.href=f[i].src;if(a.protocol+"//"+a.host!==e.origin)return;f[i].style.height=Math.min(6000,Math.max(200,Math.ceil(d.height)))+"px";return}})})();</script>