The KitMaker Style Upload iFrame allows you to embed a style upload tool directly into your own web application. This enables your users to upload custom clothing styles with product images.

Embedding the Style Upload #

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

<iframe
  id="kitmaker-style-upload"
  src="https://www.kitmaker.eu/public/style/external-upload"
  width="100%"
  height="900px"
  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 optional configuration.

Message Structure #

Send a message with the type INIT_STYLE_UPLOAD:

const iframe = document.getElementById("kitmaker-style-upload");
const message = {
  type: "INIT_STYLE_UPLOAD",
  apiKey: "YOUR_API_KEY", // Required
  language: "en", // Optional: "en" or "da"
  config: {
    /* See Configuration page */
  }
};

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

Parameters #

Parameter	Type	Required	Description
type	string	Yes	Must be `INIT_STYLE_UPLOAD`.
apiKey	string	Yes	Your KitMaker API key for authentication.
language	string	No	UI language. Supported values: `en` (English, default) or `da` (Danish).
config	object	No	Configuration object for theming and layout.

Upload Flow #

The style upload process consists of three steps:

1. Style Details - User enters brand name, model name, selects a category, and uploads product images (front view required, back/left/right optional).
2. Calibrate Size - User calibrates the pixels-per-centimeter (PPCM) value by adjusting a reference rectangle to match a known size. This ensures logos are sized correctly on the garment.
3. Review & Submit - User reviews the entered information and uploaded images, then submits to create the style.

Mirroring Options #