調查將聊天使用者界面新增到您網站的常見問題

本主題適用於需要調查在 Amazon Connect 管理網站中設定通訊 Widget 時可能發生的問題的開發人員。

「出了什麼問題」

如果您在載入通訊小工具時看到下列發生錯誤的錯誤訊息，請開啟瀏覽器工具以檢視錯誤記錄。

以下是可能導致此錯誤的問題：

400 無效的請求

如果記錄檔提到 400 無效請求，可能的原因有幾個：

• 您的通訊小工具未在允許的網域上提供服務。您必須特別聲明您將託管小工具的網域。

• 對端點的請求格式不正確。這通常只有在內嵌程式碼片段的內容已被修改時才會發生。

401 (未經授權)

如果日誌提到 401 未經授權，這是 JSON Web 權杖 (JWT) 身分驗證的問題。

擁有 JWT 後，您需要在 authenticate 回呼函數中實作它。下面的範例顯示如果您嘗試獲取權杖並使用它時如何實作：

amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});   

以下是需要實作的內容更基礎的版本：

amazon_connect('authenticate', function(callback) {
   callback(token);
});  

如需實作 JWT 的詳細資訊，請參閱 步驟 3：確認並複製通訊小工具程式碼和安全密鑰。

如果您已經實作了回呼函數，則以下情況仍可能導致 401：

• 無效的簽章

• 權杖過期

404 找不到

404 狀態碼表示找不到您的 widgetId。確認您的程式碼片段正是從 Amazon Connect 網站複製的方式，而且沒有更改任何識別符。

如果識別碼未變更，而您看到 404，請聯絡 AWS 支援部門。

500 內部伺服器錯誤

這可能是因為您的服務連結角色沒有開始聊天所需的許可。如果您的 Amazon Connect 執行個體是在 2018 年 10 月之前建立的，因為您沒有設定服務連結角色，就會發生這種情況。

解決方案：針對與 Amazon Connect 執行個體關聯的角色新增 connect:* 政策。如需詳細資訊，請參閱 使用 Amazon Connect 的服務連結角色。

如果您的服務連結角色具有正確的許可，請連絡 AWS 支援部門。

客戶未收到代理程式訊息：網路或 WebSocket中斷連線

在聊天工作階段期間，使用聊天應用程式的客戶會遺失其網路/WebSocket 連線。他們很快重新獲得連接，但是在此期間由代理發送的消息不會呈現在客戶的聊天界面中。

下圖顯示了客戶的聊天界面和代理的聯繫人控制面板的示例 side-by-side。代理程式傳送的訊息不會呈現在客戶的聊天工作階段中。但是，對代理來說，就好像客戶已收到它一樣。

如果客戶的聊天應用程序失去了它的網絡/WebSocket 連接，聊天用戶界面必須執行以下操作以檢索 future 的消息以及斷開連接時發送給它的消息：

• 重新建立 WebSocket 連接以再次接收 future 的傳入消息。

• 進行聊天。GetTransScript（獲取成績腳本 API）請求，以檢索客戶斷開連接時發送的所有丟失消息。

如果代理程式在客戶的聊天使用者介面中斷連線時傳送訊息，則訊息會成功儲存在 Amazon Connect 後端：CCP 正如預期運作，訊息全部記錄在記錄單中，但客戶的裝置無法接收訊息。當用戶端重新連線到時 WebSocket，訊息中會有間隙。未來的傳入訊息會從中再次出現 WebSocket，但除非程式碼明確呼叫 GetTranscriptAPI，否則間隙訊息仍會遺失。

解決方案

使用聊天 .on ConnectionEstablished 事件處理常式來呼叫 API。GetTranscriptchatSession.onConnectionEstablished事件處理程序在 WebSocket 重新連接時觸發。ChatJS 具有內置的心跳和 WebSocket 連接的重試邏輯。但是，由於 ChatJS 不存儲成績單，因此您必須在聊天用戶界面中添加自定義代碼才能再次手動獲取成績單。

下列程式碼範例示範如onConnectionEstablished何實作呼叫GetTranscript。

import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});

function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}      

如需另一個範例，請參閱上的這個開放原始碼實作 GitHub。