Widget-Tab

Betten Sie das ElevenLabs-Agent-Widget für Click-to-Talk in einen Microsoft Teams-Tab ein.

Überblick

Hosten Sie eine kleine HTML-Seite, die das Agent-Widget lädt, und stellen Sie sie als Teams-Tab bereit. Benutzer öffnen den Tab und sprechen im Teams-Client mit dem Agenten — ohne Telefonnummer oder Telefonie. Dies ist der schlankste Ansatz; verwenden Sie ihn für interne Self-Service-Assistenten und Demos.

Das ElevenLabs-Agent-Widget geöffnet in einem Microsoft Teams-
Tab — Das Agent-Widget in einem Teams-Tab

So funktioniert es

Das Widget ist eine Webkomponente. Teams rendert die contentUrl eines Tabs in einer Webview (iframe), sodass das Widget genau wie auf einer Website läuft — einschließlich Mikrofonaufnahme, sofern die Seite in Teams eingebettet werden darf und Medienberechtigung erhält.

Teams-Benutzer öffnet einen Tab, dessen Webview eine gehostete Seite mit dem ElevenLabs-Agent-Widget per iframe einbettet, das Audio zu ElevenLabs streamt — Widget in einen Teams-Tab eingebettet

Teams führt kein rohes <script> aus, das in einen Chat, eine Nachricht oder eine Loop-Seite eingefügt wurde. Das Widget-Skript muss auf einer Seite liegen, die Sie hosten und die Teams dann als Tab einbettet.

Anforderungen

Ein öffentlicher ElevenLabs-Agent mit deaktivierter Authentifizierung (Tab „Erweitert“ in den Agent-Einstellungen). Widgets erfordern dies.
Ein HTTPS-Host für eine einzelne statische HTML-Datei (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps usw.).
Die Berechtigung in Ihrem Tenant, eine benutzerdefinierte Teams-App hochzuladen (Teams Admin Center → Apps verwalten → Upload benutzerdefinierter Apps), falls Sie die Option für benutzerdefinierte Tabs verwenden.

Erstellen Sie agent-widget.html mit der Widget-Einbettung und Ihrer Agent-ID:

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>

Stellen Sie die Seite auf Ihrem HTTPS-Host bereit und prüfen Sie zuerst, ob sie geladen wird und das Mikrofon in einem normalen Browser funktioniert.

Wenn Ihr Workspace eine Datenresidenz verwendet, fügen Sie das Attribut server-location des Widgets hinzu, damit es sich mit Ihrer Region verbindet — unterstützte Werte finden Sie unter Widget-Anpassung.

Testen Sie die Seite eigenständig in einem Browser, bevor Sie Teams konfigurieren. Wenn das Mikrofon dort nicht funktioniert, funktioniert es auch nicht in der Teams-Webview.

Schritt 2 — Zu Teams hinzufügen

Sie haben zwei Optionen, in aufsteigender Reihenfolge der Zuverlässigkeit für Sprache.

Option A — Website-Tab (am schnellsten, möglicherweise nur als Link)

Wählen Sie in einem Chat oder Kanal + Tab hinzufügen → Website, fügen Sie Ihre HTTPS-URL ein und speichern Sie.

Der integrierte Tab Website öffnet die Seite manchmal als externen Link, statt sie einzubetten — und selbst bei Einbettung kann der Mikrofonzugriff in der Teams-Desktop-Webview blockiert sein. Wenn Sprache nicht funktioniert, verwenden Sie Option B.

Option B — Benutzerdefinierte Tab-App (für Sprache empfohlen)

Eine kleine benutzerdefinierte Teams-App deklariert die Seite als statischen Tab und fordert Medienberechtigung an. Dadurch funktioniert das Mikrofon in Teams zuverlässig.

Manifest erstellen

Erstellen Sie manifest.json. Ersetzen Sie your-domain.com durch Ihren Host und legen Sie eine eindeutige GUID für id fest:

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"]
}

Die wichtigen Felder für Sprache sind devicePermissions: ["media"] (Mikrofon) und die Auflistung jeder Domain, die die Seite verwendet, in validDomains (unpkg.com für das Widget-Skript, *.elevenlabs.io für den Agenten).

App paketieren

Fügen Sie neben dem Manifest eine color.png (192×192) und outline.png (32×32, transparent) hinzu. Packen Sie dann das Manifest und die beiden Icons im Stammverzeichnis des Archivs als ZIP:

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

Hochladen und öffnen

In Teams: Apps → Ihre Apps verwalten → App hochladen → Benutzerdefinierte App hochladen, wählen Sie voice-agent.zip aus. Öffnen Sie dann den Tab Voice Agent und gewähren Sie Mikrofonzugriff, wenn Sie dazu aufgefordert werden.

Teams-Administratoren können die Client-Oberfläche überspringen und die App über PowerShell in der gesamten Organisation veröffentlichen — sie erscheint dann für alle unter Apps → Für Ihre Organisation erstellt:

Connect-MicrosoftTeams
New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip

Wenn keine Aufforderung erscheint, öffnen Sie das Dropdown-Menü des Tabs und wählen Sie App-Berechtigungen, um Mikrofonzugriff manuell zu gewähren:

Das Dropdown-Menü des Teams-Tabs mit hervorgehobenen App-Berechtigungen — Tab-Dropdown → App-Berechtigungen

Schritt 3 — Teams das Einbetten der Seite erlauben

Ihr Host muss Teams erlauben, die Seite per iframe einzubetten. Wenn Sie Response-Header steuern können, setzen Sie:

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

Wenn Teams die Seite weiterhin in einem Browser öffnet, statt sie einzubetten, wird die Seite für die iframe-Einbettung blockiert — korrigieren Sie die CSP / X-Frame-Options auf Ihrem Host.

Fehlerbehebung

Der Tab öffnet die Seite in einem Browser, statt sie einzubetten

Die Seite wird für iframe-Einbettung blockiert. Entfernen Sie alle X-Frame-Options: DENY/SAMEORIGIN und setzen Sie die oben gezeigte frame-ancestors-CSP, um die Teams-Domains zu erlauben. Die benutzerdefinierte Tab-App (Option B) ist außerdem zuverlässiger als der integrierte Website-Tab.