「Copilot Studioで作ったエージェントをWebサイトに載せたいけど、JavaScriptは難しそう…」と感じたことはありませんか？
実は、botframework-webchat-embed というライブラリを使うと、JavaScriptを一切書かずにエージェントをWebサイトへ埋め込むことができるんです。HTMLのdata属性を設定するだけで、フローティングチャットウィジェットが自動的に表示されます。今回はその具体的な手順をご紹介します。
botframework-webchat-embed を使ってみよう
そんな時に便利なのが、botframework-webchat-embed です。WebChatのラッパーライブラリで、HTMLのdata属性で設定するだけで、トークンの取得からウィジェットの描画、フローティングバブルUIまで全部やってくれます。
コード全体はなんとこれだけです。
<!-- 1. トークンエンドポイントを指定したコンテナを追加 -->
<div
style="position: fixed; bottom: 20px; right: 20px; width: 380px; height: 550px;"
data-webchat-token-url="https://your-copilot-studio-token-endpoint">
</div>
<!-- 2. スクリプトを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/botframework-webchat-embed@latest"></script>たったこれだけで、以下の機能が全部使えるようになります。
- クリックで展開するフローティングチャットバブル
- 最小化・再起動ボタン付きのヘッダー
- サイトのCSS変数からのスタイル自動継承
- ウィジェットを開いたときだけWebChatを読み込む遅延ロード
前提条件：認証なしのエージェントが必要
ただし注意点として、このライブラリは認証なし（未認証）のエージェントにのみ対応しています。Entra ID認証が必要なエージェントの場合は、フルのBotFramework WebChat SDKを使う必要があります。
設定手順
1. トークンエンドポイントを取得する
まず、Copilot Studioの管理画面から 「設定」→「チャンネル」 を開き、「メールチャンネル」 を選択します。ここに表示されているトークンエンドポイントのURLをコピーしてください。
<!-- 1. トークンエンドポイントを指定したコンテナを追加 -->
<div
style="position: fixed; bottom: 20px; right: 20px; width: 380px; height: 550px;"
data-webchat-token-url="コピーしたトークン">
</div>
<!-- 2. スクリプトを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/botframework-webchat-embed@latest"></script>最終的にはこのようになります。
今回は特にやっていませんが、data-webchat 属性を活用することで、デザインの変更なども可能です。
このライブラリが対応していないこと
botframework-webchat-embedは、あくまでシンプルさを重視したライブラリです。以下のようなケースには対応していないので、その場合はフルのBotFramework WebChat SDKを使うようにしましょう。
- Entra ID認証が必要なエージェント
- Direct Lineシークレットの使用
- カスタムミドルウェアやアクティビティインターセプター
まとめ
いかがでしたでしょうか。botframework-webchat-embedを使えば、JavaScriptを一切書かずにCopilot StudioのエージェントをWebサイトへ埋め込むことができるようになります。
手順をまとめると、
- メールチャンネルからトークンエンドポイントのURLを取得する
<div>タグにdata-webchat-token-url属性として貼り付ける- CDNのスクリプトタグを追加する
これだけです。セキュリティの確認（認証なしエージェントであること）を忘れずに、またセキュリティなどの要件をしっかりと確認してぜひ試してみてください。
コメント