透過 Microsoft BotFramework-WebChat 的 botchat.js 連接 Botframework 做的 Chatbot ,輕鬆 Web Application

我們透過 Microsoft BotFramework 來製作 Chatbot 程式後,除了可以接各透的 IM Channel 外,最快速的就是將它整合到現有的 Web Application 之中。Microsoft BotFramework-WebChat 已有提供範例讓我們去整合。
但是一般的網站並不需要一下子就顯示 WebChat ,而是在下方需要一個機器人的小圖示,按下去之後再顯示出 WebChat 。

解法

依上面的需求,我們需要 2 個 div, 一個放網頁下方的小圖示(WebChatButton), 另一個是放 WebChat (WebChatDialog)。
所以預設的 html 如下,

<div ID=“WebChatButtonD” onclick=“開啟WebChat的function”></div><div id=“WebChatDialog”></div>

透過 botchat.js 來建立 WebChat 需要一些設定值,所以就先定訂這些設定值的 interface ,如下,

interface IBotChatUIConfig {
botId: string,
botName: string,
userId: string,
userName: string,
botChatIconUrl: string, //下方機器人的圖示
chatTitle: string, // WebChat Header 的文字
directLineOptions: any, //DirectLine 的設定
locale: string, //語系
showWebChatButton: boolean // 是否顯示下方的機器人圖示
}

再來可以透過 BotChatUI 來封裝要一開始顯示出網頁下方的機器人圖示,按下後,要開啟 WebChat ,而按下 WebChat 的 Header 後,要將 WebChat Hide 起來,並顯示出機器人的圖示。
開始的畫面
另外,我們也可以透過調整 css 來讓 WebChat 長的不一樣,例如我們可以在 WebChat 中也顯示機器人的圖示。
開啟 WebChat 畫面

所以在即有的 Web Application 之中只要加入 WebChatCustomization 的 Botchat 目錄中的檔案,然後在要加入 WebChat 的網頁中加入以下的 Script 及設定您要的值,您就會有美美的 WebChat 了哦!

<!– chatbot –>
<link href=“Botchat/CSS/botchat.css” rel=“stylesheet” />
<link href=“Botchat/CSS/botchat-fullwindow.css” rel=“stylesheet” />
<link href=“Botchat/CSS/botchatCustom.css” rel=“stylesheet” />
<script src=“Botchat/Scripts/botchat-es5.js”></script>
<script src=“Botchat/Scripts/BotChatUI.js”></script>
<script>
var botChatUI = new BotChatUI({
botId: ‘RainmakerBot’,
botName: ‘小亂機器人’,
userId: ‘Rainmaker’,
userName: ‘亂馬客’,
chatTitle: ‘小亂機器人, 按我可縮小’,
locale: ‘zh-tw’,
directLineOptions: {
secret: ,
token: ,
pollingInterval: 1000,
webSocket: false
},
showWebChatButton: true
});
</script>
<!– chatbot –>

因為我想讓 IE 也可以 run ,所以我加入的是 botchat-es5.js。如果您不考慮 IE 的話,可以使用 botchat.js。
在 BotChatUI.ts 中,有特別處理,開啟 WebChat 時才建立 DirectLine 及 WebChat,關閉 WebChat 時,會先儲存 DirectLine 的 ConversationId,並 close 連線。重新開啟 WebChat 時,才知道原本的 ConversationId 是什麼,重新將原本的內容 Load 回來。
為什麼要這樣子呢? 因為我們是使用 offline Direct Line,目前還不 Support WebSocket ,所以 WebChat 會一直 Polling。所以當關掉 WebChat 時,DirectLine close 後,它就不會再 polling。
那要怎麼讓它重新再連線呢? 目前我們的做法是將原本的 WebChat 移掉再重新建立。詳細可以參考 BotChatUI.ts startConversation / endConversation functions。
而重新連的方式,如果有更好的方式會更新上去,如果大家知道的話,也請跟大家分享。

參考資料

WebChatCustomization

作者: 亂馬客

亂馬客 @叡揚資訊 rainmaker_ho@gss.com.tw https://rainmakerho.github.io/ https://www.slideshare.net/rainmakerho

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *