Wie richte ich ein Chat-Widget für meine Anwendung ein, das nativ mit Amazon Connect und Amazon-Connect-Participant-Service-APIs interagiert?

Lesedauer: 5 Minute
0

Ich möchte lernen, wie ich ein Chat-Widget einrichte, das nativ mit Amazon Connect und Amazon-Connect-Participant-Service-APIs interagiert, um den Kundenchat in meiner Anwendung zu ermöglichen.

Behebung

Gehen Sie wie folgt vor, um Kunden-Chat-Kontakte direkt von Ihrer Anwendung aus mit Amazon Connect und Amazon Connect Participant Service APIs zu initiieren:

Rufen Sie die Amazon-Connect-API StartChatContact auf, wenn ein Kunde einen Chat-Kontakt initiiert

Konfigurieren Sie Ihre Anwendung so, dass die Amazon-Connect-API StartChatContact aufgerufen wird, wenn ein Kunde einen Chat-Kontakt initiiert. Die API-Antwort gibt einen ParticipantToken-Wert zurück. Dieser Wert ist erforderlich, um die API CreateParticipantConnection aufzurufen.

Wichtig: Der Client, der den API-Aufruf tätigt, muss über AWS Identity and Access Management (IAM)-Berechtigungen verfügen, um die Aktion connect:StartChatContact ausführen zu können.

Verwenden Sie die AWS-CloudFormation-Vorlage amazon-connect-chat-ui-examples auf der GitHub-Website, um die Ressourcen bereitzustellen, die für den Aufruf der API StartChatContact erforderlich sind. Die Vorlage erstellt einen Amazon-API-Gateway-Endpunkt, der eine AWS-Lambda-Funktion aufruft, die die erforderlichen IAM-Berechtigungen enthält. Die AWS-Lambda-Funktion ruft die Amazon-Connect-API ** StartChatContact** auf und gibt das Ergebnis dieses Aufrufs zurück.

Beispiel-API-Anfrage für StartChatContact (JavaScript)

Wenn Sie Axios in Ihrer Anwendung verwenden, verwenden Sie den folgenden JavaScript-Code, um die API StartChatContact aufzurufen:

const startChatApi = "https://xxxxxxxxxx.execute-api.<region>.amazonaws.com/Prod"; // API endpoint you deployed with the CloudFormation template.
...

axios.post(
  startChatApi,
  {
    ParticipantDetails: {
      DisplayName: "CUSTOMER" // A display name of your customer during a chat contact
    }
  }
);

Weitere Informationen finden Sie auf der GitHub-Website im Abschnitt zum Befehl axios.

Rufen Sie die Amazon-Connect-Participant-Service-API CreateParticipantConnection auf und übergeben Sie den ParticipantToken-Wert

Konfigurieren Sie Ihre Anwendung so, dass die Amazon-Connect-Participant-Service-API CreateParticipantConnection aufgerufen wird, nachdem ein Chat-Kontakt initiiert wurde.

Wenn Sie die API CreateParticipantConnection aufrufen, gibt sie eine WebSocket-URL und ConnectionToken zurück. Clients müssen manuell eine Verbindung zur WebSocket-URL herstellen und das gewünschte Thema („aws/chat“) abonnieren, um die Verbindung des Chat-Teilnehmers herzustellen.

Hinweis: Die Amazon-Connect-Participant-Service-APIs verwenden keine Authentifizierung per Signature Version 4. Für den Anforderungsheaderwert X-Amz-Bearer müssen Sie stattdessen entweder den Wert ParticipantToken oder ConnectionToken verwenden. Der Wert ParticipantToken wird nur zum Aufrufen der API CreateParticipantConnection verwendet. Bei anderen Amazon-Connect-Participant-Service-APIs müssen Sie den Wert ConnectionToken übergeben.

Beispiel-API-Anfrage für CreateParticipantConnection (JavaScript):

Wenn Sie Axios in Ihrer Anwendung verwenden, verwenden Sie den folgenden JavaScript-Code, um die API CreateParticipantConnection aufzurufen:

const participantServiceEndpoint = "https://participant.connect.<region>.amazonaws.com";// Replace <region> with the one that you are using. i.e. us-west-2. Endpoint list is available in https://docs.aws.amazon.com/general/latest/gr/connect_region.html

...

const requestHeaders = {
  "X-Amz-Bearer": "ParticipantToken", // Replace "ParticipantToken" with the one you obtained from the response of StartChatContact API
  "Content-type": "application/json"
};
const requestBody = {
  "Type": ["WEBSOCKET", "CONNECTION_CREDENTIALS"]
};

