SDK Web Component

The Matterport Web Component (NPM package name: @matterport/webcomponent) is a Web Component (custom HTML element) that encapsulates the Matterport experience in a single DOM element:

<!-- Create a full 3D viewer on your site -->
<matterport-viewer m="SxQL3iGyoDo"></matterport-viewer>

You can use the web component as a full replacement for the iframe-based SDK bundle. Read the quick installation instructions, check out advanced usage tips, or continue to the tutorial to learn more.

Quick Installation

1. Install package:
   1. Yarn: yarn add @matterport/webcomponent three
   2. NPM: npm install @matterport/webcomponent three
2. Install static assets (replace YOUR_STATIC_ASSETS_DIR with your static assets dir):
   1. Yarn: yarn matterport-assets YOUR_STATIC_ASSETS_DIR
   2. NPM: npx matterport-assets YOUR_STATIC_ASSETS_DIR
3. import @matterport/webcomponent in your JS/TS
4. Add a <matterport-viewer> to your HTML. Add the m attribute with the SID of the model you want to use.
5. To use the SDK:
   1. Add the application-key attribute with the value set to your SDK key
   2. Either:
      1. Wait for the playingPromise:

            const viewer = document.querySelector('matterport-viewer');
            const mpSdk = await viewer.playingPromise;
         

      2. OR listen for the mpSdkPlaying event:

            const viewer = document.querySelector('matterport-viewer');
            viewer.addEventListener('mpSdkPlaying', async (evt) => {
          const mpSdk = evt.detail.mpSdk;
          /* do something with mpSdk... */
            });
         

Full example

(Make sure you complete steps 1 and 2 above first!)

HTML:

<matterport-viewer
  m="YOUR_MODEL_SID"
  application-key="YOUR_APPLICATION_KEY"
></matterport-viewer>

JS/TS:

import '@matterport/webcomponent';

const viewer = document.querySelector('matterport-viewer');
viewer.addEventListener('mpSdkPlaying', async (evt) => {
  const mpSdk = evt.detail.mpSdk;
  /* do something with mpSdk... */
});