MatterportPin

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

Before we start

Before utilizing the <Comments> element, it is essential to initialize a room with a defined name and ID for the participant.

How to use

To add contextual comments to the Matterport SDK, you need to add the <Comments> element, configure position and styling, and then point to the 'useMatterportPin' hook.
useMatterportPin is a 3D Plugin hook that specifies that the element that is active to receive comments with Pins in a Matterport SDK generated <iframe>.

import { Comments, useMatterportPin } from "@superviz/react-sdk";
import { useEffect, useRef, useState } from "react";

function Room() {
  const [mpSdkInstance, setMpSdkInstance] = useState(null);
  const iframe = useRef(null);

  const { pin } = useMatterportPin({
    matterportInstance: mpSdkInstance,
    showcaseWindow: iframe.current,
  });

  useEffect(() => {
    const showcase = document.getElementById("showcase");
    const showcaseWindow = showcase.contentWindow;
    showcase.src =
      `/vendor/matterport/showcase.html?applicationKey=` +
      matterportKey +
      `&m=` +
      model;

    if (!showcaseWindow) return;

    showcase.addEventListener("load", async () => {
      const matterportSDK = await showcaseWindow.MP_SDK.connect(showcaseWindow);
      setMpSdkInstance(matterportSDK);
    });
  }, []);

  return (
    <>
      <Comments pin={pin} buttonLocation="top-right" position="left" />
      <iframe id="showcase" ref={iframe} />
    </>
  );
}

export default Room;

Properties

Name	Type	Description
pin	pin	Required Specifies the element or plugin that can receive comments. For Matterport SDK, always use the useMatterportPin hook.
position	string	Optional Represents the position where the element with the list of comments will be placed on the page. Values are left and right Default value: left
buttonLocation	string	Optional Represents the position where the button to activate or deactivate the comments functionality will be placed. Values are top-left, top-right, bottom-left, bottom-right or an HTML element id. Default value: top-left
styles	string	Optional CSS String that allows you to customize all elements individually.

useComments Hook

openThreads

Type: () => void

Opens the superviz-comments section, where you can see the list of comments and reply to them.

function Room() {
  const { openThreads } = useComments();

  function open() {
    openThreads();
  }

  return (
    <button onClick={open}>Open Threads</button>
  )
}

closeThreads

Type: () => void

Closes the superviz-comments section, where you can see the list of comments and reply to them.

function Room() {
  const { closeThreads } = useComments();

  function close() {
    closeThreads();
  }

  return (
    <button onClick={close}>Close Threads</button>
  )
}

useMatterportPin Hook

Exported

pin

Type: MatterportPin | null

A Matterport Pin object

function Room() {
  const { pin } = useMatterportPin({
    matterportInstance: mpSdkInstance,
    showcaseWindow: iframe.current,
  });

  return (
    <Comments pin={pin} />
  );
}

destroy

function

Destroy Pin object

function Room() {
  const { pin, destroy } = useMatterportPin({
    matterportInstance: mpSdkInstance,
    showcaseWindow: iframe.current,
  });

  function destroyPin() {
    destroy();
  }

  return (
    <button onclick={destroyPin}>Destroy</button>
  );
}

Parameters

matterportInstance

Type: string

Specifies the Matterport SDK instance where comments can be added.

function Room() {
  const { pin } = useMatterportPin({
    matterportInstance: mpSdkInstance
  });
}