Skip to main content

Contextual Comments

Contextual Comments embeds a customizable commenting experience into your Matterport SDK application, enabling people to collaborate in real-time and asynchronously.

Quickstart​

Contextual Comments for matterport is an extension of the Contextual Comments Component. The difference from the default method is that we use the MatterportPin which automatically allow pins to work in a 3D environment.

To add the MatterportPin component to your application, follow the steps below:

1

Before we start

Before utilizing the Contextual Comments component, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the component.

2

Verify your Matterport SDK

To implement Contextual Comments it's essential that your you have access to the Matterport SDK instance that you will need to pass to our plugin.

Here you can see a basic Matterport SDK implementation:

const bundleIframe = document.getElementById('showcase');
const showcaseWindow = bundleIframe.contentWindow;

showcase.addEventListener('load', async function() {
    const mpSDK = await showcaseWindow.MP_SDK.connect(
        showcaseWindow,
        MATTERPORT_KEY
    );

    mpSDK = await showcaseWindow.MP_SDK.connect(
        showcaseWindow,
        MATTERPORT_KEY
    ).then(onShowcaseConnect);
});

async function onShowcaseConnect(mpSdk) {
    console.log('Hello Bundle SDK', mpSdk);
}
3

Install the package

Install the Matterport plugin package with npm:

npm install --save @superviz/matterport-plugin
4

Import comments and MatterportPin

After installing the package, import comments and the MatterportPin component from the Matterport plugin:

import { Comments } from '@superviz/sdk';
import { MatterportPin } from '@superviz/matterport-plugin';
5

Add comments and the MatterportPin plugin

Initialize the MatterportPin plugin passing the Matterport SDK instance and the Matterport iframe.

Add the Comments component and pass the pinAdapter instance.

Then finally add the component to your SuperViz room:

const pinAdapter = new MatterportPin(mpSDK, bundleIframe);
const comments = new Comments(pinAdapter);

room.addComponent(pinAdapter);
6

Next steps

You are now all set! See what else can you do:

Contextual Comments API Reference

Contextual Comments API Reference

MatterportPin API Reference

MatterportPin API Reference

Resources to get you started​

We've prepared a few resources to help you get started with the Matterport integration and use it alosing with other components to create a collaborative environment.