> ## 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 SDK

> Embed Orova on any website with the JavaScript widget

## Overview

The Orova widget is a self-contained JavaScript file that adds a floating chat/voice/video button to any website. It handles all the UI, WebRTC connections, and API communication.

## Installation

```html theme={null}
<script
  src="https://app.orova.ai/widget/orova-widget.js"
  data-api-key="YOUR_API_KEY"
  data-agent-id="AGENT_ID"
  data-server-url="https://app.orova.ai"
  data-mode="voice"
  data-title="Acme Support"
  data-theme="light"
  data-primary-color="#312E56"
  data-position="bottom-right"
  data-subtitle="We typically reply instantly"
></script>
```

## Full attribute reference

| Attribute            | Required | Default                        | Description                                       |
| -------------------- | -------- | ------------------------------ | ------------------------------------------------- |
| `data-api-key`       | Yes      | —                              | Orova API key                                     |
| `data-agent-id`      | Yes      | —                              | Agent ID                                          |
| `data-server-url`    | Yes      | —                              | API server URL                                    |
| `data-mode`          | No       | `chat`                         | `chat`, `voice`, `video`, `multi`                 |
| `data-position`      | No       | `bottom-right`                 | `bottom-right`, `bottom-left`                     |
| `data-theme`         | No       | `light`                        | `light`, `dark`                                   |
| `data-primary-color` | No       | `#111111`                      | Brand color (hex)                                 |
| `data-title`         | No       | `Orova`                        | Header title                                      |
| `data-subtitle`      | No       | `We typically reply instantly` | Header subtitle                                   |
| `data-greeting`      | No       | *(auto)*                       | Custom greeting (overrides agent's first message) |

## Modes

### `chat` — Text only

Simple chat interface with message input and streaming responses.

### `voice` — Chat + Voice picker

Shows a selection screen where users choose between text chat and voice call.

### `video` — Video call

Video call with a realistic avatar. Includes mute, camera toggle, and end call controls.

### `multi` — Voice + Video picker

Shows a selection screen where users choose between voice call and video call.

## Styling

The widget creates its own shadow DOM and doesn't conflict with your site's CSS. The `data-primary-color` controls all accent colors including:

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

## Browser support

* Chrome 80+
* Firefox 80+
* Safari 14+
* Edge 80+

WebRTC voice calls require microphone permission. Video calls load the required SDK automatically.