axios.post(participantServiceEndpoint + "/participant/connection", requestBody, {
  headers: requestHeaders
});

Erstellen einer WebSocket-Verbindung mit der zurückgegebenen WebSocket-URL und abonnieren Sie die Anwendung für das Thema „aws/chat“

Nachdem Sie die API CreateParticipantConnection aufgerufen haben, muss der Client manuell eine Verbindung zur zurückgegebenen WebSocket-URL herstellen und das Thema „aws/chat“ abonnieren.

Weitere Informationen finden Sie unter CreateParticipantConnection in der Referenz zur Amazon-Connect-Participant-Service-API.

**Beispiel für JavaScript-Code, der eine WebSocket-Verbindung herstellt und einen Client für das Thema „aws/chat“ abonniert: **

const ws = new WebSocket(websocketUrl); // Here, you use the websocket URL that you obtained from the response of CreateParticipantConnection API
const initialMessage = {
  topic: "aws/subscribe",
  content: {
    topics: ["aws/chat"]
  }
};
ws.addEventListener("open", () => {
  ws.send(JSON.stringify(initialMessage))
});

Empfangen von Chat-Ereignisse und Nachrichten über die WebSocket-Verbindung

Nachdem Sie die WebSocket-Verbindung geöffnet und das Thema „aws/chat“ abonniert haben, können Sie Chat-Ereignisse und Nachrichten über den WebSocket empfangen. Fügen Sie dazu einen Event-Listener für das Ereignis „message“ hinzu.

Beispiel für JavaScript-Code, der einen Event-Listener für das Ereignis „message“ erstellt:

ws.addEventListener("message", (event) => {
  // process event here
  const response = JSON.parse(event.data);
  if (response.topic === "aws/chat") {
  const responseMessage = JSON.parse(response.content);
    if (responseMessage.Type === "MESSAGE") {
      // display message in interface here
    }
  }
}

Weitere Informationen zur Struktur des Objekts responseMessage finden Sie unter Artikel in der Amazon-Connect-Dokumentation.

Senden von Chat-Nachrichten oder Ereignisse über Amazon-Connect-Participant-Service-APIs

Hinweis: Sie können Nachrichten oder Ereignisse nicht direkt über die WebSocket-Verbindung senden. Sie müssen stattdessen eine der Amazon-Connect-Participant-Service-APIs verwenden.

Um Chat-Nachrichten zu senden, rufen Sie die Amazon-Connect-Participant-Service-API SendMessage auf. Oder rufen Sie zum Senden von Ereignissen die Amazon-Connect-Participant-Service-API SendEvent auf.

**Wichtig:**Verwenden Sie für den Anforderungsheader X-Amz-Bearer den Wert ConnectionToken, der von der API CreateParticipantConnection zurückgegeben wird.

Beispiel-API-Anfrage für SendMessage (JavaScript)

Wenn Sie Axios in Ihrer Anwendung verwenden, verwenden Sie den folgenden JavaScript-Code, um die API SendMessage aufzurufen:

const requestHeaders = {  "X-Amz-Bearer": "ConnectionToken", // Replace "ConnectionToken" with the one you obtained from the response of CreateParticipantConnection API
  "Content-type": "application/json"
};
const requestBody = {
  "ClientToken": "unique string", // [Optional] A unique, case-sensitive identifier that you provide to ensure the idempotency of the request
  "Content": message, // The actual chat message
  "ContentType": "text/plain", // Currently, supported type is text/plain
};

axios.post(participantServiceEndpoint + "/participant/message", requestBody, {
  headers: requestHeaders
  });

Beispiel-API-Anfrage für SendEvent (JavaScript)

Wenn Sie Axios in Ihrer Anwendung verwenden, verwenden Sie den folgenden JavaScript-Code, um die API SendEvent aufzurufen:

const requestHeaders = {  "X-Amz-Bearer": "ConnectionToken", //Replace "ConnectionToken" with the one you obtained from the response of CreateParticipantConnection API
  "Content-type": "application/json"
};
const requestBody = {
  "ClientToken": "unique string", //[Optional] A unique, case-sensitive identifier that you provide to ensure the idempotency of the request
  "ContentType": "application/vnd.amazonaws.connect.event.typing", //Typing event. You can specify "application/vnd.amazonaws.connect.event.connection.acknowledged" for acknowledged event
};

axios.post(participantServiceEndpoint + "/participant/event", requestBody, {
  headers: requestHeaders
});
AWS OFFICIAL
AWS OFFICIALAktualisiert vor 10 Monaten