Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Embedding external webpages in DSM

Follow
Embedding web pages is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.

If using DSM Enterprise, you can embed content from the web directly into your DSM library. This allows you to continue using DSM as the single source of truth for designers and developers, keeping all your resources accessible from one place.

Currently, DSM supports embedding the following web pages:

  • Styleguidist
  • CodePen
  • CodeSandbox
  • Pattern Lab
  • InVision prototype links
    Currently, it's not possible to embed prototype share links generated in InVision Cloud V6. As an alternative, when viewing a specific prototype screen in Cloud V6, you can copy the URL directly from the browser. To view the prototype screen from the embedded page in DSM, you will need to sign in to the InVision Cloud account associated with the prototype.

Before you start

You can add embedded web pages to any component saved as a component container. If you have not yet saved your components as component containers, you will need to do so before proceeding.

To learn more about creating component containers, check out this article: Adding a Component Container in DSM

Embedding a web page

To embed a web page in DSM:

  1. Sign in to the DSM web view and open the component where you want to add a web page.
  2. Just below the component title, click Add tab.
  3. Under the Embed section, choose the appropriate site.
  4. In the Tab Name field, enter a name for the embedded page. 
  5. In the URL field, paste in the URL for the web page.
    For the embedded page to work successfully, the URL must be publicly available, and the hosting server must support embedding.
  6. Click Preview.
  7. If the preview looks accurate, click Add.
dsm-add-embedded-page.gif

Editing a web page

To edit an existing embedded web page:

  1. Sign in to the DSM web view and open the component with the embedded web page.
  2. Click the tab associated with the embedded page.
  3. At the top right of the preview window, click the ••• (more) menu. 
  4. Click Edit tab
  5. When finished editing, click Save.
dsm-edit-embedded-page.gif

Deleting a web page

To delete an embedded web page:

  1. Sign in to the DSM web view and open the component with the embedded web page.
  2. Click the tab associated with the embedded page.
  3. At the top right of the preview window, click the ••• (more) menu. 
  4. Click Delete tab
  5. To confirm, click Delete.
dsm-delete-embedded-page.gif

Was this article helpful?

Still have a question?

Contact Us