Communicating through the Iframe component

If you have a website or application embedded in the UI Bakery iframe component and you need to communicate with it (send or receive data) you can easily do this using the JavaScript `postMessage` function.

1. To send the data, give the Iframe component a unique name. This name will be added as a component class allowing you to query it with JavaScript:

2. Create a Code action and put the following code to query the iframe and send messages to it:

const iframe = document.querySelector('.uniqueName > iframe').contentWindow;
iframe.postMessage('message', { foo: 'bar' })

Depending on the receiving app configuration, postMessage may require additional setup.

In a similar manner, you can subscribe to events from the iframe:

const iframe = document.querySelector('.uniqueName > iframe').contentWindow;
iframe.on('message', (data) => {
  console.log(data);
});

Add this action to the On Page load event to bind the listener to the new messages when the app loads.