將 Bot 嵌入網站Embed a bot in a website

Bot 通常位於網站外部,但也可能內嵌於網站中。Although bots commonly exist outside of websites, they can also be embedded within a website. 例如,您可以將知識 Bot 內嵌在網站中,以便使用者快速尋找資訊,否則在複雜的網站結構內往往不容易找到。For example, you may embed a knowledge bot within a website to enable users to quickly find information that might otherwise be challenging to locate within complex website structures. 您也可以將 Bot 內嵌在技術支援中心的網站內, 做為傳入使用者要求的第一個回應程式。Or you might embed a bot within a help desk website to act as the first responder to incoming user requests. Bot 可以獨立解決簡單的問題,並將較為複雜的問題遞交給人類專員。The bot could independently resolve simple issues and handoff more complex issues to a human agent.

本文章探討 Bot 與網站的整合,以及使用 backchannel 機制的過程,以便在網頁和 Bot 之間進行私密通訊。This article explores integrating bots with websites and the process of using the backchannel mechanism to facilitate private communication between a web page and a bot.

Microsoft 提供兩種不同的 Bot 與網站整合方式:Skype web 控制項和開放原始碼 web 控制項。Microsoft provides two different ways to integrate a bot in a website: the Skype web control and an open source web control.

Skype web 控制項Skype web control

Skype web 控制項本質上是已啟用 web 控制項中的 Skype 用戶端。The Skype web control is essentially a Skype client in a web-enabled control. 內建的 Skype 驗證可讓 Bot 驗證和辨識使用者,而不需要開發人員撰寫任何自訂程式碼。Built-in Skype authentication enables the bot to authenticate and recognize users, without requiring the developer to write any custom code. Skype 會自動辨識其網頁用戶端中使用的 Microsoft 帳戶。Skype will automatically recognize Microsoft Accounts used in its web client.

由於 Skype web 控制項僅做為 Skype 前端,使用者的 Skype 用戶端會自動存取任何 web 控制項促成的完整對話內容。Because the Skype web control simply acts as a front-end for Skype, the user's Skype client automatically has access to the full context of any conversation that the web control facilitates. 即使在網頁瀏覽器關閉之後,使用者也可以繼續與 Skype 用戶端的 Bot 進行互動。Even after the web browser is closed, the user may continue to interact with the bot using the Skype client.

開放原始碼 web 控制項Open source web control

開放原始碼網路聊天控制項是以 ReactJS 為基礎,並使用 Direct Line API 與 Bot Framework 進行通訊。The open source web chat control is based upon ReactJS and uses the Direct Line API to communicate with the Bot Framework. 網路聊天控制項提供實作網路聊天所需的空白畫布,讓您完整掌控其行為和其所提供的使用者體驗。The web chat control provides a blank canvas for implementing the web chat, giving you full control over its behaviors and the user experience that it delivers.

Backchannel 機制可讓裝載控制項的網頁,運用使用者完全無法察覺的方式與 Bot 直接進行通訊。The backchannel mechanism enables the web page that is hosting the control to communicate directly with the bot in a manner that is entirely invisible to the user. 這項功能可讓數個實用案例變得可行︰This capability enables a number of useful scenarios:

  • 網頁可以傳送相關資料至 Bot (例如 GPS 位置)。The web page can send relevant data to the bot (e.g., GPS location).
  • 網頁可以向 Bot 通知使用者動作 (例如「使用者剛才從下拉式清單中選取了選項 A)。The web page can advise the bot about user actions (e.g., "user just selected Option A from the dropdown").
  • 網頁可將登入使用者的驗證權杖傳送給 Bot。The web page can send the bot the auth token for a logged-in user.
  • Bot 可以傳送相關資料至網頁 (例如使用者組合目前的值)。The bot can send relevant data to the web page (e.g., current value of user's portfolio).
  • Bot 可以傳送「命令」至網頁 (例如變更背景色彩)。The bot can send "commands" to the web page (e.g., change background color).

使用 backchannel 機制Using the backchannel mechanism

開放原始碼網站聊天控制項使用 直接線路 API 與 Bot 進行通訊,如此會允許 activities 在用戶端與 Bot 之間來回傳送。The open source web chat control communicates with bots by using the Direct Line API, which allows activities to be sent back and forth between client and bot. 最常見的活動類型是 message,但也有其他類型。The most common type of activity is message, but there are other types as well. 比方說,活動類型 typing 指明使用者正在輸入或是 bot 正在編譯回覆的工作。For example, the activity type typing indicates that a user is typing or that the bot is working to compile a response.

您可以使用 backchannel 機制在用戶端與 Bot 之間交換資訊,而不需要藉由將活動類型設定為 event 而將這些資料呈現給使用者。You can use the backchannel mechanism to exchange information between client and bot without presenting it to the user by setting the activity type to event. 網路聊天控制項會自動忽略 type="event" 的任何活動。The web chat control will automatically ignore any activities where type="event".

範例程式碼Sample code

開放原始碼網路聊天控制項可透過 GitHub 取得。The open source web chat control is available via GitHub. 如要深入了解如何使用開放原始碼網路聊天控制項實作 backchannel 機制和適用於 Node.js 的 Bot Framework SDK,請參閱使用 backchannel 機制For details about how you can implement the backchannel mechanism using the open source web chat control and the Bot Framework SDK for Node.js, see Use the backchannel mechanism.

其他資源Additional resources