# iFrame and Apps embedding

> Embed your conversational agent into web applications using iFrame. Use this approach to add conversational agents to third-party applications or to UiPath Apps using the iFrame component.

## Overview

Embed your conversational agent into web applications using iFrame. Use this approach to add conversational agents to third-party applications or to UiPath Apps using the iFrame component.

**Intended users:** Developers and administrators who want to embed conversational agents into custom web applications or UiPath Apps.

## Feature availability

| Feature | Available |
|---------|:---------:|
| Start new chat | ✅ |
| Chat history | ✅ |
| Delete chat session | ✅ |
| Settings | ✅ |
| Starting prompts | ✅ |
| File uploads | ✅ |
| Citations | ✅* |
| HTML preview | ✅ |
| Copy response | ✅ |
| Feedback (thumbs) | ✅ |
| Debug dump | ❌ |

*\* The citation viewer does not work when the iFrame is embedded within a UiPath App.*

## Prerequisites

To embed a conversational agent, complete the following setup steps:

### Admin or developer setup
1. Publish the conversational agent to your desired Orchestrator folder.
2. Retrieve the agent release ID from Instance Management.
3. For UiPath Apps, create an Apps project in UiPath Studio.
4. For third-party apps, ensure the web application supports iFrame embedding.

### Finding the Agent ID
1. In Instance Management, navigate to **Agents &gt; Deployed agents**.
2. Select **Chat** for the desired agent.
3. Copy the agent ID from the URL. For example, in the URL `https://cloud.uipath.com/conversationalagents/agents_/deployed/chat/342061`, the agent ID is `342061`.

### User requirements
* **Authenticated users** must have a UiPath account with permission to access the agent. 
* A**nonymous users** must have access to the application or surface where the agent is embedded.

## Embedding the agent

### URL construction

Set the iFrame source to a URL with the following format:

```
https://cloud.uipath.com/<organization>/<tenant>/autopilotforeveryone_/conversational-agents/?agentId=<agent_id>&mode=<mode>
```

:::note
The organization and tenant name are case-sensitive.
:::

### URL parameters

| Parameter | Required | Description |
|-----------|:--------:|-------------|
| `agentId` | Yes | The Release ID of the published agent |
| `mode` | No | `embedded` for right-rail experience, `fullscreen` for full-screen (default: `fullscreen`) |
| `title` | No | Title displayed in chat header (default: agent name) |
| `welcomeTitle` | No | Title for first-run welcome screen |
| `welcomeDescription` | No | Description for first-run welcome screen |
| `suggestions` | No | Array of suggested prompts for first-run |
| `showHistory` | No | Show/hide chat history panel (default: `true`) |

### Example URLs

#### Basic embedded mode
```
https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded
```

#### With welcome message and suggestions
```
https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded&title=HR Assistant&welcomeTitle=Welcome!&welcomeDescription=I can help you with HR questions&suggestions=["What is the PTO policy?","How do I submit expenses?"]
```

### Embedding in UiPath Apps

To embed a conversational agent in UiPath Apps, use the iFrame component.

1. Open your App in UiPath Apps Studio.
2. Add an **iFrame** component to your page.
3. Set the iFrame **Source** property to the constructed URL.
4. Publish the app.
   
   ![Apps embedding setup](https://dev-assets.cms.uipath.com/assets/images/agents/apps-embedding-4d9c9916.webp)

When embedding a conversational agent in UiPath Apps, escape the suggestions array by using double quotation marks, as shown in the following example:

```
suggestions=[""What is the PTO policy?"",""How do I submit expenses?""]
```

This is required because UiPath Apps validates the value as a string.

### Embedding in third-party applications

You can embed a conversational agent in any web application that supports iFrame embedding.

#### HTML example

```html
<iframe
  src="https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>
```

#### Considerations
* **Cross-origin policies**: Ensure your application's Content Security Policy allows embedding from `uipath.com`.
* **Responsive design**: Configure appropriate width and height values to ensure proper rendering across screen sizes.
* **Clipboard access**: Include `allow="clipboard-write"` to enable the copy response feature.

## Chat features

The embedded chat experience uses the [Instance Management](https://docs.uipath.com/agents/automation-cloud/latest/user-guide/conversational-agents-instance-management) Chat UI, providing the same chat functionality, with the following exceptions and limitations.

## Limitations

The following features are not available in embedded mode:

| Feature | Notes |
|---------|-------|
| Citations | Citation preview is not available |
| Debug dump | Not available. Use Instance Management for debugging. |

## Authentication options

### Authenticated users

For internal users with UiPath accounts:

* Users authenticate using standard UiPath authentication.
* The agent has access to the user’s identity information, such as name and email address.
* Consumption is tracked against the user’s license.

### Anonymous users

For external or unauthenticated scenarios:

* A confidential external application must be configured in the Admin portal.
* A token endpoint hosted by your organization is required.
* No individual user license is required.
* Consumption is deducted from the tenant’s unit pool.

For setup instructions, refer to [Anonymous access setup](https://docs.uipath.com/agents/automation-cloud/latest/user-guide/conversational-agents-anonymous-access).

For licensing details, refer to [Licensing](https://docs.uipath.com/agents/automation-cloud/latest/user-guide/conversational-agents-licensing).

:::warning
Anonymous access allows users without UiPath accounts to interact with your agent. We highly recommend gating anonymous agents behind your own portal or login to mitigate abuse.
:::

## Troubleshooting

### iFrame not loading

* Verify the URL is correctly constructed.
* Check that the agent ID is valid.
* Ensure the agent is published and running.
* Check browser console for Content Security Policy errors.

### Copy not working

* Ensure the iFrame includes `allow="clipboard-write"` attribute.
* Check browser permissions for clipboard access.

## Next steps

* [Anonymous access setup](https://docs.uipath.com/agents/automation-cloud/latest/user-guide/conversational-agents-anonymous-access): Enable access for users without UiPath accounts
* [Instance Management](https://docs.uipath.com/agents/automation-cloud/latest/user-guide/conversational-agents-instance-management): Full feature reference and debugging
