Saving Design

To save the design, your parent window must initiate the process by sending a message to the iFrame. The editor will handle the saving logic and report the result back to you.

Trigger Save #

Send a REQUEST_SAVE_DESIGN message to the iFrame:

const iframe = document.getElementById("kitmaker-editor");
iframe.contentWindow.postMessage(
  { type: "REQUEST_SAVE_DESIGN" },
  "*"
);

Handling Responses #

Listen for message events from the iFrame to handle success or error states.

window.addEventListener("message", event => {
  if (event.data.type === "DESIGN_SAVED") {
    // Success
    console.log("Design created with ID:", event.data.designId);
    alert("Design Saved! ID: " + event.data.designId);
  } else if (event.data.type === "DESIGN_SAVE_ERROR") {
    // Failure
    console.error("Save failed:", event.data.error);
    alert("Error: " + event.data.error);
  }
});

Response Events #