Onglet de widget

Vue d’ensemble

Hébergez une petite page HTML qui charge le widget d’agent 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 — Le widget d’agent exécuté dans un onglet Teams

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 — Widget intégré dans un onglet Teams

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

Un agent ElevenLabs public dont l’authentification est désactivée (onglet Avancé des paramètres de l’agent). Les widgets l’exigent.
Un hébergement HTTPS pour un fichier HTML statique unique (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps, etc.).
L’autorisation, dans votre tenant, de charger une application Teams personnalisée (centre d’administration Teams → Gérer les applications → chargement d’application personnalisée), si vous utilisez l’option d’onglet personnalisé.

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

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.

Si votre Workspace utilise un environnement de résidence des données, ajoutez l’attribut server-location du widget afin qu’il se connecte à votre région. Consultez la personnalisation du widget pour connaître les valeurs prises en charge.

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.

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

{
  "$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 :

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

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 :

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 — Menu déroulant de l’onglet → Autorisations de l’application

É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 :

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