ウィジェットタブ | ElevenLabs Documentation

概要

エージェントウィジェットを読み込む小さなHTMLページをホストし、Teamsタブとして表示します。ユーザーはタブを開いてTeamsクライアント内でエージェントと会話できます。電話番号も電話回線も必要ありません。これは最も手軽なアプローチで、社内のセルフサービスアシスタントやデモに適しています。

Microsoft Teamsタブで開かれたElevenLabsエージェントウィジェット — Teamsタブで実行中のエージェントウィジェット

仕組み

ウィジェットはWebコンポーネントです。TeamsはタブのcontentUrlをWebview（iframe）内でレンダリングするため、ページのTeamsへの埋め込みが許可され、メディア権限が付与されていれば、マイクキャプチャを含めてWebサイト上とまったく同じようにウィジェットが動作します。

Teamsユーザーがタブを開くと、そのWebviewがElevenLabsエージェントウィジェットを実行するホストページをiframeで表示し、ウィジェットはElevenLabsへオーディオをストリーミングする — Teamsタブに埋め込まれたウィジェット

Teamsでは、チャット、メッセージ、Loopページに貼り付けた生の<script>は実行されません。ウィジェットスクリプトはご自身でホストするページに配置し、そのページをTeamsタブとして埋め込む必要があります。

要件

認証を無効にした公開ElevenLabsエージェント（エージェント設定のAdvancedタブ）。ウィジェットにはこれが必要です。
単一の静的HTMLファイル用HTTPSホスト（Vercel、Netlify、Cloudflare Pages、Azure Static Web Appsなど）。
カスタムタブオプションを使用する場合、テナント内でカスタムTeamsアプリをアップロードする権限（Teams管理センター→アプリを管理→カスタムアプリのアップロード）。

ステップ1：ウィジェットページを作成

ウィジェット埋め込みとエージェントIDを含むagent-widget.htmlを作成します。

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ホストにデプロイし、まず通常のブラウザで読み込まれ、マイクが動作することを確認してください。

ワークスペースがdata residency環境にある場合は、ウィジェットが対象リージョンへ接続するようserver-location属性を追加してください。対応する値についてはウィジェットのカスタマイズを参照してください。

Teamsに設定する前に、ブラウザでページを単体テストしてください。そこでマイクが動作しなければ、Teams Webviewでも動作しません。

ステップ2：Teamsに追加

音声の信頼性が高くなる順に、2つの選択肢があります。

オプションA：Webサイトタブ（最速、リンクのみになる場合あり）

チャットまたはチャネルで、＋タブを追加→Webサイトを選択し、HTTPS URLを貼り付けて保存します。

組み込みのWebサイトタブでは、ページが埋め込まれず外部リンクとして開くことがあります。また、埋め込まれた場合でも、TeamsデスクトップのWebviewではマイクアクセスがブロックされることがあります。音声が失敗する場合は、オプションBを使用してください。

オプションB：カスタムタブアプリ（音声に推奨）

小さなカスタムTeamsアプリでページを静的タブとして宣言し、さらにメディア権限を要求します。これによりTeams内でマイクが確実に動作します。

マニフェストを作成

manifest.jsonを作成します。your-domain.comをホスト名に置き換え、idには一意のGUIDを設定してください。

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

音声に必要な主なフィールドは、devicePermissions: ["media"]（マイク）と、ページがアクセスするすべてのドメインを**validDomains**に記載することです（ウィジェットスクリプトのunpkg.com、エージェントの*.elevenlabs.io）。

アプリをパッケージ化

マニフェストと同じ場所にcolor.png（192×192）とoutline.png（32×32、透明）を追加し、マニフェストと2つのアイコンをアーカイブのルートに置いてzip化します。

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

アップロードして開く

Teamsで、アプリ→アプリを管理→アプリをアップロード→カスタムアプリをアップロードを選択し、voice-agent.zipを選択します。次に、Voice Agentタブを開き、求められたらマイクアクセスを許可してください。

Teams管理者はクライアントUIを使わず、PowerShellから組織全体にアプリを公開できます。公開後は、全員のアプリ→組織向けに作成に表示されます。

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

プロンプトが表示されない場合は、タブのドロップダウンを開き、アプリのアクセス許可を選択して手動でマイクアクセスを許可してください。

アプリのアクセス許可が強調表示されたTeamsタブのドロップダウンメニュー — タブのドロップダウン→アプリのアクセス許可

ステップ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を修正してください。

トラブルシューティング

タブでページが埋め込まれず、ブラウザで開かれる

ページのiframe埋め込みがブロックされています。X-Frame-Options: DENY/SAMEORIGINを削除し、上記のframe-ancestors CSPを設定してTeamsドメインを許可してください。カスタムタブアプリ（オプションB）は、組み込みのWebサイトタブよりも信頼性が高いです。

ウィジェットは読み込まれるが、マイクが動作しない

Teams Webviewの権限レイヤーが原因です。"devicePermissions": ["media"]を指定したカスタムタブアプリを使用し、Teamsでアプリにマイク権限を付与してください（タブのドロップダウン→アプリのアクセス許可）。Teams WebとTeamsデスクトップでは動作が異なるため、両方をテストしてください。代替手段として、「ブラウザで開く」リンクを用意してください。

ウィジェットがまったく表示されない

エージェントが認証無効の公開設定になっていること（エージェントのAdvanced設定）、およびunpkg.comと*.elevenlabs.ioがマニフェストのvalidDomainsに含まれていることを確認してください。

概要

仕組み

要件