Inject HTML Example

by Jowed

HTML

<head>
  <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script>
</head>
<body>
  <div id="container">
    <iframe id="showcase-iframe" allow='xr-spatial-tracking; fullscreen' frameborder='0'></iframe>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
}
#showcase-iframe{
  width: 100%;
  height: 100%;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key
const modelSid = "iL4RdJqi2yK"; // change to custom model SID
const urlParameters = "&play=1&qs=1";

const iframe = document.getElementById('showcase-iframe')
function connect() {
	window.MP_SDK.connect(iframe, key, '3.10')
    .then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = `https://my.matterport.com/show/?m=${modelSid}${urlParameters}`;

function loadedShowcaseHandler(mpSdk) {
	console.debug("Connected to the SDK");
  
  // Iterate through each Mattertag as they're added
  mpSdk.Mattertag.data.subscribe({
  	onAdded: (idx, tag, collection) => {
    	
      // Remove content from Mattertags
      mpSdk.Mattertag.editBillboard(tag.sid, {
      	description: "",
        media: {
        	label: "",
        	type: "mattertag.media.none",
          src: ""
        }
      });
      
      const htmlToInject = getHtmlToInject(tag.sid);
      
      // Inject the tag
      mpSdk.Mattertag.injectHTML(tag.sid, htmlToInject, {size: {w: 200, h: 200}})
      // The promise returns the messenger to attach event listeners to
      .then(function(messenger) {
      	messenger.on(`buttonClick-${tag.sid}`, content => {
        	// Function can be custom, but this one creates a temporary div
          const element = document.createElement('div');
          element.setAttribute("style", "position: absolute; top: 50%; left: 50%; width: 20px; height: fit-content; width: fit-content; color: white;");
          element.innerText = content;
          container.appendChild(element);
          
          setTimeout(() => {
          	element.remove();
          }, 3000);
          
        });
      }).catch(console.error);
    }
  })
  
}
// setup html to inject with messenger that sends notification for which tag the button is pressed
function getHtmlToInject(sid){
    return  `
      <button id="btn1">
      Click me!
      </button>

      <script>
     ...