本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

將聊天使用者介面新增至 Amazon Connect 網站

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

"發生錯誤"

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

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

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 連線，聊天使用者介面必須執行下列動作，才能擷取未來的訊息，以及在中斷連線時傳送給該客戶的訊息：

如果客服人員在客戶的聊天使用者介面中斷連線時傳送訊息，訊息會成功儲存在 Amazon Connect 後端： CCP 會如預期運作，且訊息都會記錄在文字記錄中，但客戶的裝置無法接收訊息。當用戶端重新連線至 時 WebSocket，訊息中會出現間隙。未來傳入的訊息會從 再次出現 WebSocket，但除非程式碼明確地呼叫 GetTranscript ，否則差距訊息仍會遺失API。

解決方案

使用 chatSession.onConnectionEstablished event handler 呼叫 GetTranscript API。chatSession.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。