Web & React: <iframe>

When using an iframe to display embedded experiences, you need to provide a communication channel so the embedded experience can send messages to your app.

Before you render the iframe, use the MessageChannel API to create a new channel. You’ll use the two ports, connected to either end of the channel, to communicate between your host app and the embedded experience inside the iframe.

const channel = new MessageChannel();

Send port2 into the iframe embedding the experience using the onLoad callback of the <iframe> element:

iframe.addEventHandler(“load”, (event) => {
    event.target.contentWindow.postMessage("", "*", [channel.port2]);
});

Now that the embedded experience has received port2, it will use that port to send event messages to your host app.

Finally, listen for those event messages from the iframe on port1, the port you retained earlier:

channel.port1.onmessage = (event) => {
    // check event.data.handlerName and event.data.eventType,
    // and handle messages sent from the Everee embedded UX
};

The event's data property will be a JavaScript object. See Component Events for details of the data structure.