Communicating with external sites via Iframe

Let's say 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.

Follow the instruction below for details:

1. Give your Iframe component a unique name to send the data. This name will be added as a component class allowing you to query it with JavaScript.

2. Create a JavaScript Code action and specify 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.

---

Similarly, you can also subscribe to events from the Iframe via a JavaScript Code action step with the following code:

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

And you need to assign this action to the On Page Load trigger to bind the listener to the new messages when the app loads.