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

## Overzicht

Host een kleine HTML-pagina die de [agentwidget](/docs/nl/eleven-agents/customization/widget) laadt en toon deze als een **Teams-tabblad**. Gebruikers openen het tabblad en praten met de agent in de Teams-client — zonder telefoonnummer of telefonie. Dit is de lichtste aanpak; gebruik deze voor interne selfserviceassistenten en demo's.

![De ElevenLabs-agentwidget geopend in een Microsoft Teams-
tabblad](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## Hoe het werkt

De widget is een webcomponent. Teams rendert de `contentUrl` van een tabblad in een webview (iframe), zodat de widget precies werkt zoals op een website — inclusief microfoonopname, mits de pagina in Teams mag worden ingesloten en mediatoestemming heeft.

![Teams-gebruiker opent een tabblad waarvan de webview een gehoste pagina met de ElevenLabs-agentwidget in een iframe weergeeft, die audio naar ElevenLabs streamt](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> Teams voert **geen** onbewerkt `<script>` uit dat je in een chat, bericht of Loop-pagina plakt. Het widget-
> script moet op een pagina staan **die je host** en die Teams vervolgens als tabblad insluit.

## Vereisten

1. Een **openbare** [ElevenLabs-agent](/docs/nl/eleven-agents/quickstart) met uitgeschakelde authenticatie (tabblad Advanced in de agentinstellingen). Widgets vereisen dit.
2. Een HTTPS-host voor één statisch HTML-bestand (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps enz.).
3. Toestemming in je tenant om een aangepaste Teams-app te uploaden ([Teams-beheercentrum → Apps beheren](https://admin.teams.microsoft.com/policies/manage-apps) → aangepaste app uploaden), als je de optie voor een aangepast tabblad gebruikt.

## Stap 1 — Maak de widgetpagina

Maak `agent-widget.html` met de widgetinsluiting en je 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>
```

Deploy deze naar je HTTPS-host en controleer eerst of deze laadt en de microfoon werkt in een normale browser.

> **Note**
>
> Als je workspace zich in een omgeving met [dataresidentie](/docs/nl/overview/administration/data-residency)
> bevindt, voeg je het kenmerk `server-location` van de widget toe, zodat deze verbinding maakt met je regio — zie
> [widgetaanpassing](/docs/nl/eleven-agents/customization/widget) voor de ondersteunde waarden.

> **Tip**
>
> Test de pagina losstaand in een browser voordat je Teams gebruikt. Als de microfoon daar niet werkt,
> werkt deze ook niet in de Teams-webview.

## Stap 2 — Voeg deze toe aan Teams

Je hebt twee opties, in oplopende volgorde van betrouwbaarheid voor spraak.

### Optie A — Websitetabblad (snelst, mogelijk alleen als link)

In een chat of kanaal: **+ Een tabblad toevoegen → Website**, plak je HTTPS-URL en sla op.

> **Warning**
>
> Het ingebouwde tabblad **Website** opent de pagina soms als externe link in plaats van deze in te sluiten
> — en zelfs wanneer deze is ingesloten, kan microfoontoegang in de Teams-desktopwebview geblokkeerd zijn. Als spraak
> niet werkt, gebruik dan optie B.

### Optie B — Aangepaste tabbladapp (aanbevolen voor spraak)

Een kleine aangepaste Teams-app definieert de pagina als een statisch tabblad **en** vraagt mediatoestemming aan, waardoor de microfoon betrouwbaar werkt binnen Teams.

#### Maak het manifest

Maak `manifest.json`. Vervang `your-domain.com` door je host en stel een unieke GUID in voor `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"]
}
```

De belangrijkste velden voor spraak zijn **`devicePermissions: ["media"]`** (microfoon) en het vermelden van elk domein dat de pagina gebruikt in **`validDomains`** (`unpkg.com` voor het widgetscript, `*.elevenlabs.io` voor de agent).

#### Verpak de app

Voeg een `color.png` (192×192) en `outline.png` (32×32, transparant) toe naast het manifest en zip vervolgens het manifest en de twee pictogrammen in de **hoofdmap** van het archief:

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

#### Uploaden en openen

In Teams: **Apps → Je apps beheren → Een app uploaden → Een aangepaste app uploaden**, selecteer `voice-agent.zip`, open daarna het tabblad **Voice Agent** en geef microfoontoegang wanneer daarom wordt gevraagd.

> **Tip**
>
> Teams-beheerders kunnen de clientinterface overslaan en de app vanuit PowerShell publiceren voor de hele organisatie — deze verschijnt dan voor iedereen onder **Apps → Gebouwd voor je organisatie**:
>
> ```powershell
> Connect-MicrosoftTeams
> New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip
> ```

Als er geen melding verschijnt, open je de dropdown van het tabblad en kies je **App-machtigingen** om handmatig microfoontoegang te verlenen:

![Het dropdownmenu van het Teams-tabblad met App-machtigingen
gemarkeerd](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## Stap 3 — Sta Teams toe de pagina in te sluiten

Je host moet Teams toestaan de pagina in een iframe weer te geven. Als je de responseheaders beheert, stel je het volgende in:

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

Als Teams de pagina in een browser blijft openen in plaats van deze in te sluiten, wordt insluiting in een iframe voor de pagina geblokkeerd — los de CSP / `X-Frame-Options` op je host op.

## Problemen oplossen

#### Het tabblad opent de pagina in een browser in plaats van deze in te sluiten

De pagina wordt geblokkeerd voor weergave in een iframe. Verwijder alle `X-Frame-Options: DENY/SAMEORIGIN` en stel
de hierboven getoonde `frame-ancestors`-CSP in om de Teams-domeinen toe te staan. De aangepaste tabbladapp (optie B)
is ook betrouwbaarder dan het ingebouwde Website-tabblad.

#### De widget laadt, maar de microfoon werkt niet

Dit komt door de toestemmingslaag van de Teams-webview. Gebruik de **aangepaste tabbladapp** met
`"devicePermissions": ["media"]` en geef de app in Teams microfoontoestemming (dropdown van tabblad
→ **App-machtigingen**). Teams op het web en Teams voor desktop gedragen zich anders — test beide. Bied als
alternatief een link "Openen in browser" aan.

#### De widget verschijnt nooit

Controleer of de agent **openbaar** is met uitgeschakelde authenticatie (agentinstellingen onder **Advanced**), en
of `unpkg.com` en `*.elevenlabs.io` in `validDomains` van het manifest staan.

## Handige links

* [Widgetaanpassing](/docs/nl/eleven-agents/customization/widget)
* [Vereisten voor Teams-tabbladen](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Een persoonlijk tabblad maken](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Apparaattoestemmingen in Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)