> ## Documentation Index
> Fetch the complete documentation index at: https://docs-classic.cognigy.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Copilot: HTML Tile
> Use the Copilot HTML Tile Node to display custom HTML content in the Agent Copilot workspace.
[Updated in 2026.21](https://docs-classic.cognigy.com/release-notes/2026.21.md)
## Description
This Node displays HTML content in the Agent Copilot workspace. You can design custom layouts to present information to a human agent. HTML content may include text, images, videos, links, and scripts. The Set HTML Tile Node is useful for displaying complex information.
Technically, the HTML content will be injected into an [iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) on the workspace side, so any general restrictions on iFrames also apply to this case.
## Parameters
| Parameter | Type | Description |
| - | - | - |
| Tile ID | CognigyScript | The ID that you created in the Agent Copilot configuration. |
| HTML Content | HTML | The HTML content to render inside the Widget. |
| JSON Data | JSON | The data to send to the iframe as a postMessage event. |
## Using React or Angular
In the Copilot: HTML Tile Node, you can enhance your HTML content by utilizing the [React](https://react.dev/) or [Angular](https://angular.dev/) libraries.
These libraries allow you to seamlessly display dynamic widgets within your workspace.
To use these libraries in the Copilot: HTML Tile Node, you need to include them in your HTML code.
> [accordion] Example
>
> ```html theme={null}
>
>
>
>
>
> Minimal React Widget
>
>
>
>
>
>
>
>
>
>
>
> ```
## Receiving JSON Data from the Flow
When you use a Copilot: HTML Tile, JSON data is passed into the HTML 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 into the Copilot: HTML Tile Node and handle the data accordingly.
```js theme={null}
window.addEventListener("message", function (event) {
console.log("Content of message: " + event.data);
});
```
## Send JSON Data Back to the Flow
You can send data back to the Flow by using the Postback feature.
> [accordion] Postback
>
> The Postback feature allows you to send data either back to the Flow or chat, or directly to the widget interface. This feature can be useful for updating the state of your widget based on human agent interactions. These interactions can include actions such as submitting forms, updating display elements, or notifying the system of changes made by the human agent.
>
> The Postback feature can be configured in the following ways:
>
> * Using SDK.postback
> * Using the Copilot: Send Data Node
>
> **Using SDK.postback**
>
> Follow these steps to implement postback for your widget:
>
> 1. Add the `SDK.postback` function to the HTML page. Make sure this code is included after the SDK script is loaded:
>
> > [tab] Send a String
> >
> > ```html theme={null}
> >
> > ```
>
> > [tab] Send an Object
> >
> > ```js theme={null}
> >
> > ```
>
> 2. Click the button in the widget in the Agent Copilot workspace. Triggering this action will send an injected message formatted as follows:
> ```json theme={null}
> {
> "data": {
> "_cognigy": {
> "_agentAssist": {
> "type": "submit",
> "payload": "value"
> }
> }
> }
> }
> ```
>
> To allow human agents to view this object, add `{{ input.data._cognigy._agentAssist }}` to the **Text** field in the Say Node of your Agent Copilot Flow.
> This Node should be placed below the Node with the `SDK.postback` function.
> The output will be available in the chat message and visible only to human agents.
>
> **Example**
>
> In this example, the `SDK.postback` function sends the value of `name` back to the user.
> If `name` is falsy, meaning the user did not enter a name, the `else` block is executed, and the function calls `setMessage('Please enter your name.');`.
> This message will appear in the widget, prompting the user to provide their name and reminding them of the required input.
>
> ```html theme={null}
>
>
>
>
>
> Minimal React Widget
>
>
>
>
>
>
>
>
>
>
>
> ```
>
> **Using the Copilot: Send Data Node**
>
> In the Agent Copilot Flow, below the Copilot: HTML Tile Node, add a [Copilot: Send Data Node](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/send-data.md). In the **JSON** field of the Copilot: Send Data Node, specify the parameters you want to pass as metadata to the Copilot: HTML Tile Node to update the content.
## End Agent Copilot Session
Use the `SDK.endSession` function to end an Agent Copilot session that stays open after the human agent resolves the conversation.
> [accordion] End Session
>
> The `SDK.endSession` function applies only when **End Session On Handover Close** is deactivated in the [Copilot section](https://docs-classic.cognigy.com/agent-copilot/configure/copilot-section.md#parameters) of the Endpoint settings.
>
> The function takes no arguments. If you call it while the handover is still active, the session isn't ended.
>
> **Example**
>
> In this example, the **Submit** button sends the entered text to the Agent Copilot Flow with `SDK.postback`, and the **End session** button ends the open session with `SDK.endSession`. The function returns a `Promise`, so the widget can show whether the Agent Copilot workspace accepted or rejected the request.
>
> ```html theme={null}
>
>
>
>
>
>
> ```
>
> To display a reply from the Agent Copilot Flow in the widget, use a [Copilot: Send Data Node](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/send-data.md) below the Copilot: HTML Tile Node.
## More Information
* [Copilot: Adaptive Card Tile](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/set-adaptive-card-tile.md)
* [Copilot: IFrame Tile](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/set-iframe-tile.md)
* [Copilot: Send Data](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/send-data.md)
* [Copilot: Set Grid](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/set-grid.md)
* [Agent Copilot Nodes](https://docs-classic.cognigy.com/ai/agents/develop/node-reference/agent-copilot/overview)
* [Agent Copilot](https://docs-classic.cognigy.com/agent-copilot/overview.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.