Hoppa till navigering
DistribueraTelefoniMicrosoft Teams

Widget-flik

Bädda in ElevenLabs-agentwidgeten i en Microsoft Teams-flik för klicka-för-att-prata.

Översikt

Hosta en liten HTML-sida som laddar agentwidgeten och visa den som en Teams-flik. Användare öppnar fliken och pratar med agenten i Teams-klienten — inget telefonnummer eller telefoni behövs. Detta är den enklaste metoden; använd den för interna självserviceassistenter och demonstrationer.

ElevenLabs agentwidget öppen i en Microsoft Teams- flik

Agentwidgeten som körs i en Teams-flik

Så fungerar det

Widgeten är en webbkomponent. Teams renderar en fliks contentUrl i en webview (iframe), så widgeten körs precis som på en webbplats — inklusive mikrofonupptagning, förutsatt att sidan får bäddas in i Teams och beviljas mediebehörighet.

Teams-användare öppnar en flik vars webview visar en hostad sida med ElevenLabs agentwidget, som strömmar ljud till ElevenLabs
Widget inbäddad i en Teams-flik

Teams kommer inte att köra ett rått <script> som klistras in i en chatt, ett meddelande eller en Loop-sida. Widgetens skript måste finnas på en sida som du hostar, vilken Teams sedan bäddar in som en flik.

Krav

  1. En offentlig ElevenLabs-agent med autentisering inaktiverad (fliken Avancerat i agentinställningarna). Widgetar kräver detta.
  2. En HTTPS-host för en enda statisk HTML-fil (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps osv.).
  3. Behörighet i din klientorganisation att ladda upp en anpassad Teams-app (Teams administrationscenter → Hantera appar → uppladdning av anpassad app), om du använder alternativet med anpassad flik.

Steg 1 — Skapa widgetsidan

Skapa agent-widget.html med widgetinbäddningen och ditt 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>

Distribuera den till din HTTPS-host och kontrollera först att den laddas och att mikrofonen fungerar i en vanlig webbläsare.

Om din arbetsyta finns i en miljö med dataresidens lägger du till widgetens attribut server-location så att den ansluter till din region — se anpassning av widgeten för vilka värden som stöds.

Testa sidan fristående i en webbläsare innan du börjar med Teams. Om mikrofonen inte fungerar där, fungerar den inte heller i Teams webview.

Steg 2 — Lägg till den i Teams

Du har två alternativ, i stigande grad av tillförlitlighet för röst.

Alternativ A — Webbplatsflik (snabbast, kan vara endast länk)

I en chatt eller kanal väljer du + Lägg till en flik → Webbplats, klistrar in din HTTPS-URL och sparar.

Den inbyggda fliken Webbplats öppnar ibland sidan som en extern länk i stället för att bädda in den — och även när den bäddas in kan mikrofonåtkomst i Teams skrivbords-webview blockeras. Om rösten inte fungerar använder du alternativ B.

Alternativ B — Anpassad flikapp (rekommenderas för röst)

En liten anpassad Teams-app deklarerar sidan som en statisk flik och begär mediebehörighet, vilket gör att mikrofonen fungerar tillförlitligt i Teams.

1

Skapa manifestet

Skapa manifest.json. Ersätt your-domain.com med din host och ange ett unikt GUID för 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"]
}

Nyckelfälten för röst är devicePermissions: ["media"] (mikrofon) och att lista varje domän sidan använder i validDomains (unpkg.com för widgetskriptet, *.elevenlabs.io för agenten).

2

Paketera appen

Lägg till en color.png (192×192) och outline.png (32×32, transparent) bredvid manifestet, och zippa sedan manifestet och de två ikonerna i arkivets rot:

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

Ladda upp och öppna

I Teams: Appar → Hantera dina appar → Ladda upp en app → Ladda upp en anpassad app, välj voice-agent.zip, öppna sedan fliken Voice Agent och bevilja mikrofonåtkomst när du uppmanas.

Teams-administratörer kan hoppa över klientgränssnittet och publicera appen för hela organisationen från PowerShell — den visas då för alla under Appar → Skapad för din organisation:

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

Om ingen uppmaning visas öppnar du flikens rullgardinsmeny och väljer Appbehörigheter för att bevilja mikrofonåtkomst manuellt:

Teams-flikens rullgardinsmeny med Appbehörigheter markerat

Flikens rullgardinsmeny → Appbehörigheter

Steg 3 — Tillåt Teams att bädda in sidan

Din host måste tillåta Teams att iframe-bädda in sidan. Om du styr svarsheaders anger du:

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

Om Teams fortsätter att öppna sidan i en webbläsare i stället för att bädda in den blockeras sidan från iframe-inbäddning — åtgärda CSP / X-Frame-Options på din host.

Felsökning

Sidan blockeras från att iframe-bäddas in. Ta bort eventuell X-Frame-Options: DENY/SAMEORIGIN och ange frame-ancestors CSP som visas ovan för att tillåta Teams-domänerna. Den anpassade flikappen (alternativ B) är också mer tillförlitlig än den inbyggda webbplatsfliken.

Detta beror på behörighetslagret i Teams webview. Använd den anpassade flikappen med "devicePermissions": ["media"] och bevilja appen mikrofonbehörighet i Teams (flikens rullgardinsmeny → Appbehörigheter). Teams på webben och Teams för skrivbord fungerar olika — testa båda. Som reserv kan du erbjuda en länk för att öppna i webbläsaren.

Kontrollera att agenten är offentlig med autentisering inaktiverad (agentens Avancerade inställningar), och att unpkg.com och *.elevenlabs.io finns i manifestets validDomains.

Användbara länkar