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

# Installation du widget

> Ajoutez le widget Orova à votre site web

## Balise script

Ajoutez ceci à votre HTML, juste avant la balise `</body>` de fermeture :

```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"
></script>
```

### Attributs requis

| Attribut          | Description                         |
| ----------------- | ----------------------------------- |
| `data-api-key`    | Votre clé API Orova                 |
| `data-agent-id`   | L'ID de l'agent auquel se connecter |
| `data-server-url` | L'URL de votre serveur API Orova    |

<Warning>
  Les trois attributs requis doivent être définis, sinon le widget ne se chargera pas.
</Warning>

## React / Next.js

```tsx theme={null}
export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <script
          src="https://app.orova.ai/widget/orova-widget.js"
          data-api-key={process.env.NEXT_PUBLIC_OROVA_API_KEY}
          data-agent-id="AGENT_ID"
          data-server-url={process.env.NEXT_PUBLIC_OROVA_SERVER_URL}
          data-mode="voice"
        />
      </body>
    </html>
  );
}
```

## Vue

```html theme={null}
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://app.orova.ai/widget/orova-widget.js';
    script.setAttribute('data-api-key', 'YOUR_API_KEY');
    script.setAttribute('data-agent-id', 'AGENT_ID');
    script.setAttribute('data-server-url', 'https://app.orova.ai');
    script.setAttribute('data-mode', 'voice');
    document.body.appendChild(script);
  }
}
</script>
```

## WordPress

Ajoutez la balise script au fichier `footer.php` de votre thème ou utilisez un plugin comme « Insert Headers and Footers » pour l'ajouter à l'échelle du site.

## Vérifier l'installation

Ouvrez la console développeur de votre navigateur. Vous devriez voir :

```
[Orova Widget] Initialized
```

Si vous voyez `Missing required attributes`, vérifiez que les trois attributs requis sont bien définis.
