Widget-tabblad

Overzicht

Host een kleine HTML-pagina die de agentwidget 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 — De agentwidget in een Teams-tabblad

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.

Widget ingesloten in een Teams-tabblad

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

Een openbare ElevenLabs-agent met uitgeschakelde authenticatie (tabblad Advanced in de agentinstellingen). Widgets vereisen dit.
Een HTTPS-host voor één statisch HTML-bestand (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps enz.).
Toestemming in je tenant om een aangepaste Teams-app te uploaden (Teams-beheercentrum → Apps beheren → 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

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

Als je workspace zich in een omgeving met dataresidentie bevindt, voeg je het kenmerk server-location van de widget toe, zodat deze verbinding maakt met je regio — zie widgetaanpassing voor de ondersteunde waarden.

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.

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

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

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.

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:

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 — Dropdown van tabblad → App-machtigingen

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:

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.