sendMessageToCustomTile()

sendMessageToCustomTile({name: string, event?: string, origin?: string, data?: any})

Posts a message to the iframe of the custom tile which was previously created with addCustomTile().

It is mainly used if you have listeners in your custom tile and want to inform your iframe.

This method is often used in conjunction with the addCustomTile() and removeCustomTile() methods.

In the below example a custom AI tile is added to the stage and then a message send to it.

sambaFrame.on('userJoined', (event) => {
   const data = event.data;
   if (data.type === 'local') {
     sambaFrame.addCustomTile({
        "name": "AI", 
        "html": '<iframe src="url to your customm site with a listener inside"></iframe>',
        "position": "last"
     });
     
     .....................
     
     //At some point later
     sambaFrame.sendMessageToCustomTile({
     
        //Identifier and title of your custom tile. Must match the name in addCustomTile
        "name": "AI",
        
        //A custom event name which your tile knows about
        "event": "muteInternally",
         
        /*
          The target origin for postMessage
          https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
        */
        "origin": "*" ,
        
        //Some custom payload data if you need        
        "data": {
          "everything": true/false
        }
     });
   }
});
//Somewhere in your embedded iframe custom site
<script>
  window.addEventListener("message", (event) => {
    console.log(event.data);
    alert(JSON.stringify(event.data));
  }, false);
</script>

Last updated