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": "YOUR_WEBSITE_KEY_HERE" },
          mode: "download",
        });
      });
</script>

Field	Required	Type	Default	Description
iframeId	true	string	dm-iframe
data	true	object		Change embeded editor behaviour
mode	true	string	download	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	Required	Type	Example	Description
x-website-key	true	string	7OA6hzpunW	Connect the embed editor with Dynamic Mockups. Contact us to get this key.
themeAppearance	false	"light" | "dark"	"dark"	Theme appearance: 'dark' or 'light'. If specified, it overrides the setting configured in the dashboard.
showColorPicker	false	boolean	true	Show the color picker
showColorPresets	false	boolean	true	Show the color presets created in Dynamic Mockups APP on your account
enableDesignFileUpload	false	boolean	true	Enable users to upload design file from the editor
designUrl	false	string	https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png	Provide the URL of the design file to render
customFields	false	object	{ "userId": "143", "productId": "1478", "category": "Mugs" }	Provide the JSON object of your custom fields and get them in a response
mockupExportOptions.imageFormat	false	string	webp	webp|jpg|png
mockupExportOptions.image_size	false	number	1080	Get the rendered image in strict image size defined in "width"

data example

// data example
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { 
            "x-website-key": "CONTACT_US_FOR_THE_WEBSITE_KEY",
            "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": "CONTACT_US_FOR_THE_WEBSITE_KEY" },
          mode: "custom",
          callback: (callbackData) => { console.log(callbackData); },
        });
      });
</script>