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

# ウィジェットタブ

## 概要

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

![Microsoft Teamsタブで開かれたElevenLabsエージェントウィジェット](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## 仕組み

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

![Teamsユーザーがタブを開くと、そのWebviewがElevenLabsエージェントウィジェットを実行するホストページをiframeで表示し、ウィジェットはElevenLabsへオーディオをストリーミングする](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

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

## 要件

1. 認証を無効にした**公開**[ElevenLabsエージェント](/docs/ja/eleven-agents/quickstart)（エージェント設定のAdvancedタブ）。ウィジェットにはこれが必要です。
2. 単一の静的HTMLファイル用HTTPSホスト（Vercel、Netlify、Cloudflare Pages、Azure Static Web Appsなど）。
3. カスタムタブオプションを使用する場合、テナント内でカスタムTeamsアプリをアップロードする権限（[Teams管理センター→アプリを管理](https://admin.teams.microsoft.com/policies/manage-apps)→カスタムアプリのアップロード）。

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

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

**`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>
```

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

> **Note**
>
> ワークスペースが[data residency](/docs/ja/overview/administration/data-residency)環境にある場合は、ウィジェットが対象リージョンへ接続するよう`server-location`属性を追加してください。対応する値については[ウィジェットのカスタマイズ](/docs/ja/eleven-agents/customization/widget)を参照してください。

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

## ステップ2：Teamsに追加

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

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

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

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

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

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

#### マニフェストを作成

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

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

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

#### アプリをパッケージ化

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

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

#### アップロードして開く

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

> **Tip**
>
> Teams管理者はクライアントUIを使わず、PowerShellから組織全体にアプリを公開できます。公開後は、全員の**アプリ→組織向けに作成**に表示されます。
>
> ```powershell
> Connect-MicrosoftTeams
> New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip
> ```

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

![アプリのアクセス許可が強調表示されたTeamsタブのドロップダウンメニュー](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## ステップ3：Teamsによるページの埋め込みを許可

ホスト側で、Teamsがページをiframeに埋め込めるようにする必要があります。レスポンスヘッダーを制御できる場合は、以下を設定してください。

```http
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`に含まれていることを確認してください。

## 便利なリンク

* [ウィジェットのカスタマイズ](/docs/ja/eleven-agents/customization/widget)
* [Teamsタブの要件](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [個人用タブを作成する](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Teamsデバイスのアクセス許可](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)