# MockAnything Configuration

MockAnything is a powerful embeddable AI mockup editor that lets you turn any image into a professional, customizable product mockup directly inside your website or app. Easily embed the full editor via iFrame, image upload, prompt, or API call, and instantly give users a complete AI-powered mockup creation experience.

With advanced AI tools, you can change ethnicity, modify scenes or pose, replace environments, and enhance your original photo with natural, photorealistic results. Add your own artwork, switch product colors, and export a single mockup or a full AI-generated photoshoot in seconds.

MockAnything also includes smart product detection that automatically identifies product and unlocks real manufacturer color options, making it ideal for e-commerce, print-on-demand, apparel, packaging, and product designers who need accurate, brand-friendly variations.

Embed MockAnything once and offer your users a complete, production-ready mockup studio anywhere.

#### Here’s how AI credits work:

* **Prompt Image Generation** uses **SeeDream 4.0** - **3 credits per generation**
* **Editor AI Tools** (scene change, ethnicity, camera angle, environment, etc.) use **NanoBanana - 5 credits per edit**
* **AI Photoshoot Generation** - **3 credits per generated variation**
* **Mockup Tools Are Free**  - artwork placement, product color changes (including real manufacturer colors), smart detection, and exports do **not** cost credits.

### Overview

MockAnything is a powerful embeddable AI mockup editor that can turn any image into a fully editable, production-ready mockup. You can start the editor in two ways:

1. **Iframe Embed (Direct Integration)**
   1. Embed the editor using a static iframe—ideal for simple integrations.
2. **API-initialized Editor (Dynamic Integration)**
   1. Call our API with parameters like prompt, image\_url, or artwork\_url.
   2. The API responds with:
      1. HTML for your iframe
      2. A dynamic initialization script
      3. A unique event listener name
   3. This gives you full control to inject the editor anywhere in your UI.

This document explains both approaches, editor configuration, event listeners, and how to handle authentication.

### Quick Start: Two Ways to Launch the Editor

#### 1. **Static iframe Embed**

You can change the default behavior of the Embedded Editor by changing the object inside the **initDynamicMockupsIframe** function from SDK.

```javascript
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { 
            "x-website-key": "Generate for free via our APP", 
            editorType: "mockanything" 
          },
        });
      });
</script>
```

<table data-full-width="false"><thead><tr><th width="115.26458740234375">Field</th><th width="115.906005859375">Default</th><th width="109.2044677734375">Required</th><th width="124.31591796875">Type</th><th>Description</th></tr></thead><tbody><tr><td>iframeId</td><td>dm-iframe</td><td>true</td><td>string</td><td>ID of iFrame element</td></tr><tr><td>data</td><td></td><td>true</td><td>object</td><td>Change embeded editor behaviour</td></tr></tbody></table>

#### ***data***

**data** parameter allows you to change the functionality inside the embedded editor:

<table data-full-width="false"><thead><tr><th width="179.2120361328125">Field</th><th width="97.31207275390625">Default</th><th width="65.191650390625">Required</th><th width="194.1724853515625">Type</th><th>Description</th><th data-hidden>Example</th></tr></thead><tbody><tr><td>x-website-key</td><td>""</td><td>yes</td><td>string</td><td>Connect the embed editor with Dynamic Mockups. Generate free website-key on your account <a href="https://app.dynamicmockups.com/mockup-editor-embed-integrations">here</a> .</td><td>7OA6hzpunW</td></tr><tr><td>editorType</td><td>"classic"</td><td>no</td><td>"classic" | "mockanything"</td><td>Editor type. It can be used as classic or mockanything editor. </td><td></td></tr><tr><td>themeAppearance</td><td>"light"</td><td>no</td><td>"light" | "dark"</td><td>Theme appearance: 'dark' or 'light'. If specified, it overrides the setting configured via account dashboard.</td><td>"dark"</td></tr><tr><td>mockanything</td><td></td><td>yes</td><td>{"key": "value"}</td><td>Mockanything specifix options, defined in the table below.</td><td></td></tr></tbody></table>

***Mockanything options***

<table><thead><tr><th width="215.2484130859375">Field</th><th>Description</th></tr></thead><tbody><tr><td>eventListenerName</td><td>Name of event listener used for parent-child iframe communication.</td></tr><tr><td>customModelImage</td><td>Custom image url provided, instead of api generated approach. Used for custom iframe implementation via parameters.</td></tr><tr><td>prompt</td><td>Custom prompt provided, based on which an image will be generated.</td></tr></tbody></table>

