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>