ボットを Web サイトに埋め込む

この記事の対象: SDK v4

ボットは一般的には Web サイト外に存在しますが、Web サイト内に埋め込むことができます。 たとえば、複雑な Web サイト構造で検索が大変な情報をユーザーがすばやく見つけられるように、ナレッジ ボットを Web サイトに埋め込むことができます。 また、受信ユーザー要求に対する最初のレスポンダーとして機能するように、ヘルプ デスク Web サイトにボットを埋め込むこともあります。 シンプルな問題についてはボットが自力で解決し、複雑な問題は、人のエージェントにハンドオフされます。

この記事では、Web サイトへのボットの統合の方法と、Web ページとボットの間のプライベート通信を容易にする バックチャネル メカニズムを使用するプロセスについて説明します。

Microsoft では、Skype Web コントロールオープン ソース Web コントロールの 2 つの異なる方法で、ボットを Web サイトに統合できます。

オープン ソース Web コントロール

オープン ソース Web チャット コントロールは ReactJS に基づいており、Bot Framework との通信には Direct Line API が使用されています。 Web チャット コントロールには、Web チャットを実装するための空白のキャンバスが用意されており、そのチャットの動作と、チャットのユーザー エクスペリエンスをフル コントロールできます。

"バックチャネル" メカニズムにより、コントロールをホストしている Web ページが、ユーザーにはまったく見えないようにボットと直接通信できます。 この機能により、複数の便利なシナリオに対応できます。

  • 関連データを Web ページからボットに送信できます (例: GPS の位置情報など)。
  • ユーザー アクションに関するアドバイスを Web ページからボットに提供できます (例: "ユーザーがドロップダウンからオプション A を選択した"など)。
  • ログインしたユーザー用の認証トークンを Web ページからボットに送信できます。
  • 関連データをボットから Web ページに送信できます (例: ユーザーのポートフォリオの現在の値など)。
  • "コマンド" をボットから Web ページに送信できます (例: 背景色の変更など)。

バックチャネル メカニズムの使用

オープン ソースの Web チャット コントロールは、Direct Line API を使用してボットと通信し、クライアントとボット間での activities のやり取りを可能にします。 最も一般的な種類のアクティビティは message ですが、他の種類もあります。 たとえば、typing というアクティビティの種類は、ユーザーが入力中であることか、ボットが応答をまとめるために動作中であることを示します。

アクティビティの種類を event に設定すれば、バックチャネル メカニズムを使用して、ユーザーに情報を表示せずに、クライアントとボット間で情報を交換できます。 Web チャット コントロールは、type="event" のすべてのアクティビティを自動的に無視します。

サンプル コード

オープン ソース Web チャット コントロールは GitHub で入手できます。 オープン ソース Web チャット コントロールと Bot Framework SDK for Node.js を使用してバックチャネル メカニズムを実装する方法の詳細については、「バックチャネル メカニズムの使用」を参照してください。

その他のリソース