> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# Onglet de widget

## Vue d’ensemble

Hébergez une petite page HTML qui charge le [widget d’agent](/docs/fr/eleven-agents/customization/widget) et affichez-la sous forme d’**onglet Teams**. Les utilisateurs ouvrent l’onglet et parlent à l’agent dans le client Teams, sans numéro de téléphone ni téléphonie. C’est l’approche la plus légère ; utilisez-la pour les assistants internes en libre-service et les démos.

![Le widget d’agent ElevenLabs ouvert dans un onglet Microsoft Teams](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## Fonctionnement

Le widget est un composant web. Teams affiche la `contentUrl` d’un onglet dans une vue web (iframe), afin que le widget s’exécute exactement comme sur un site web, y compris la capture du microphone, à condition que la page puisse être intégrée dans Teams et obtienne l’autorisation d’accéder aux médias.

![Un utilisateur Teams ouvre un onglet dont la vue web affiche en iframe une page hébergée exécutant le widget d’agent ElevenLabs, qui transmet l’audio à ElevenLabs](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> Teams n’exécutera **pas** un `<script>` brut collé dans un chat, un message ou une page Loop. Le script du widget doit se trouver sur une page **que vous hébergez**, que Teams intègre ensuite sous forme d’onglet.

## Prérequis

1. Un [agent ElevenLabs](/docs/fr/eleven-agents/quickstart) **public** dont l’authentification est désactivée (onglet Avancé des paramètres de l’agent). Les widgets l’exigent.
2. Un hébergement HTTPS pour un fichier HTML statique unique (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps, etc.).
3. L’autorisation, dans votre tenant, de charger une application Teams personnalisée ([centre d’administration Teams → Gérer les applications](https://admin.teams.microsoft.com/policies/manage-apps) → chargement d’application personnalisée), si vous utilisez l’option d’onglet personnalisé.

## Étape 1 : créer la page du widget

Créez `agent-widget.html` avec l’intégration du widget et l’ID de votre agent :

**`agent-widget.html`**

```html title="agent-widget.html"
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Voice Agent</title>
  </head>
  <body style="margin:0">
    <elevenlabs-convai
      agent-id="<replace-with-agent_7101k5zvyjhmfg983brhmhkd98n6>"
    ></elevenlabs-convai>
    <script
      src="https://unpkg.com/@elevenlabs/convai-widget-embed"
      async
      type="text/javascript"
    ></script>
  </body>
</html>
```

Déployez-la sur votre hébergement HTTPS et vérifiez d’abord qu’elle se charge et que le microphone fonctionne dans un navigateur classique.

> **Note**
>
> Si votre Workspace utilise un environnement de [résidence des données](/docs/fr/overview/administration/data-residency), ajoutez l’attribut `server-location` du widget afin qu’il se connecte à votre région. Consultez la [personnalisation du widget](/docs/fr/eleven-agents/customization/widget) pour connaître les valeurs prises en charge.

> **Tip**
>
> Testez la page seule dans un navigateur avant de configurer Teams. Si le microphone n’y fonctionne pas, il ne fonctionnera pas non plus dans la vue web Teams.

## Étape 2 : l’ajouter à Teams

Deux options sont disponibles, par ordre croissant de fiabilité pour la voix.

### Option A : onglet Site web (la plus rapide, peut n’ouvrir qu’un lien)

Dans un chat ou un canal, sélectionnez **+ Ajouter un onglet → Site web**, collez votre URL HTTPS, puis enregistrez.

> **Warning**
>
> L’onglet **Site web** intégré ouvre parfois la page sous forme de lien externe au lieu de l’intégrer. Même lorsqu’elle est intégrée, l’accès au microphone peut être bloqué dans la vue web Teams pour ordinateur. Si la voix ne fonctionne pas, utilisez l’option B.

### Option B : application d’onglet personnalisée (recommandée pour la voix)

Une petite application Teams personnalisée déclare la page comme onglet statique **et** demande l’autorisation d’accéder aux médias, ce qui permet au microphone de fonctionner de manière fiable dans Teams.

#### Créer le manifeste

Créez `manifest.json`. Remplacez `your-domain.com` par votre hôte et définissez un GUID unique pour `id` :

**`manifest.json`**

```json title="manifest.json"
{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
  "manifestVersion": "1.19",
  "version": "1.0.0",
  "id": "11111111-1111-1111-1111-111111111111",
  "developer": {
    "name": "ElevenLabs",
    "websiteUrl": "https://your-domain.com",
    "privacyUrl": "https://your-domain.com/privacy",
    "termsOfUseUrl": "https://your-domain.com/terms"
  },
  "name": { "short": "Voice Agent", "full": "ElevenLabs Voice Agent" },
  "description": {
    "short": "ElevenLabs voice agent",
    "full": "Embedded ElevenLabs voice agent"
  },
  "icons": { "outline": "outline.png", "color": "color.png" },
  "accentColor": "#000000",
  "staticTabs": [
    {
      "entityId": "voice-agent",
      "name": "Voice Agent",
      "contentUrl": "https://your-domain.com/agent-widget.html",
      "websiteUrl": "https://your-domain.com/agent-widget.html",
      "scopes": ["personal"]
    }
  ],
  "devicePermissions": ["media"],
  "validDomains": ["your-domain.com", "unpkg.com", "elevenlabs.io", "*.elevenlabs.io"]
}
```

Les champs essentiels pour la voix sont **`devicePermissions: ["media"]`** (microphone) et l’ajout de chaque domaine auquel la page accède dans **`validDomains`** (`unpkg.com` pour le script du widget, `*.elevenlabs.io` pour l’agent).

#### Créer le package de l’application

Ajoutez un fichier `color.png` (192×192) et `outline.png` (32×32, transparent) à côté du manifeste, puis compressez le manifeste et les deux icônes à la **racine** de l’archive :

```bash
zip -j voice-agent.zip manifest.json color.png outline.png
```

#### Charger et ouvrir

Dans Teams : **Applications → Gérer vos applications → Charger une application → Charger une application personnalisée**, sélectionnez `voice-agent.zip`, puis ouvrez l’onglet **Voice Agent** et autorisez l’accès au microphone lorsque vous y êtes invité.

> **Tip**
>
> Les administrateurs Teams peuvent ignorer l’interface client et publier l’application dans toute l’organisation depuis PowerShell. Elle apparaîtra alors pour tous sous **Applications → Conçues pour votre organisation** :
>
> ```powershell
> Connect-MicrosoftTeams
> New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip
> ```

Si aucune invite ne s’affiche, ouvrez le menu déroulant de l’onglet et sélectionnez **Autorisations de l’application** pour accorder manuellement l’accès au microphone :

![Le menu déroulant de l’onglet Teams avec l’option Autorisations de l’application mise en évidence](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## Étape 3 : autoriser Teams à intégrer la page

Votre hébergement doit autoriser Teams à afficher la page dans une iframe. Si vous contrôlez les en-têtes de réponse, définissez :

```http
Content-Security-Policy: frame-ancestors 'self' https://teams.microsoft.com https://*.teams.microsoft.com https://*.cloud.microsoft;
```

Si Teams continue d’ouvrir la page dans un navigateur au lieu de l’intégrer, l’intégration iframe de la page est bloquée. Corrigez les paramètres CSP / `X-Frame-Options` sur votre hôte.

## Résolution des problèmes

#### L’onglet ouvre la page dans un navigateur au lieu de l’intégrer

L’affichage de la page dans une iframe est bloqué. Supprimez tout `X-Frame-Options: DENY/SAMEORIGIN` et définissez la CSP `frame-ancestors` ci-dessus pour autoriser les domaines Teams. L’application d’onglet personnalisée (option B) est également plus fiable que l’onglet Site web intégré.

#### Le widget se charge, mais le microphone ne fonctionne pas

Il s’agit de la couche d’autorisations de la vue web Teams. Utilisez l’**application d’onglet personnalisée** avec `"devicePermissions": ["media"]`, puis accordez à l’application l’autorisation d’accéder au microphone dans Teams (menu déroulant de l’onglet → **Autorisations de l’application**). Teams sur le web et Teams pour ordinateur se comportent différemment : testez les deux. En solution de repli, proposez un lien « Ouvrir dans le navigateur ».

#### Le widget n’apparaît jamais

Vérifiez que l’agent est **public** et que l’authentification est désactivée (paramètres **Avancé** de l’agent), et que `unpkg.com` et `*.elevenlabs.io` figurent dans `validDomains` du manifeste.

## Liens utiles

* [Personnalisation du widget](/docs/fr/eleven-agents/customization/widget)
* [Exigences relatives aux onglets Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Créer un onglet personnel](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Autorisations des appareils Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)