Embedding external webpages in DSM
  • 13 Jun 2023
  • 1 Minute to read
  • Dark
    Light

Embedding external webpages in DSM

  • Dark
    Light

Article Summary

Embedding web pages is currently limited to the DSM Enterprise plan.

If using DSM Enterprise, you can embed content from the web directly into your design system. This allows you to make all your resources accessible from one place.

Before you start

You can add embedded web pages to any component page in your design system. To learn more about adding components to DSM, check out our guide on developing your DSM documentation.

Note: If you're using legacy DSM, you'll need to first create component containers.

DSM supports embedding the following web pages: 

  • Styleguidist
  • CodePen
  • CodeSandbox
  • Pattern Lab
  • InVision prototype links
    Note: Currently, it's not possible to embed prototype share links generated in InVision 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.

Embedding a web page

To embed a web page in DSM:

  1. Sign in to the DSM web view and open your design system.
  2. Open a component page and click Add tab.
  3. From the drop-down, select Embed and 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.
    Note: 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.

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.

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.


Was this article helpful?