Mattertag Injection Example

A simple example demonstrating how to setup a custom html mattertag.

by Jowed

HTML

<html>

  <head>
    <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script>
  </head>

  <body>
    <iframe id="showcase" title="test" width="600" height="454" frameBorder="0" allowFullScreen allow="xr-spatial-tracking" src="https://my.matterport.com/show?m=LMbQHfCxUoc&play=1&qs=1"></iframe>
  </body>

</html>

JavaScript

const iframe = document.getElementById('showcase');
const jsFiddleKey = "a8a9d13f72124cf6865af11c42a843a1";
const version = "3.5";

// serialize the contents of the function and call it with a single parameter.
// Then, wrap it with a script tag. '<' is separated from '/' to prevent the browser from
// adding this script tag to the parent page on jsfiddle.
function serializeFunctionCall(myFunction, mattertagId) {
	return (
`<script>
${myFunction.toString()};
${myFunction.name}('${mattertagId}');
<` + `/script>`);
}

// The contents of this function will be executed in a sandboxed mattertag iframe.
// You can only refer to variables defined in the iframe.
function mattertagFunction(mattertagId) {  
  // when the button is clicked send a message back to the parent page through the window object.
	var btn1 = document.getElementById('btn1');
  btn1.addEventListener('click', function () {
    window.send('click', {
    	id: mattertagId
    });
  });
  
  // handle a message that is originated from the parent page.
  window.on('update.button', function (color, message) {
    btn1.innerText = message;
    btn1.style.backgroundColor = color;
  });
};

// style and script tags are added to the head section.
// all other elements are added to the body section.
const html = `
	<style>
    body {
   		background-color: #cccccc;
    	margin: 0px;
	  }
  	div {
      height: 36px;
      background-color: rgb(255, 255, 255);
      border-radius: 10px;
      border: 1px solid black;
      text-align: center;
      margin: 5px;
    }
    div:hover {
    	background-color: rgb(235, 235, 235);
    }
    div:active {
    	background-color: rgb(200, 200, 200);
    }
  </style>
  <div id="btn1">PURCHASE</div>
`;

function makeHtmlString(mattertagId) {
	return html + serializeFunctionCall(mattertagFunction, mattertagId);
}

const main = async function() {
  const sdk = await window.MP_SDK.connect(iframe, jsFiddleKey, version);
  console.log('SDK Connected', sdk);
  
  await...