# Editor Configuration

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

<table data-full-width="false"><thead><tr><th width="140">Field</th><th width="115.906005859375">Default</th><th width="70.32421875">Required</th><th width="76.976318359375">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><tr><td>mode</td><td>download</td><td>true</td><td>string</td><td>Choose "<strong>download</strong>" or  "<strong>custom</strong>"</td></tr><tr><td>callback</td><td></td><td>false</td><td>object</td><td>If <strong>mode</strong> is set to <strong>custom</strong>, use the callback</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="222.90374755859375">Field</th><th width="97.31207275390625">Default</th><th width="61.760986328125">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. Visit <a data-mention href="/pages/XCNSZqRl3ecRdw7dWZhb">/pages/XCNSZqRl3ecRdw7dWZhb</a> for more information.</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>showColorPicker</td><td>true</td><td>no</td><td>boolean</td><td>Show the color picker</td><td>true</td></tr><tr><td>showColorPresets</td><td>false</td><td>no</td><td>boolean</td><td>Show the color presets created in Dynamic Mockups APP on your account</td><td>true</td></tr><tr><td>showCollectionsWidget</td><td>true</td><td>no</td><td>boolean</td><td>Whether to show the collections widget in the UI</td><td></td></tr><tr><td>showSmartObjectArea</td><td>false</td><td>no</td><td>boolean</td><td>Displays smart object boundaries in the mockup editor</td><td></td></tr><tr><td>showTransformControls</td><td>true</td><td>no</td><td>boolean</td><td>Displays artwork transform controls, like width, height, rotate inputs.</td><td></td></tr><tr><td>showArtworkLibrary</td><td>false</td><td>no</td><td>boolean</td><td>Whether to show artwork library.</td><td></td></tr><tr><td>artworkLibrary</td><td>[]</td><td>no</td><td><code>{</code><br> <code>name: string;</code><br> <code>url: string;</code><br> <code>thumbnail?: string;</code><br> <code>id?: string;</code><br><code>}[]</code></td><td>Custom artwork items for the artwork library. showArtworkLibrary must be set to true.</td><td></td></tr><tr><td>showUploadYourArtwork</td><td>true</td><td>no</td><td>boolean</td><td>Whether to show "Upload your artwork" button.</td><td></td></tr><tr><td>showArtworkEditor</td><td>true</td><td>no</td><td>boolean</td><td>Whether to show artwork editor.</td><td></td></tr><tr><td>oneColorPerSmartObject</td><td>false</td><td>no</td><td>boolean</td><td>Restricts the user to one color per smart object</td><td></td></tr><tr><td>enableColorOptions</td><td>true</td><td>no</td><td>boolean</td><td>Displays color options</td><td></td></tr><tr><td>enableCreatePrintFiles</td><td>false</td><td>no</td><td>boolean</td><td>Enables the export of print files</td><td></td></tr><tr><td>enableCollectionExport</td><td>false</td><td>no</td><td>boolean</td><td>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</td><td></td></tr><tr><td>exportMockupsButtonText</td><td>"Export Mockups"</td><td>no</td><td>string</td><td>Export Mockups button text</td><td></td></tr><tr><td>customLabels</td><td>{}</td><td>no</td><td><code>{</code><br> <code>artwork?: {</code><br>  <code>label?: string;</code><br>  <code>tooltip?: string;</code><br>  <code>icon?: string;</code><br> <code>};</code><br> <code>colorOptions?: {</code><br>  <code>label?: string;</code><br>  <code>tooltip?: string;</code><br>  <code>icon?: string;</code><br> <code>};</code><br> <code>artworkLibrary?: {</code><br>  <code>label?: string;</code><br>  <code>tooltip?: string;</code><br>  <code>icon?: string;</code><br> <code>};</code><br><code>}</code></td><td>Custom label configuration for UI text customization</td><td></td></tr><tr><td>designUrl</td><td>""</td><td>no</td><td>string</td><td>Provide the URL of the design file to render. When provided, users can't upload own designs</td><td>https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png</td></tr><tr><td>customFields</td><td>""</td><td>no</td><td>object</td><td>Provide the JSON object of your custom fields and get them in a response</td><td><p>{</p><p>"userId": "143",</p><p>"productId": "1478",</p><p>"category": "Mugs"</p><p>}</p></td></tr><tr><td>mockupExportOptions.image_format</td><td>webp</td><td>no</td><td>string</td><td>webp|jpg|png</td><td>webp</td></tr><tr><td>mockupExportOptions.image_size</td><td>1080</td><td>no</td><td>number</td><td>Get the rendered image in strict image size defined in "width"</td><td>1080</td></tr><tr><td>mockupExportOptions.mode</td><td>download</td><td>no</td><td>"download" | "view"</td><td>Rendered image URL type – downloadable or viewable</td><td></td></tr><tr><td>colorPresets</td><td>[]</td><td>no</td><td>colorPresets?: {<br>name?: string;autoApplyColors?:boolean;<br>colors: {<br>hex: string;<br>name?: string;<br>}[];<br>}[]</td><td>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.</td><td></td></tr></tbody></table>

#### data example

```javascript
// 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:

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

#### callback example

```javascript
// 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dynamicmockups.com/mockup-editor-sdk/classic-editor-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.