# Agent flexible UI

> You're reading the Mindset v3 documentation. v3 is no longer sold; this is reference for existing customers. Mindset 4 docs are at /docs.

Enabling the flexible UI mode for an embedded agent

With **Flexible UI** mode, agents are no longer limited to a fixed chat window. Your agent can collapse into a button, minimized to its original state, and expand into full screen.

Please see the Embed agent with flexible UI demo

Here's a guide that describes how to enable the flexible UI mode for an embedded agent, along with the various possible parameters.

## Embedded agent default UI

By default, an embedded agent is displayed in an HTML container of your choice.

Please see the [Embed agent demo](https://docs4.mindset.ai/v3/deploy/sdk2/agent-demo)

## Enable the flexible UI mode

![Embed agent in flexible UI mode](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui.gif)

*Embed agent in flexible UI mode*

### How to enable the flexible UI mode ?

To enable flexible UI, the `<mindset-agent>` tag needs to be wrapped in `<mindset-container>`

```javascript
<mindset-container>  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

### Configurable attributes for the `<mindset-container>` tag

#### 1. agent-title

**agent-title** is the itle that will be visible as the button title, or header title.
if a string is not passed, default will be `Mindset Chat`.

```javascript
<mindset-container agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="background-color: rgb(255, 255, 255); display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-title='My agent title'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-agentitle.png)

*agent-title='My agent title'*

#### 2. agent-icon

**agent-icon** is the icon visible on the button or header with title. If the icon’s URL is not passed, the agent will not display any icon

```javascript
<mindset-container agent-icon="https://mindset-int.web.app/mindset-icon.png" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-icon='https://mindset-int.web.app/mindset-icon.png'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-agenicon.png)

*agent-icon='https\://mindset-int.web.app/mindset-icon.png'*

#### 3. agent-view-mode

This dictates the availability of agent view modes. **agent-view-mode** can be one of the following values:

&#x20;**chat-only**

This mode will display the agent in a chat-only view, without any full-screen mode.

```javascript
<mindset-container agent-view-mode="chat-only" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-view-mode='chat-only'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-viewmode-chat-only.gif)

*agent-view-mode='chat-only'*

&#x20;**tray-only**

This mode displays the agent in full-screen view, without any chat mode.

```javascript
<mindset-container agent-view-mode="tray-only" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-view-mode='tray-only'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-viewmode-tray-only.gif)

*agent-view-mode='tray-only'*

&#x20;**no-tray**

This mode disables the tray's full-screen view, hence when minimizing the agent in full-screen mode , it returns to the 'button' state.

```javascript
<mindset-container agent-view-mode="no-tray" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-view-mode='no-tray'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-viewmode-no-tray.gif)

*agent-view-mode='no-tray'*

&#x20;**all**

That is the default mode, which will display the agent in both chat and tray modes, allowing users to switch between them.

```javascript
<mindset-container agent-view-mode="all" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-view-mode='all'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui.gif)

*agent-view-mode='all'*

#### 4. agent-header-color-override

This parameter can accept text color or hex code. can be used to force override the background color of button, tray and header. This parameter takes priority over theme color.

```javascript
<mindset-container agent-header-color-override="blue" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-header-color-override='blue'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-agent-header-color-override.gif)

*agent-header-color-override='blue'*

#### 5. agent-text-color-override

This parameter can accept text color or hex code. can be used to force override the text color of button, tray and header. This parameter takes priority over theme color.

```javascript
<mindset-container agent-text-color-override="yellow" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

![agent-text-color-override='yellow'](https://docs4.mindset.ai/v3/assets/images/agent-flexible-ui-agent-text-color-override.png)

*agent-text-color-override='yellow'*