# 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="mockanything-editor-configuration">mockanything-editor-configuration</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>
```