```javascript
// data example
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { 
            "x-website-key": "Generate for free via our APP",
            editorType: "mockanything" 
             mockanything: {
              customModelImage:
               "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/bdeccdc60a897e80ce9baf2098855723.jpg",
             },
          }
        });
      });
</script>
```

#### 2. **JS / API Approach (Dynamic Editor Injection)**

You can initialize the editor using a backend call that returns:

* `iframe_editor` → HTML for the iframe
* `init_function` → Script that binds the editor’s internal logic
* `event_listener_name` → Unique listener for postMessage events

This approach allows:

* Passing dynamic prompts
* Starting from an uploaded image
* Passing artwork
* Integrating deeply inside React, Vue, or any JS framework

**API Endpoint**

`POST /api/v1/mock-anything/embed/initialize`

**Example Payload**

```
{
    "prompt": "A guy wearing a Gildan 5000 in New York",
}
```

**Example Response**

```
{
  "data": {
    "iframe_editor": "<iframe ...>",
    "init_function": "window.initDynamicMockupsIframe(...)",
    "event_listener_name": "dm_174829182"
  }
}
```

| Field                 | Description                                                                      |
| --------------------- | -------------------------------------------------------------------------------- |
| `event_listener_name` | The identifier you use to listen for events from this specific editor instance   |
| `iframe_editor`       | Fully prepared iframe HTML you can inject directly into the DOM                  |
| `init_function`       | JavaScript bootstrap that connects the iframe, events, and internal editor logic |

### Full Example (React)

```typescript
import { useState, useEffect } from "react";
import { initDynamicMockupsIframe } from "../package";

// Expose init function globally for iframe communication
(window as any).initDynamicMockupsIframe = initDynamicMockupsIframe;

interface ApiResponse {
  event_listener_name: string;
  iframe_editor: string;
  init_function: string;
}

export default function ApiVersion() {
  const [isLoading, setIsLoading] = useState(false);
  const [prompt, setPrompt] = useState(
    "A guy wearing a Gildan 5000 t-shirt near St. Sava temple in Belgrade."
  );

  const [iframeData, setIframeData] = useState<ApiResponse>({
    event_listener_name: "",
    iframe_editor: "",
    init_function: "",
  });

  /** ----------------------------------------------------------------
   *  1) Call Dynamic Mockups API
   *  ---------------------------------------------------------------- */
  const requestEditorSession = async (): Promise<ApiResponse> => {
    const response = await fetch(
      "https://app.dynamicmockups.com/api/v1/mock-anything/embed/initialize",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-api-key": "YOUR_API_KEY",
        },
        body: JSON.stringify({
          prompt,
        }),
      }
    );

    if (!response.ok) {
      throw new Error("Dynamic Mockups API failed: " + response.status);
    }

    const result = await response.json();
    return result.data;
  };

  /** ----------------------------------------------------------------
   *  2) Load editor + run init function
   *  ---------------------------------------------------------------- */
  const launchEditor = async () => {
    setIsLoading(true);
    try {
      const data = await requestEditorSession();
      setIframeData(data);

      // Ensure iframe is present before running init
      setTimeout(() => {
        eval(data.init_function);
      }, 100);
    } catch (err) {
      console.error("Editor initialization failed:", err);
    } finally {
      setIsLoading(false);
    }
  };

  /** ----------------------------------------------------------------
   *  3) Listen for iframe events (image exports, etc.)
   *  ---------------------------------------------------------------- */
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      const isEditorEvent =
        event.data?.eventListenerName === iframeData.event_listener_name;

      if (!isEditorEvent) return;

      const payload = event.data.data;
      console.log("Editor event:", payload);
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [iframeData.event_listener_name]);

  /** ----------------------------------------------------------------
   *  Render
   *  ---------------------------------------------------------------- */
  return (
    <div style={{ padding: "24px" }}>
      <button onClick={launchEditor} disabled={isLoading}>
        {isLoading ? "Loading…" : "Load Editor"}
      </button>
      {/* Inject returned iframe */}
      <div
        dangerouslySetInnerHTML={{
          __html: iframeData.iframe_editor,
        }}
      />
    </div>
  );
}

```

#### Event System

Each editor instance receives a **unique event listener key**.

You listen like this:

```ts
window.addEventListener("message", (event) => {
  if (event.data.eventListenerName === iframeData.event_listener_name) {
    console.log(event.data.data);
  }
});
```

Events include:

* `editor_ready`
* `export_completed`
* `photoshoot_completed`
* `artwork_updated`
* `variant_changed`