> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognigy.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Copilot: IFrame Tile
Updated in 4.90
## Description
This Node embeds external websites directly into the Agent Copilot workspace. To do that, specify a URL for the external content you want to display. You can present web pages, forms, or applications within the Agent Copilot workspace without redirecting human agents to an external site.
## Parameters
| Parameter | Type | Description |
| ---------- | ------------- | ----------------------------------------------------------- |
| Tile ID | CognigyScript | The ID that you created in the Agent Copilot configuration. |
| IFrame URL | URL | The URL to render inside the Widget. |
| JSON Data | JSON | The data to send to the iframe as a postMessage event. |
## Passing JSON Data into the IFrame
When you use a Copilot: IFrame Tile Node, JSON data is passed into the iframe code using the [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) method.
To receive and process the passed JSON in your widget, add an event listener inside the iframe content:
```js theme={null}
window.addEventListener("message", function (event) {
console.log("Content of message:", event.data);
// Handle the incoming JSON data here
});
```
```html theme={null}
IFrame Example
iframe Tile
```
At this stage, the iframe can get data from the Agent Copilot workspace. Next, you can set up the iframe to send data back to the Flow.
## Send Data from the IFrame Back to the Flow
User actions inside the iframe, such as form submissions or button clicks, can trigger logic in the Agent Copilot Flow.
To send data from an iframe back to the Agent Copilot Flow, use the browser messaging API method `window.parent.postMessage()`. The Agent Copilot workspace receives this message and forwards it to the Flow using `SDK.postback`.
Only the workspace can call `SDK.postback`. The iframe itself can't call it directly because it runs in an isolated context.
The iframe sends a JSON object as data to the Agent Copilot workspace via `window.parent.postMessage()`.
```html theme={null}
```
The Agent Copilot workspace receives messages via an HTML tile controlled by the [Copilot: HTML Tile Node](/ai/agents/develop/node-reference/agent-copilot/set-html-tile), which listens for messages from the iframe.
The HTML Tile doesn't need to be visible, but it must exist in the workspace.
In this example:
* `window.parent.addEventListener` ensures the message is caught from the parent workspace.
* Only data with the `name` property is sent to the Flow.
* `SDK.postback` automatically wraps the data into the `_agentAssist` payload for the Flow.
```html theme={null}
```
The HTML Tile forwards the received data to the Agent Copilot Flow using `SDK.postback`.
The Flow receives the message payload in this JSON structure:
```json theme={null}
{
"data": {
"_cognigy": {
"_agentAssist": {
"type": "submit",
"payload": { "name": "John" }
}
}
}
}
```
You can access the data received from the iframe in the Flow via the Input object.
In the Agent Copilot Flow, add a Say Node and reference the payload using the following syntax:
```txt theme={null}
{{ input.data._cognigy._agentAssist.payload.name }}
```
This output is visible only to human agents in the Copilot workspace.
The sequence diagram illustrates how the data is sent from the iframe to the Flow via the workspace:
```mermaid theme={null}
sequenceDiagram
participant IFrame
participant Parent as Copilot Workspace
participant Flow as Agent Copilot Flow
IFrame->>Parent: window.parent.postMessage({ name: 'John' })
Parent->>Parent: HTML Tile receives message
Parent->>Flow: SDK.postback(event.data.name)
Flow-->>Flow: Process data
Flow-->>Flow: Access data via input object
```
```html theme={null}
```
## More Information
* [Copilot: HTML Tile](/ai/agents/develop/node-reference/agent-copilot/set-html-tile)
* [Copilot: Adaptive Card Tile](/ai/agents/develop/node-reference/agent-copilot/set-adaptive-card-tile)
* [Copilot: Send Data](/ai/agents/develop/node-reference/agent-copilot/send-data)
* [Copilot: Set Grid](/ai/agents/develop/node-reference/agent-copilot/set-grid)
* [Copilot Nodes](/ai/agents/develop/node-reference/agent-copilot/overview)
* [Copilot](/agent-copilot/overview)
## Description
This Node embeds external websites directly into the Agent Copilot workspace. To do that, specify a URL for the external content you want to display. You can present web pages, forms, or applications within the Agent Copilot workspace without redirecting human agents to an external site.
## Parameters
| Parameter | Type | Description |
| ---------- | ------------- | ----------------------------------------------------------- |
| Tile ID | CognigyScript | The ID that you created in the Agent Copilot configuration. |
| IFrame URL | URL | The URL to render inside the Widget. |
| JSON Data | JSON | The data to send to the iframe as a postMessage event. |
## Passing JSON Data into the IFrame
When you use a Copilot: IFrame Tile Node, JSON data is passed into the iframe code using the [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) method.
To receive and process the passed JSON in your widget, add an event listener inside the iframe content:
```js theme={null}
window.addEventListener("message", function (event) {
console.log("Content of message:", event.data);
// Handle the incoming JSON data here
});
```