Here is a complete, minimal HTML example of integrating the KitMaker iFrame.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>KitMaker Designer iFrame</title>
    <style>
      iframe {
        width: 100%;
        height: 700px;
      }
    </style>
  </head>
  <body>
    <button onclick="saveDesign()">Save Design</button>
    <iframe
      id="editor-frame"
      src="https://www.kitmaker.eu/public/design/external/designer">
    </iframe>

    <script>
      const iframe = document.getElementById("editor-frame");

      // Initialize when the iframe loads (or on a user action)
      iframe.onload = function () {
        const initMessage = {
          type: "INIT_EXTERNAL_DESIGNER",
          apiKey: "YOUR_API_KEY",
          payload: {
            styleId: 31930,
            title: "My New Design",
            designLogos: [...]
          },
          config: {
            theme: { accentColor: "#c200000" },
            layout: { heightSelectedView: "700px" }
          }
        };
        iframe.contentWindow.postMessage(initMessage, "*");
      };

      function saveDesign() {
        iframe.contentWindow.postMessage(
          { type: "REQUEST_SAVE_DESIGN" },
          "*"
        );
      }

      window.addEventListener("message", event => {
        if (event.data.type === "DESIGN_SAVED") {
          console.log("Saved Design ID:", event.data.designId);
          alert("Design Saved! ID: " + event.data.designId);
        } else if (event.data.type === "DESIGN_SAVE_ERROR") {
          console.error("Save Error:", event.data.error);
          alert("Error: " + event.data.error);
        }
      });
    </script>
  </body>
</html>
Example
