Implementation

The KitMaker iFrame allows you to embed a fully functional design creation tool directly into your own web application via an iFrame.

Embedding the Editor #

To integrate the editor, embed the following URL in an <iframe> element on your page:

<iframe
  id="kitmaker-editor"
  src="https://www.kitmaker.eu/public/design/external-editor"
  width="100%"
  height="1000px"
  frameborder="0"
></iframe>

Initialization #

Once the iFrame is loaded, you must initialize it by sending a postMessage event. This message authenticates the session and provides the initial data (style, logos).

Message Structure #

Send a message with the type INIT_EXTERNAL_DESIGNER:

const iframe = document.getElementById("kitmaker-editor");
const message = {
  type: "INIT_EXTERNAL_DESIGNER",
  apiKey: "YOUR_API_KEY", // Required
  payload: {
    // Initial Design Data
    styleId: 31930,
    title: "My Custom Design",
    designLogos: [
      {
        view: "FRONT",
        logoId: 514686,
        xCoordinate: 422.23,
        yCoordinate: 422.33,
        angleRads: 1.57
      }
    ],
    organizationId: 123
  },
  config: {
    /* See Configuration page */
  }
};

iframe.contentWindow.postMessage(message, "*");

Parameters #

payload Object

designLogos Object

If either of xCoordinate or yCoordinate is not included in the JSON payload they will default to 0. If both xCoordinate and yCoordinate are missing the iFrame will default to a centered placement.