# 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:

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

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FPyHNT3g9f3NhnkCXwEO1%2FCleanShot%202025-02-18%20at%2015.35.33%402x-min-min.png?alt=media&#x26;token=da84685c-01ab-4a65-b3a3-8743ad0e8e9c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Depending on the receiving app configuration, `postMessage` may require [additional setup](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#security_concerns).
{% endhint %}

***

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

```javascript
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.