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

# SDK Widget

> Intégrez Orova sur n'importe quel site web avec le widget JavaScript

## Vue d'ensemble

Le widget Orova est un fichier JavaScript autonome qui ajoute un bouton flottant de chat/voix/vidéo à n'importe quel site web. Il gère toute l'interface utilisateur, les connexions WebRTC et la communication avec l'API.

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

## Référence complète des attributs

| Attribut             | Obligatoire | Par défaut                     | Description                                                             |
| -------------------- | ----------- | ------------------------------ | ----------------------------------------------------------------------- |
| `data-api-key`       | Oui         | —                              | Clé API Orova                                                           |
| `data-agent-id`      | Oui         | —                              | ID de l'agent                                                           |
| `data-server-url`    | Oui         | —                              | URL du serveur API                                                      |
| `data-mode`          | Non         | `chat`                         | `chat`, `voice`, `video`, `multi`                                       |
| `data-position`      | Non         | `bottom-right`                 | `bottom-right`, `bottom-left`                                           |
| `data-theme`         | Non         | `light`                        | `light`, `dark`                                                         |
| `data-primary-color` | Non         | `#111111`                      | Couleur de marque (hex)                                                 |
| `data-title`         | Non         | `Orova`                        | Titre de l'en-tête                                                      |
| `data-subtitle`      | Non         | `We typically reply instantly` | Sous-titre de l'en-tête                                                 |
| `data-greeting`      | Non         | *(auto)*                       | Message d'accueil personnalisé (remplace le premier message de l'agent) |

## Modes

### `chat` — Texte uniquement

Interface de chat simple avec saisie de message et réponses en streaming.

### `voice` — Chat + Sélecteur vocal

Affiche un écran de sélection où les utilisateurs choisissent entre le chat textuel et l'appel vocal.

### `video` — Appel vidéo

Appel vidéo avec un avatar réaliste. Comprend les commandes de mise en sourdine, de basculement de la caméra et de fin d'appel.

### `multi` — Sélecteur Voix + Vidéo

Affiche un écran de sélection où les utilisateurs choisissent entre l'appel vocal et l'appel vidéo.

## Style

Le widget crée son propre shadow DOM et n'entre pas en conflit avec le CSS de votre site. La propriété `data-primary-color` contrôle toutes les couleurs d'accentuation, notamment :

* Le bouton d'action flottant
* Les bulles de message de l'utilisateur
* L'arrière-plan de l'en-tête
* Le bouton d'envoi
* Les états actifs

## Compatibilité des navigateurs

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

Les appels vocaux WebRTC nécessitent l'autorisation du microphone. Les appels vidéo chargent automatiquement le SDK requis.