How do I find a Mattertag sid?

Question

I'm trying to inject some html to a Mattertag as shown in this example here:

http://jsfiddle.net/guillermo_matterport/njhm5aos/

const postMessage = await sdk.Mattertag.injectHTML(tagByTV.sid, htmlString, {
  size: {
        w: 400,
      h: 50,
    },
  })

However I don't know the sid of the Mattertag, how can I find out?

Answer 1

To get a Mattertag sid, you can set a listener to print out the sid on each click:

sdk.on(sdk.Mattertag.Event.CLICK,
  function (tagSid) {
    console.log(tagSid + ' was selected');
  }
);

Alternatively, you can base the injection on the data from the tags. You'd first need to get the Mattertag data from the space.

Using the Mattertag.data observable map:

const tagData = [];

sdk.Mattertag.data.subscribe({
  onAdded: (idx, item) => {
    tagData.push(item);
  }
});

You can read more about observable maps and when methods are fired here.

You can then identify the Mattertag to inject the HTML, whether it's the title, color, or description. You can also incorporate the injection with the observable map. For example, based on the title:

const tagData = [];
const postMessages = {}; // save postMessage for multiple Mattertag injection references

sdk.Mattertag.data.subscribe({
  onAdded: async (idx, item) => {
    tagData.push(item);
    if(item.label.includes("TV")){
      const htmlString = makeHtmlString(item.sid);
      const postMessage = await sdk.Mattertag.injectHTML(item.sid, htmlString, {
        size: {
          w: 400,
          h: 50,
         },
      });
      postMessages[item.sid] = postMessage;
    }
  }
});

See the modified fiddle here.