1. 簡介
上次更新時間：2021 年 8 月 23 日
透過 Business Messages 轉移給真人服務專員
透過 Business Messages 的真人服務專員轉移功能，服務專員可以先以機器人身分展開對話，然後在對話期間切換為真人服務專員 (真人代表)。機器人可以處理營業時間等常見問題，而真人服務專員則可存取更多使用者情境資訊，提供個人化體驗。如果這兩種體驗之間的轉換過程流暢，使用者就能快速準確地獲得問題解答，進而提高回訪參與率和顧客滿意度。
本程式碼研究室會說明如何充分運用轉接真人服務專員功能。
建構項目
在本程式碼研究室中，您將為代理程式建構 Webhook，以便傳送及接收即時代理程式轉移事件。您將使用範例程式碼提供的基本 UI，測試建構的內容。
課程內容
- 如何儲存及管理對話狀態。
- 如何使用 Business Messages 傳送即時服務專員轉移事件。
- 如何設定 Webhook 和基本 UI，以便以服務專員身分加入對話。
- 使用 Business Messages API 的最佳做法。
本程式碼研究室著重於使用 Business Message API 實作即時服務專員轉接功能。您可以閱讀各階段的入門程式碼，但只需要實作與 Business Messages 相關的程式碼。
軟硬體需求
- Business Messages 服務專員，包括服務帳戶金鑰。您可以按照建立代理程式指南建立代理程式。
- 與代理程式的 GCP 專案連結的 Cloud Datastore 設定。您可以使用 Cloud Datastore 快速入門導覽課程進行設定。您不必瞭解如何使用 Cloud Datastore。
- 已安裝 Google Cloud SDK 和 Node.js (10 以上版本) 的電腦。
- 搭載 Android 5 以上版本的 Android 裝置，或 iOS 裝置，用於測試使用者體驗。
- 具備網頁應用程式程式設計經驗。您將編寫少量 JavaScript 程式碼，並可能需要偵錯所編寫的內容。
2. 建立回音機器人
在本步驟中，您將部署名為「Echo bot」的基本機器人代表。這個機器人會接收使用者訊息、將訊息記錄到 Cloud Datastore 的對話討論串，然後回覆相同內容，藉此「回應」使用者訊息。有了基本機器人和記錄基礎架構後，您就可以在後續步驟中，以此為基礎建立完整的即時服務專員轉移實作。
取得範例程式碼
在終端機中，使用下列指令將 Live Agent Transfer 範本程式碼複製到專案的工作目錄：
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
瞭解範例程式碼
我們來看看範例程式碼結構，您會在整個程式碼研究室中使用這個結構。
前往 step-1 目錄並查看內容。其中包含下列元素：
- bin：這個目錄包含 www 啟動指令碼，用於設定及配置伺服器。
- libs：這個目錄包含
datastore_util.js，其中含有從 Cloud Datastore 讀取資料和寫入資料的便利方法。您不需要瞭解這個檔案的運作方式，請注意可用的方法及其用途。 - resources：包含服務帳戶金鑰，檔案名稱為
credentials.json。 - routes：
index.js檔案包含 Webhook 和所有輔助方法。您會使用這個主要檔案，並在其中新增內容。 - views：這個目錄包含 UI 元素的 EJS 範本檔案。後續步驟會包含更多檔案。
- app.js、app.yaml、package.json：這些檔案會設定應用程式及其依附元件。
部署前，請下載 GCP 服務帳戶金鑰，並將 JSON 憑證檔案複製到範例程式碼中的每個資源目錄。請針對本程式碼研究室的每個步驟執行這項操作。
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
部署範例程式碼
在終端機中，前往範例的 step-1 目錄。接著，請設定 gcloud 工具，使用您向 API 註冊時使用的專案 ID，藉此使用 Google Cloud 專案。
gcloud config set project <PROJECT_ID>
如要部署應用程式，請執行下列指令：
gcloud app deploy
請注意上一個指令輸出內容中已部署應用程式的網址：
Deployed service [default] to [https://PROJECT_ID.appspot.com]
您剛才部署的入門程式碼包含一個網路應用程式，其中含有用來接收 Business Messages 訊息的 Webhook。應用程式會將訊息回傳給使用者，並將訊息串記錄到 Cloud Datastore。
設定代理
前往 Business Communications 開發人員控制台的「帳戶設定」頁面，然後將 Webhook 設為已部署應用程式的網址。例如 https://PROJECT_ID.appspot.com/callback/。
接著在「Agent information」頁面，將主要和次要互動類型分別設為「Bot」和「Human」。
與回聲機器人對話
在開發人員控制台中開啟代理程式。您會看到「總覽」頁面，可查看代理程式的詳細資料。複製與行動測試裝置相符的代理程式測試網址。在行動裝置上使用這個網址，啟動代理程式的對話介面。
傳送幾則訊息與代理互動。對話介面只會複製你說的內容，使用者體驗不佳。如果可以和真人對話就好了！
3. 參與討論
現在，我們從真人服務專員的角度來看這段對話。加入對話前，真人服務專員需要瞭解對話 ID 等資訊。此外，瞭解使用者是否要求與真人服務專員通話也很重要。在這個步驟中，您將使用基本的客戶關係管理 (CRM) 頁面查看這項資訊，並以即時服務專員的身分加入對話。
這個步驟的範例程式碼會新增基本 CRM，列出專員的所有進行中對話串。讓我們看看該 CRM，瞭解哪些對話可能需要真人服務專員介入。
前往 step-2 目錄，然後再次部署應用程式，與上一個步驟的做法相同。
部署應用程式時，您會看到目標網址。在瀏覽器中前往這個網址，即可查看您在上一步開始的對話串清單。由於迴聲機器人在這項對話中代表代理程式，因此對話的狀態目前為「機器人管理」。
系統會顯示「加入對話」按鈕，但目前不會執行任何動作。此外，您也無法從這個介面判斷使用者是否想與真人服務專員對話。
Business Messages 提供要求線上服務專員事件，指出使用者何時想與線上服務專員交談。您需要追蹤該狀態，才能在 UI 中列出。
請查看 index.js 中的回呼方法。TODO 註解會指出您需要擷取使用者對即時服務專員的要求，並更新執行緒狀態。
step-2/routes/index.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
您需要使用 libs/datastore_utils.js 中的方法載入目前的對話串，並將其狀態更新為 QUEUED_THREAD_STATE。
如果不確定該怎麼做，請參考解決方案。範例程式碼會在每個步驟下加入 solutions 目錄，您必須在這些步驟中完成部分程式碼。這些目錄包含整個應用程式的副本，以及指定步驟的完整實作項目。
完成實作並重新部署應用程式後，請在行動裝置的對話中使用溢位選單，要求線上服務專員。
現在返回 CRM，您應該會在對話串中看到「已要求轉接真人服務專員」的附註。這位使用者需要真人協助！您必須實作 joinConversation 端點，按鈕才能正常運作。
在 /joinConversation 的存根方法中找出其他 TODO 註解。
step-2/routes/index.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
您需要再次更新執行緒狀態，這次要更新為 LIVE_AGENT_THREAD_STATE。此外，您還需要使用 Business Messages API 的 conversations.events.create 方法發布 REPRESENTATIVE_JOINED 事件。
如要建立要求酬載，請設定下表列出的欄位：
欄位名稱 | 提示 |
| 將此設為「conversations/{conversationId}」。 |
| 為活動產生專屬隨機 ID。 |
| 請使用提供的 |
| 這是事件主體本身。您應設定 eventType 和代表。 |
如需相關說明，請參閱 create 方法的參考頁面或活動參考頁面。
完成實作後，請重新部署應用程式，然後按一下「加入對話」按鈕。系統會顯示「已加入對話」對話方塊，且對話狀態會變更為「即時對話」。在行動裝置上查看對話時，聊天室會顯示即時服務專員已加入的附註。
恭喜！在下一個步驟中，我們將說明如何讓真人服務專員與使用者交談。
4. 以真人服務專員身分傳送訊息
加入對話後，現在可以開始以真人服務專員的身分傳送訊息。
前往 step-3 目錄，重新部署應用程式。在 CRM 中，按一下上一個步驟中的對話串。現在應該會看到基本的即時通訊介面。您可以在這裡即時查看使用者的訊息。
不過，以代理程式身分傳送訊息的功能尚未實作。您必須在這個步驟中完成該作業。
開啟 routes/index.js 檔案，然後查看三個新增端點：
/messages：取得messages.ejs檢視區塊檔案，並在瀏覽器中算繪。點選索引中的對話討論串時，系統會將您導向其中一個頁面。/retrieveMessages：取得執行緒的訊息內容，並傳回對話中所有訊息的格式化清單。訊息頁面會定期呼叫這個端點，顯示最新訊息。/sendMessage：將訊息從真人服務專員代表傳送給使用者。當您按一下「傳送」時，訊息頁面會呼叫這個函式。目前尚未實作。
現在，請查看現有的 storeAndSendResponse 方法：
step-3/routes/index.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
Webhook 已使用這個方法傳送回音機器人的回覆。這個方法會先將對話的傳入訊息資料儲存在 Cloud Datastore 物件中，然後傳送回覆訊息。請仔細查看建立的訊息物件，尤其是代表類型。
現在，請自行實作 /sendMessage 端點。您可以在這裡使用現有的 storeAndSendResponse 方法完成大部分工作。請務必記得設定正確的代表。
確認這項功能正常運作後，請重新部署應用程式，然後返回 CRM 中的對話。現在您可以在對話記錄中查看訊息。您也可以在行動測試裝置上查看代理程式的訊息。
繼續操作前，請務必瞭解新端點的運作方式。在下一個步驟中，您將新增自己的端點來離開對話。
5. 離開對話
協助使用者解決問題後，你可能想離開對話，讓使用者再次與機器人交談。在 Business Messages 中，這項變更會以 REPRESENTATIVE_LEFT 事件表示。
前往 step-4 目錄，重新部署應用程式，然後返回對話串。現在對話串底部會顯示「關閉並離開對話」連結。由於 leaveConversation 端點尚未實作，這個連結目前無法運作。
查看 index.js 檔案。TODO 註解會指示您建立新的 leaveConversation 端點。
step-4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
如要實作這項功能，您需要整合目前為止在程式碼研究室中學到的所有內容。這個端點應執行下列動作：
- 將執行緒更新為
BOT_THREAD_STATE。 - 傳送
REPRESENTATIVE_LEFT事件。 - 在對話中傳送訊息，告知使用者他們正在與回音機器人對話。請使用
storeAndSendResponse方法。請注意，代表已變更回BOT。
最後一個步驟會向使用者說明對話狀態。代表離開對話時，使用者會看到事件，但他們不一定會知道自己又在與回音機器人對話。直接從機器人傳送訊息，可減少使用者困惑並提升體驗。
現在機器人可以處理問題，真人服務專員就能加入其他對話。盡情試用程式碼範例和 CRM。測試你為商家即時服務專員轉移體驗發想的不同點子，看看會出現什麼結果。
6. 總結
恭喜您完成即時服務專員轉接程式碼研究室！
您已建立可處理真人服務專員轉接的代理程式。您也學到如何使用 Cloud Datastore 追蹤對話狀態。
有了轉接真人服務專員功能，你可以將常見要求交給機器人處理，真人服務專員則負責處理較複雜的查詢。使用者會對全新實用客製化體驗更加滿意，進而提高回訪意願，並向朋友推薦您的商家。
後續步驟
請參閱下列程式碼研究室：
其他資訊
- 請參閱這份指南，瞭解將對話從機器人轉接給真人服務專員的基本概念。
- 使用 Dialogflow 指南將回音機器人升級為常見問題機器人。