위젯 탭

개요

에이전트 위젯을 로드하는 작은 HTML 페이지를 호스팅하고 Teams 탭으로 표시하세요. 사용자는 탭을 열어 Teams 클라이언트에서 에이전트와 대화합니다. 전화번호나 전화 시스템은 필요하지 않습니다. 가장 가벼운 방식으로, 내부 셀프서비스 어시스턴트와 데모에 적합합니다.

작동 방식

위젯은 웹 컴포넌트입니다. Teams는 탭의 contentUrl을 웹뷰(iframe) 안에 렌더링하므로, 페이지가 Teams에 임베드될 수 있도록 허용되고 미디어 권한을 부여받은 경우 마이크 캡처를 포함해 위젯은 웹사이트에서와 정확히 동일하게 실행됩니다.

요구 사항

1. 인증이 비활성화된 공개 ElevenLabs 에이전트(에이전트 설정의 Advanced 탭). 위젯에는 이 설정이 필요합니다.
2. 단일 정적 HTML 파일을 위한 HTTPS 호스트(Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps 등).
3. 커스텀 탭 옵션을 사용하는 경우, 커스텀 Teams 앱을 업로드할 수 있는 테넌트 권한(Teams 관리 센터 → 앱 관리 → 커스텀 앱 업로드).

1단계 — 위젯 페이지 만들기

위젯 임베드와 에이전트 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>

HTTPS 호스트에 배포한 뒤, 먼저 일반 브라우저에서 페이지가 로드되고 마이크가 작동하는지 확인하세요.

2단계 — Teams에 추가하기

음성 안정성이 낮은 순서부터 두 가지 옵션이 있습니다.

옵션 A — 웹사이트 탭(가장 빠름, 링크만 열릴 수 있음)

채팅 또는 채널에서 + 탭 추가 → 웹사이트를 선택하고 HTTPS URL을 붙여넣은 다음 저장하세요.

옵션 B — 커스텀 탭 앱(음성에 권장)

작은 커스텀 Teams 앱이 페이지를 정적 탭으로 선언하고 미디어 권한도 요청합니다. 이 권한 덕분에 Teams 내부에서 마이크가 안정적으로 작동합니다.

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

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

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

3단계 — Teams에서 페이지를 임베드하도록 허용하기

호스트는 Teams가 페이지를 iframe으로 표시하도록 허용해야 합니다. 응답 헤더를 제어할 수 있다면 다음을 설정하세요.

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

Teams가 페이지를 임베드하지 않고 계속 브라우저에서 연다면, 페이지의 iframe 임베딩이 차단된 것입니다. 호스트에서 CSP / X-Frame-Options를 수정하세요.

문제 해결

유용한 링크

• 위젯 맞춤 설정
• Teams 탭 요구 사항
• 개인 탭 만들기
• Teams 디바이스 권한