前提

埋め込むBotは、公開しておいてください。

公開の設定

Web Chatは、デフォルトでONになっているので接続文字列だけ取得すればすぐに公開できます。

Bot FrameworkのMy BotsのページでWeb Chatの項目のEditを選択すると諸々取得できます。

image

Editを選択するとこんな感じの画面が出るはずです

Generate Web Chat secretを押すと接続文字列と埋め込みようのテンプレートが取得できます。

image

image

ちなみにこの接続情報のテキストボックス、Edgeだと文字列が拾えなかったのでおとなしく別のChromeとか使いましょう

サイトに埋め込む

ちなみにこれ要するにiframeをサイトに埋め込んでチャットさせる仕組みなのでiframeの制限は解除してください

iframeは、以下のように記述するとOKです。

<iframe src='https://webchat.botframework.com/embed/BotのAppId?s=取得したSecret'></iframe>

埋め込むと、デフォルトだと以下のような感じ

image

ちょっとしょぼいので高さを500pxにして見ると以下のような感じ

image

メッセージを送ると普通に会話できます。

image

まとめ

簡単にBotを埋め込めたので、サイトにデモ的に公開するといったことができるのはなかなか良さそうです。

一番最初のあいさつ文みたいなやつ(Hi! hoge ~ )の変更方法がわからなかったので誰か教えてください

CATEGORIES