KitMaker API Docs

Example

Here is a complete, minimal HTML example of integrating the KitMaker Style Upload iFrame.

Image
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>KitMaker Style Upload</title>
    <style>
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        margin: 0;
        padding: 20px;
        background: #f1f5f9;
      }
      h1 {
        margin-bottom: 20px;
      }
      .iframe-container {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      iframe {
        width: 100%;
        height: 900px;
        border: none;
      }
      .result {
        margin-top: 20px;
        padding: 16px;
        border-radius: 8px;
        display: none;
      }
      .result.success {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        display: block;
      }
      .result.error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Upload Custom Style</h1>

    <div class="iframe-container">
      <iframe
        id="style-upload-frame"
        src="https://www.kitmaker.eu/public/style/external-upload"
      ></iframe>
    </div>

    <div id="result" class="result"></div>

    <script>
      const iframe = document.getElementById("style-upload-frame");
      const resultDiv = document.getElementById("result");

      // Initialize when the iframe loads
      iframe.onload = function () {
        const initMessage = {
          type: "INIT_STYLE_UPLOAD",
          apiKey: "YOUR_API_KEY",
          language: "en",
          config: {
            theme: {
              primaryColor: "#1e293b",
              accentColor: "#10b981",
              backgroundColor: "#f8fafc"
            },
            layout: {
              padding: "1.5rem",
              cardBorderRadius: "0.75rem",
              cardGap: "2rem"
            }
          }
        };
        iframe.contentWindow.postMessage(initMessage, "*");
      };

      // Listen for events from the iFrame
      window.addEventListener("message", event => {
        if (event.data.type === "STYLE_CREATED") {
          resultDiv.className = "result success";
          resultDiv.innerHTML = `
            <strong>Style Created Successfully!</strong><br>
            Style ID: ${event.data.styleId}<br>
            Name: ${event.data.style.name}<br>
            Brand: ${event.data.style.brandName}<br>
            Views: ${event.data.style.views.map(v => v.view).join(", ")}
          `;
        } else if (event.data.type === "STYLE_CREATE_ERROR") {
          resultDiv.className = "result error";
          resultDiv.innerHTML = `
            <strong>Error Creating Style</strong><br>
            ${event.data.error}
          `;
        }
      });
    </script>
  </body>
</html>

Danish Language Example #

To display the UI in Danish, set the language parameter to da:

const initMessage = {
  type: "INIT_STYLE_UPLOAD",
  apiKey: "YOUR_API_KEY",
  language: "da",
  config: {
    // ... config options
  }
};