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

# Widget-Tab

## Überblick

Hosten Sie eine kleine HTML-Seite, die das [Agent-Widget](/docs/de/eleven-agents/customization/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](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## 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](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> 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

1. Ein **öffentlicher** [ElevenLabs-Agent](/docs/de/eleven-agents/quickstart) mit deaktivierter Authentifizierung (Tab „Erweitert“ in den Agent-Einstellungen). Widgets erfordern dies.
2. Ein HTTPS-Host für eine einzelne statische HTML-Datei (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps usw.).
3. Die Berechtigung in Ihrem Tenant, eine benutzerdefinierte Teams-App hochzuladen ([Teams Admin Center → Apps verwalten](https://admin.teams.microsoft.com/policies/manage-apps) → Upload benutzerdefinierter Apps), falls Sie die Option für benutzerdefinierte Tabs verwenden.

## Schritt 1 — Widget-Seite erstellen

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

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

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.

> **Note**
>
> Wenn Ihr Workspace eine [Datenresidenz](/docs/de/overview/administration/data-residency) 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](/docs/de/eleven-agents/customization/widget).

> **Tip**
>
> 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.

> **Warning**
>
> 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`**

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

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:

```bash
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.

> **Tip**
>
> 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**:
>
> ```powershell
> 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
](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

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

```http
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.

#### Das Widget wird geladen, aber das Mikrofon funktioniert nicht

Dies liegt an der Berechtigungsebene der Teams-Webview. Verwenden Sie die **benutzerdefinierte Tab-App** mit `"devicePermissions": ["media"]` und gewähren Sie der App in Teams Mikrofonberechtigung (Tab-Dropdown → **App-Berechtigungen**). Teams im Web und Teams auf dem Desktop verhalten sich unterschiedlich — testen Sie beides. Bieten Sie alternativ einen Link „Im Browser öffnen“ an.

#### Das Widget erscheint nie

Prüfen Sie, ob der Agent **öffentlich** ist und die Authentifizierung deaktiviert wurde (Agent-Einstellungen unter **Erweitert**) und ob `unpkg.com` und `*.elevenlabs.io` in `validDomains` des Manifests enthalten sind.

## Nützliche Links

* [Widget-Anpassung](/docs/de/eleven-agents/customization/widget)
* [Anforderungen für Teams-Tabs](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Persönlichen Tab erstellen](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Teams-Geräteberechtigungen](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)