真人服務專員轉移

1. 簡介

53003251caaf2be5.png 6717b85f57d859d3.png

上次更新時間：2021 年 8 月 23 日

透過 Business Messages 進行真人服務專員轉移

Business Messages 的即時服務專員轉移功能可讓服務專員以機器人身分發起對話，並將通話中狀態切換為真人服務專員 (真人服務專員)。機器人可以處理常見問題 (例如營業時間)，而線上服務專員則能提供自訂體驗，進一步存取使用者情境。只要能順暢轉換使用這兩種服務，使用者就能迅速準確地找到問題的答案，進而提高回訪率和客戶滿意度。

本程式碼研究室將說明如何充分運用線上服務專員轉移功能。

建構項目

在這個程式碼研究室中，您將為服務專員建構 Webhook，以便傳送及接收即時服務專員轉移事件。您將使用範例程式碼提供的基本 UI 測試自己建構的內容。

49aca3df6b196c50.png

課程內容

  • 如何儲存及管理對話狀態。
  • 如何使用 Business Messages 傳送真人服務專員轉移事件。
  • 如何設定 Webhook 和基本 UI，以代理程式身分加入對話。
  • 使用 Business Messages API 的最佳做法。

本程式碼研究室的重點在於使用 Business Message API 實作線上服務專員轉移作業。您可以詳閱每個階段的範例程式碼，但僅須實作與 Business Messages 相關的程式碼。

軟硬體需求

  • Business Messages 服務專員，包括服務帳戶金鑰。您可以按照建立代理程式指南的指示建立代理程式。
  • 已正常運作的 Cloud Datastore 設定，已連結到代理程式的 GCP 專案。您可以使用 Cloud Datastore 快速入門導覽課程進行這項設定。您不需要瞭解如何使用 Cloud Datastore。
  • 已安裝 Google Cloud SDK 和 Node.js (10 以上版本) 的電腦。
  • 用來測試使用者體驗的 Android 裝置 (5 以上版本) 或 iOS 裝置。
  • 具備網頁應用程式程式設計經驗。您將編寫少量的 JavaScript 程式碼，且可能需要對編寫的內容進行偵錯。

2. 建立 echo 機器人

在這個步驟中，您將部署名為「Echo 機器人」的基本機器人代表。這個機器人會接收使用者訊息、將訊息記錄到 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：此目錄包含使用者介面元素的 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 目錄。接著設定用於註冊 API 的專案 ID，將 gcloud 工具設為使用您的 Google Cloud 專案。

gcloud config set project <PROJECT_ID>

如要部署應用程式，請執行下列指令：

gcloud app deploy

在最後一個指令的輸出內容中，記下已部署應用程式的網址：

