Embed Mockup Editor

You don't need to implement our API to add a great editor feature to your application.

For a quick solution, try using our editor iFrame.

You can easily embed it with just a few lines of JavaScript code.

Embed Editor

How to embed?

CDN use:

Embed the iFrame in your app at the location where you want to display the editor:

<iframe
      id="dm-iframe"
      src="https://embed.dynamicmockups.com"
      style="width: 100%; height: 90vh"
></iframe>

To power the embedded editor, you'll need to include the necessary JavaScript code from the following CDN:

// you must add this script before using initDynamicMockupsIframe function in next step
<script 
    src="https://cdn.jsdelivr.net/npm/@dynamic-mockups/mockup-editor-sdk@latest/dist/index.js"
></script>

Lastly, use the initDynamicMockupsIframe function from the SDK with the following script:

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

JavaScript framework:

Embed the iFrame in your app at the location where you want to display the editor.:

<iframe
      id="dm-iframe"
      src="https://embed.dynamicmockups.com"
      style="width: 100%; height: 90vh"
></iframe>

Install package via npm registry:

npm install @dynamic-mockups/mockup-editor-sdk@latest
or
yarn add @dynamic-mockups/mockup-editor-sdk@latest

Include package in your project and init iFrame:

import { initDynamicMockupsIframe } from "@dynamic-mockups/mockup-editor-sdk";

initDynamicMockupsIframe({
     iframeId: "dm-iframe",
     data: { "x-website-key": "Generate for free via our APP" },
     mode: "download",
});

You'll notice the x-website-key field, you can generate it for free via our APP.

Our Mockup Editor SDK lets you configure the iFrame and control its behavior within your application by providing data to the initDynamicMockupsIframe function. For complete configuration details, visit the Editor Configuration page.

Embed Editor

Open a specific mockup in the Mockup Editor

By default, when you embed the mockup editor, the whole catalog will show up. You can also open a specific mockup directly.

Open a specific mockup in the Mockup Editor

To achieve that, modify the src attribute to open a specific mockup by providing the mockup uuid.

<iframe
      id="dm-iframe"
      src="https://embed.dynamicmockups.com/mockup/43981bf4-3f1a-46cd-985e-3d9bb40cef36/"
      style="width: 100%; height: 90vh"
></iframe>

You can access the mockup uuid from the Get Mockups API or in the URL of our web application editor.