How to Embed the Mockup Editor on Your Website

<iframe
  id="dm-iframe"
  src="https://embed.dynamicmockups.com"
  style="width: 100%; height: 90vh"
></iframe>

<script src="https://cdn.jsdelivr.net/npm/@dynamic-mockups/mockup-editor-sdk@latest/dist/index.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    DynamicMockups.initDynamicMockupsIframe({
      iframeId: "dm-iframe",
      data: { 
        "x-website-key": "YOUR_WEBSITE_KEY_HERE"
      },
      mode: "download"
    });
  });
</script>

npm install @dynamic-mockups/mockup-editor-sdk@latest

yarn add @dynamic-mockups/mockup-editor-sdk@latest

import { initDynamicMockupsIframe } from "@dynamic-mockups/mockup-editor-sdk";

// Add iframe to your component
<iframe
  id="dm-iframe"
  src="https://embed.dynamicmockups.com"
  style={{ width: '100%', height: '90vh' }}
></iframe>

// Initialize the editor
initDynamicMockupsIframe({
  iframeId: "dm-iframe",
  data: { 
    "x-website-key": "YOUR_WEBSITE_KEY_HERE"
  },
  mode: "download"
});

{
  "prompt": "A guy wearing a Gildan 5000 t-shirt in Belgrade",
  "artwork_url": "https://example.com/my-logo.png"
}

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

import { useState, useEffect } from "react";
import { initDynamicMockupsIframe } from "@dynamic-mockups/mockup-editor-sdk";

// Expose function globally for iframe communication
window.initDynamicMockupsIframe = initDynamicMockupsIframe;

export default function DynamicEditor() {
  const [iframeData, setIframeData] = useState(null);

  const launchEditor = async () => {
    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: "Modern office desk scene",
          artwork_url: "https://example.com/logo.png"
        })
      }
    );

    const result = await response.json();
    setIframeData(result.data);

    // Run initialization script
    setTimeout(() => {
      eval(result.data.init_function);
    }, 100);
  };

  // Listen for editor events
  useEffect(() => {
    const handleMessage = (event) => {
      if (event.data?.eventListenerName === iframeData?.event_listener_name) {
        console.log("Editor event:", event.data.data);
      }
    };

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

  return (
    <div>
      <button onClick={launchEditor}>Launch Editor</button>
      <div dangerouslySetInnerHTML={{ __html: iframeData?.iframe_editor }} />
    </div>
  );
}

colorPresets: [
  {
    name: "Brand Colors",
    autoApplyColors: true,
    colors: [
      { hex: "#FF5733", name: "Brand Red" },
      { hex: "#33FF57", name: "Brand Green" }
    ]
  }
]

artworkLibrary: [
  {
    name: "Logo Primary",
    url: "https://example.com/logo.png",
    thumbnail: "https://example.com/logo-thumb.png",
    id: "logo-1"
  }
]

DynamicMockups.initDynamicMockupsIframe({
  iframeId: "dm-iframe",
  data: { 
    "x-website-key": "YOUR_KEY_HERE"
  },
  mode: "download"
});

DynamicMockups.initDynamicMockupsIframe({
  iframeId: "dm-iframe",
  data: { 
    "x-website-key": "YOUR_KEY_HERE",
    editorType: "mockanything"
  }
});

DynamicMockups.initDynamicMockupsIframe({
  iframeId: "dm-iframe",
  data: {
    "x-website-key": "YOUR_KEY_HERE",
    themeAppearance: "dark",
    showColorPresets: true,
    enableCreatePrintFiles: true,
    colorPresets: [
      {
        name: "Brand Colors",
        autoApplyColors: true,
        colors: [
          { hex: "#FF5733", name: "Primary" },
          { hex: "#33C1FF", name: "Secondary" }
        ]
      }
    ],
    mockupExportOptions: {
      image_format: "png",
      image_size: 2000
    }
  },
  mode: "download"
});

DynamicMockups.initDynamicMockupsIframe({
  iframeId: "dm-iframe",
  data: {
    "x-website-key": "YOUR_KEY_HERE",
    customFields: {
      userId: "12345",
      productId: "ABC-001",
      category: "T-Shirts"
    }
  },
  mode: "custom",
  callback: (callbackData) => {
    console.log("Export Label:", callbackData.mockupsExport[0].export_label);
    console.log("Image URL:", callbackData.mockupsExport[0].export_path);
    console.log("Custom Fields:", callbackData.customFields);
    
    // Save to your database, display to user, etc.
  }
});

<iframe
  id="dm-iframe"
  src="https://embed.dynamicmockups.com/mockup/43981bf4-3f1a-46cd-985e-3d9bb40cef36/"
  style="width: 100%; height: 90vh"
></iframe>

window.addEventListener("message", (event) => {
  if (event.data.eventListenerName === "your_event_listener_name") {
    const eventData = event.data.data;
    
    switch(eventData.type) {
      case "export_completed":
        console.log("Mockup URL:", eventData.export_path);
        break;
      case "editor_ready":
        console.log("Editor is ready!");
        break;
    }
  }
});