A Complete Example to Get Started

This sample HTML creates an iframe containing a Matterport model. It then connects the Embed SDK, retrieves data about the model, and finally logs the model’s id.

You only need to replace the [YOUR_SDK_KEY_HERE] string in the iframe’s “src” with your own key.

<html>
  <head>
  <script type="importmap">
    {
      "imports": {
        "MP_SDK": "https://static.matterport.com/showcase-sdk/bootstrap/3.0.0-0-g0517b8d76c/sdk.es6.js"
      }
    }
  </script>
  </head>
  <body>
    <iframe
      width="853"
      height="480"
      src="https://my.matterport.com/show?m=SxQL3iGyoDo&play=1&applicationKey=[YOUR_SDK_KEY_HERE]"
      frameborder="0"
      allow="fullscreen *"
      id="showcase-iframe">
    </iframe>
    <script type="module">
      import { connect } from 'MP_SDK';
      (async function connectSdk() {
        const iframe = document.getElementById('showcase-iframe');

        // connect the sdk; log an error and stop if there were any connection issues
        try {
          const mpSdk = await connect(iframe);
          onShowcaseConnect(mpSdk);
        } catch (e) {
          console.error(e);
        }
      })();

      async function onShowcaseConnect(mpSdk) {
        // insert your sdk code here. See the ref https://matterport.github.io/showcase-sdk//docs/reference/current/index.html

        // try retrieving the model data and log the model's sid
        try {
          const modelData = await mpSdk.Model.getData();
          console.log('Model sid:' + modelData.sid);
        } catch (e) {
          console.error(e);
        }
      }
    </script>
  </body>
</html>