Wie richte ich ein Chat-Widget für meine Anwendung ein, das nativ mit Amazon Connect und Amazon-Connect-Participant-Service-APIs interagiert?
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 });
Relevanter Inhalt
- AWS OFFICIALAktualisiert vor einem Jahr
- AWS OFFICIALAktualisiert vor 3 Jahren
- AWS OFFICIALAktualisiert vor einem Jahr
- AWS OFFICIALAktualisiert vor 3 Jahren