Editor Configuration

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

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

Field	Default	Required	Type	Description
iframeId	dm-iframe	true	string	ID of iFrame element
data		true	object	Change embeded editor behaviour
mode	download	true	string	Choose "download" or "custom"
callback		false	object	If mode is set to custom, use the callback

data

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

Field	Default	Required	Type	Description
x-website-key	""	yes	string	Connect the embed editor with Dynamic Mockups. Generate free website-key on your account here .
themeAppearance	"light"	no	"light" | "dark"	Theme appearance: 'dark' or 'light'. If specified, it overrides the setting configured via account dashboard.
showColorPicker	true	no	boolean	Show the color picker
showColorPresets	false	no	boolean	Show the color presets created in Dynamic Mockups APP on your account
showCollectionsWidget	true	no	boolean	Whether to show the collections widget in the UI
showSmartObjectArea	false	no	boolean	Displays smart object boundaries in the mockup editor
showTransformControls	true	no	boolean	Displays artwork transform controls, like width, height, rotate inputs.
oneColorPerSmartObject	false	no	boolean	Restricts the user to one color per smart object
enableColorOptions	true	no	boolean	Displays color options
enableCreatePrintFiles	false	no	boolean	Enables the export of print files
enableCollectionExport	false	no	boolean	If enabled, exporting a single mockup from a collection will automatically export all mockups in the collection, retaining the position and size of the design from the edited mockup
exportMockupsButtonText	"Export Mockups"	no	string	Export Mockups button text
designUrl	""	no	string	Provide the URL of the design file to render. When provided, users can't upload own designs
customFields	""	no	object	Provide the JSON object of your custom fields and get them in a response
mockupExportOptions.image_format	webp	no	string	webp|jpg|png
mockupExportOptions.image_size	1080	no	number	Get the rendered image in strict image size defined in "width"
mockupExportOptions.mode	download	no	"download" | "view"	Rendered image URL type – downloadable or viewable
colorPresets	[]	no	colorPresets?: { name?: string;autoApplyColors?:boolean; colors: { hex: string; name?: string; }[]; }[]	List of color presets, each with optional name and an required array of hex colors. These presets appear in the colors popup and can be selected by the user.

data example

// data example
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { 
            "x-website-key": "Generate for free via our APP",
            "MORE DATA HERE": "VALUE" 
          },
          mode: "download"
        });
      });
</script>

callback

Inside the callbackData you can find:

Field	Type	Example	Description
callbackData.mockupsExport[0].export_label	string	RIDN48UYR1	Get export_label in response once the render is done
callbackData.mockupsExport[0].export_path	string	https://psd-engine-localhost.s3.eu-central-1.amazonaws.com/variation-exports/0fc9b38d-9a6c-4a50-808e-ac62ea7a6698_0686a84e-4521-41a4-a7fa-23be2ee98c7c.webp	Get export_path in response once the render is done
callbackData.customFields	object	{ "userId": "143", "productId": "1478", "category": "Mugs" }	Provide the JSON object of your custom fields and get them in a response

callback example

// callback example
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { "x-website-key": "Generate for free via our APP" },
          mode: "custom",
          callback: (callbackData) => { console.log(callbackData); },
        });
      });
</script>