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

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

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.imageFormat

webp

no

string

webp|jpg|png

mockupExportOptions.image_size

1080

no

number

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": "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

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>

PreviousEmbed in bubble.ioNextTutorials

Last updated