Deployed service [default] to [https://PROJECT_ID.appspot.com]

您剛剛部署的範例程式碼包含一個網頁應用程式，其中包含用來接收 Business Messages 訊息的網頁應用程式。應用程式會將訊息回應給使用者，並將訊息執行緒記錄至 Cloud Datastore。

設定您的代理程式

前往 Business Communications 開發人員控制台中的「帳戶設定」頁面，將 Webhook 設為已部署應用程式的網址。例如 https://PROJECT_ID.appspot.com/callback/。

接著，在虛擬服務專員資訊頁面上，將主要和次要互動類型分別設為 Bot 和 Human。

db0cca5b74f999ad.png

與 echo 機器人對話

在開發人員控制台開啟代理程式。畫面會顯示「Overview」(總覽) 頁面，供您查看代理程式的詳細資料。複製與行動裝置測試裝置相符的代理程式測試網址。在行動裝置上使用這個網址即可啟動代理程式的對話介面。

536313929e5c0b3e.png

你可以傳送幾則訊息與服務專員互動。對話介面只會複製你說的內容，不會帶來實用的使用者體驗。我應該跟真人講話！

3. 加入對話

現在讓我們從真人服務專員的觀點來看，真人服務專員需要有關對話的一些須知事項才能加入，例如對話 ID。瞭解使用者是否已要求與真人服務專員通話，將也很有幫助。在這個步驟中，您將使用基本的客戶關係管理 (CRM) 頁面來查看這項資訊，並以真人服務專員的身分加入對話。

這個步驟的範例程式碼新增了一個基本客戶關係管理系統，其中列出代理程式的所有進行中的對話執行緒。我們來看看該客戶關係管理系統，瞭解有哪些對話需要線上服務專員特別留意。

前往 step-2 目錄，並再次部署應用程式，與上一個步驟相同。

部署應用程式時，您會看到目標網址。在瀏覽器中開啟這個網址，即可看到包含您在上一個步驟中發起的對話串的商家資訊。因為 echo 機器人正在對話中擔任服務專員的代表，因此對話的狀態目前為「機器人代管」。

8f624e9befb8e827.png

系統隨即會顯示「加入即時通訊」按鈕，但目前沒有任何執行任何動作。您也無法從這個介面判斷使用者是否要與真人服務專員交談。

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 目錄。這些目錄包含整個應用程式的副本，以及指定步驟的完整實作內容。

完成實作並重新部署應用程式後，請使用行動裝置上的對話中的溢位選單來要求真人服務專員。

e58d2b77e9c64492.png

現在您返回客戶關係管理頁面時，應該會在對話串中看到「已要求真人服務專員」附註。這位使用者需要真人協助！您必須實作 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 事件。

如要建立要求酬載，您必須設定下表列出的欄位：

欄位名稱

提示

parent

請設為「conversations/{conversationId}」。

eventId

為事件產生隨機 ID。

auth

使用提供的 initCredentials 方法。

resource

這是事件主體。您應設定 eventType 和代表。

如需相關說明，請參閱建立方法的參考資料頁面或事件參考資料頁面。

導入完成後，請重新部署應用程式，然後按一下「加入即時通訊」按鈕。畫面上會顯示「已加入對話」對話方塊，且聊天室狀態會變更為「聊天室」。在行動裝置上查看對話時，即時通訊中會顯示一則訊息，說明真人服務專員已加入對話。

恭喜！在下一個步驟中，您將瞭解如何讓真人服務專員與使用者交談。

4. 以真人服務專員的身分傳送訊息

你已加入對話，開始以真人服務專員的身分傳送一些訊息。

前往 step-3 目錄並重新部署應用程式。在客戶關係管理系統中，按一下上一個步驟的對話串。現在應該會看到基本的即時通訊介面。您可以在這裡即時查看使用者的訊息。

46dd083f08f43961.png

然而，以代理程式身分傳送訊息仍不會實作。您必須在這個步驟中完成這項操作。

開啟 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 已經使用這個方法從 echo 機器人傳送回應。此方法會先將傳入的訊息資料儲存在對話的 Cloud Datastore 物件中。然後傳送回應訊息。請仔細檢查這個物件建立的訊息物件，尤其是在代表類型。

現在，請自行實作 /sendMessage 端點。您可以在此使用現有的 storeAndSendResponse 方法執行大部分的工作。請務必記得設定正確的代表。

完成這項作業後，請重新部署應用程式，然後回到客戶關係管理系統中的對話。你現在可以在即時通訊記錄中看到自己的訊息了。您也可以在行動裝置測試裝置上查看代理程式的訊息。

49aca3df6b196c50.png

在繼續之前，請務必瞭解新端點的運作方式。在下一個步驟中，您將新增自己的端點來離開對話。

5. 離開對話

協助使用者解決問題後，您可能會想離開對話，並讓使用者再次與機器人對話。在 Business Messages 中，這項變化是由 REPRESENTATIVE_LEFT 事件發出。

前往 step-4 目錄並重新部署應用程式，然後返回對話執行緒。討論串底部會顯示「關閉並離開對話」連結。未實作 leaveConversation 端點，因此這個連結目前無法運作。

ef4ad8107c3fff2.png

查看 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 事件。
  • 在對話中傳送訊息，告知使用者對方正在和 echo 機器人對話。請使用 storeAndSendResponse 方法。請注意，業務代表已改回 BOT。

最後一個步驟會清楚說明使用者的對話狀態。當代表離開即時通訊時，使用者會看見事件，但不一定知道使用者再次與 echo 機器人交談。為了避免使用者混淆及改善體驗，可以直接從機器人傳送訊息。

機器人正在處理事務，您的真人服務專員可以自由加入其他對話。您可以視需要嘗試程式碼和客戶關係管理系統。測試你對商家的真人服務專員轉移體驗有何不同的想法，看看自己想到的想法。

6. 總結

恭喜您完成線上服務專員轉移程式碼研究室！

您已建立可處理真人服務專員轉移作業的服務專員，該服務專員已完成下列程序。您也學會了使用 Cloud Datastore 追蹤對話狀態的方法。

使用真人服務專員轉移功能時，你需要離開機器人的常見要求，而線上服務專員則能處理更複雜的問題。使用者會對全新量身打造的實用體驗更加滿意，提高他們回訪並向朋友推薦您的商家的機率。

後續步驟

查看部分程式碼研究室：

其他資訊

參考說明文件