真人服務專員轉移

1. 簡介

53003251caaf2be5.png 6717b85f57d859d3.png

上次更新時間：2021-08-23

透過商家訊息轉接至真人服務專員

Business Messages 的真人服務專員轉接功能可讓服務專員以機器人身分開始對話，並在對話期間切換至真人服務專員 (真人代表)。聊天機器人可處理營業時間等常見問題，而真人客服人員則可提供客製化體驗，進一步掌握使用者情境。如果這兩種體驗之間的轉換流程順暢無礙，使用者就能快速且準確地獲得問題解答，進而提高回訪參與率和顧客滿意度。

本程式碼研究室會教您如何充分運用即時服務專員轉接功能。

建構項目

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

49aca3df6b196c50.png

課程內容

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

本程式碼研究室著重於使用 Business Message API 實作真人客服人員轉接功能。您可以查看各個階段的初始程式碼，但只需實作與商家訊息相關的程式碼即可。

軟硬體需求

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

2. 建立回音機器人

在這個步驟中，您將部署名為「Echo bot」的基本 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。
  • 路由：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 工具，讓它使用您的 Google Cloud 專案，方法是設定您用於註冊 API 的專案 ID。

gcloud config set project <PROJECT_ID>

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

gcloud app deploy

請留意最後一行指令輸出內容中部署應用程式的網址：

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

您剛部署的 Starter Code 包含一個網頁應用程式，其中的 webhook 可用來接收 Business Messages 傳送的訊息。應用程式會將訊息回送給使用者，並將訊息會話記錄到 Cloud Datastore。

設定您的代理程式

前往 Business Communications Developer Console 中的「帳戶設定」頁面，然後將 webhook 設為已部署應用程式的網址。例如：https://PROJECT_ID.appspot.com/callback/。

接著，在「Agent information」頁面中，將主要和次要互動類型分別設為「Bot」和「Human」。

db0cca5b74f999ad.png

與 Echo 機器人對話

在開發人員控制台中開啟您的服務機器人。您會看到「總覽」頁面，可查看代理商的詳細資料。複製符合行動測試裝置的代理程式測試網址。在行動裝置上使用這個網址，即可啟動服務機器人的對話介面。

536313929e5c0b3e.png

傳送幾則訊息與客服專員互動。對話介面只會複製您說的內容，這並不是很實用的使用者體驗。希望能與真人對話！

3. 加入對話

接著，我們來看看直播服務專員的角度。服務專員必須先瞭解對話內容，例如對話 ID，才能加入對話。另外，也建議瞭解使用者是否已要求與真人服務專員交談。在這個步驟中，您將使用基本客戶關係管理 (CRM) 頁面查看這項資訊，並以即時服務專員的身分加入對話。

這個步驟的起始程式碼會新增基本客戶關係管理系統，列出服務專員的所有持續對話串。我們來看看顧客關係管理系統，看看哪些對話可能需要真人客服人員處理。

前往 step-2 目錄，然後如上一個步驟所述，再次部署應用程式。

部署應用程式時，您會看到目標網址。在瀏覽器中前往這個網址，即可查看上一個步驟中開始的對話串清單。對話狀態目前為「由機器人管理」，因為在本次對話中，回音機器人會代表我們的服務專員。

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 目錄並重新部署應用程式。在 CRM 中，按一下上一個步驟中的對話串。您現在應該會看到基本即時通訊介面。您可以在這裡即時查看使用者的訊息。

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 已使用這項方法，傳送來自回音機器人的回應。這個方法會先將傳入的訊息資料儲存在對話的 Cloud Datastore 物件中。然後傳送回應訊息。請仔細查看它建立的訊息物件，特別是代表類型。

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

完成後，請重新部署應用程式，然後返回 CRM 中的對話。你現在可以看到訊息顯示在即時通訊記錄中。你也可以在行動測試裝置上看到客服專員的訊息。

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。

最後一個步驟會向使用者說明對話狀態。當服務專員離開即時通訊時，使用者會看到事件，但不一定知道自己又在與回音機器人對話。直接透過機器人傳送訊息，可減少使用者困惑，並改善使用體驗。

機器人現在已處理完問題，服務專員可以自由加入其他對話。您可以盡情試用程式碼範例和 CRM。測試您對商家即時服務轉接體驗的想法，看看結果如何。

6. 總結

恭喜您完成了即時服務代理轉接程式碼研究室！

您已建立可處理真人服務專員轉接作業的服務專員。您也學會了如何透過 Cloud Datastore 追蹤對話狀態。

透過轉接至真人服務專員的功能，您可以將常見的要求交給機器人，讓真人服務專員處理更複雜的諮詢。使用者會對新版客製化且實用的體驗更滿意，因此更有可能回訪您的商家，並向朋友推薦您的商家。

後續步驟

請查看以下程式碼研究室：

其他資訊

參考文件