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.
The method must be called after you have add the custom tile. It won't do anything if there isn't an existing tile with a matching name.
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