> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orova.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Configuration

> Customize the widget appearance and behavior

## All attributes

| Attribute            | Default                        | Description                                                           |
| -------------------- | ------------------------------ | --------------------------------------------------------------------- |
| `data-api-key`       | *required*                     | Your Orova API key                                                    |
| `data-agent-id`      | *required*                     | Agent ID to connect to                                                |
| `data-server-url`    | *required*                     | Orova API server URL                                                  |
| `data-mode`          | `chat`                         | Widget mode: `chat`, `voice`, `video`, `multi`                        |
| `data-position`      | `bottom-right`                 | Button position: `bottom-right` or `bottom-left`                      |
| `data-theme`         | `light`                        | Color theme: `light` or `dark`                                        |
| `data-primary-color` | `#111111`                      | Brand color for buttons and accents                                   |
| `data-title`         | `Orova`                        | Header title text                                                     |
| `data-subtitle`      | `We typically reply instantly` | Header subtitle text                                                  |
| `data-greeting`      | *(auto)*                       | Custom greeting message. If empty, fetches from agent's first message |

## Modes explained

### Chat mode

Text-only conversation. Users type messages and receive streaming responses.

```html theme={null}
<script ... data-mode="chat"></script>
```

### Voice mode

Shows a picker with Chat and Voice options. Users choose their preferred communication method.

```html theme={null}
<script ... data-mode="voice"></script>
```

### Video mode

Video call with a realistic avatar. Users see the avatar and can optionally enable their camera.

```html theme={null}
<script ... data-mode="video"></script>
```

### Multi mode

Shows a picker with Voice and Video options.

```html theme={null}
<script ... data-mode="multi"></script>
```

## Theming

### Light theme (default)

```html theme={null}
<script ...
  data-theme="light"
  data-primary-color="#312E56"
></script>
```

### Dark theme

```html theme={null}
<script ...
  data-theme="dark"
  data-primary-color="#6C63FF"
></script>
```

The `data-primary-color` affects:

* Floating action button background
* User message bubbles
* Header background
* Send button
* Active states and accents

## Positioning

```html theme={null}
<!-- Bottom right (default) -->
<script ... data-position="bottom-right"></script>

<!-- Bottom left -->
<script ... data-position="bottom-left"></script>
```

## Panel dimensions

The widget panel is 400px wide and 620px tall by default. On mobile screens (under 440px), it expands to fill the screen width with 80% viewport height.

## Branding

The widget shows "Powered by Orova" at the bottom. This links to [orova.ai](https://orova.ai).