Come posso configurare un widget di chat per la mia applicazione che interagisca in modo nativo con le API di Amazon Connect e Amazon Connect Participant Service?

5 minuti di lettura
0

Voglio imparare a configurare un widget di chat che interagisca in modo nativo con le API di Amazon Connect e Amazon Connect Participant Service per abilitare la chat con i clienti nella mia applicazione.

Risoluzione

Per avviare i contatti di chat con i clienti direttamente dalla tua applicazione con le API Amazon Connect e Amazon Connect Participant Service, procedi come segue:

Quando un cliente avvia un contatto tramite chat, chiama l'API StartChatContact di Amazon Connect

Configura la tua applicazione per chiamare l'API StartChatContact di Amazon Connect quando un cliente avvia un contatto di chat. La risposta API restituisce un valore ParticipantToken. Questo valore è necessario per chiamare l'API ** CreateParticipantConnection**.

**Importante:**Il cliente che effettua la chiamata API deve disporre delle autorizzazioni AWS Identity and Access Management (IAM) per eseguire l'azione Connect:StartChatContact.

Usa il modello amazon-connect-chat-ui-examples AWS CloudFormation sul sito Web GitHub per distribuire le risorse necessarie per chiamare l'API StartChatContact. Il modello crea un endpoint Amazon API Gateway che richiama una funzione AWS Lambda che include le autorizzazioni IAM richieste. La funzione AWS Lambda richiama l'API StartChatContact di Amazon Connect e restituisce il risultato di tale chiamata.

Esempio di richiesta API StartChatContact (JavaScript)

Se usi axios nella tua applicazione, inserisci il seguente codice JavaScript per chiamare l'API StartChatContact:

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
    }
  }
);

Per ulteriori informazioni, consulta il comando axios sul sito web GitHub.

Chiama l'API CreateParticipantConnection di Amazon Connect Participant Service e passa il valore ParticipantToken

Configura la tua applicazione per chiamare l'API CreateParticipantConnection di Amazon Connect Participant Service dopo l'avvio di un contatto di chat.

Quando richiami l'API CreateParticipantConnection, viene generato un URL WebSocket e un ConnectionToken. I clienti devono connettersi manualmente all'URL WebSocket e iscriversi all'argomento desiderato ("aws/chat") per creare la connessione del partecipante alla chat.

**Nota:**Le API di Amazon Connect Participant Service non utilizzano l'autenticazione Signature Version 4. Per il valore dell'intestazione della richiesta X-Amz-Bearer, è necessario utilizzare invece il valore ParticipantToken o ConnectionToken. Il valore ParticipantToken viene utilizzato solo per chiamare l'API CreateParticipantConnection. Altre API di Amazon Connect Participant Service richiedono il passaggio del valore ConnectionToken.

Esempio di richiesta API CreateParticipantConnection (JavaScript):

Se usi axios nella tua applicazione, inserisci il seguente codice JavaScript per chiamare l'API CreateParticipantConnection:

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
});

Crea una connessione WebSocket con l'URL WebSocket restituito e iscrivi l'applicazione all'argomento "aws/chat"

Dopo aver richiamato l'API CreateParticipantConnection, il cliente deve connettersi manualmente all'URL WebSocket restituito e iscriversi all'argomento "aws/chat".

Per ulteriori informazioni, consulta CreateParticipantConnection nel riferimento alle API di Amazon Connect Participant Service.

Esempio di codice JavaScript che crea una connessione WebSocket e iscrive un client all'argomento "aws/chat":

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))
});

Ricevi eventi e messaggi di chat tramite la connessione WebSocket

Dopo aver aperto la connessione WebSocket e aver sottoscritto l'argomento "aws/chat", puoi ricevere eventi e messaggi di chat tramite WebSocket. Per fare ciò, aggiungi un ascoltatore di eventi per l'evento "message".

Esempio di codice JavaScript che crea un ascoltatore di eventi per l'evento "message":

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
    }
  }
}

Per ulteriori informazioni sulla struttura dell'oggetto ResponseMessage, consulta Item nella documentazione di Amazon Connect.

Invio di messaggi di chat o eventi chiamando le API di Amazon Connect Participant Service

**Nota:**Non è possibile inviare messaggi o eventi direttamente tramite la connessione WebSocket. È invece necessario utilizzare una delle API di Amazon Connect Participant Service.

Per inviare messaggi di chat, chiama l'API SendMessage di Amazon Connect Participant Service. Oppure, per inviare eventi, chiama l'API SendEvent di Amazon Connect Participant Service.

**Importante:**Per l'intestazione della richiesta X-Amz-Bearer, utilizza il valore ConnectionToken restituito dall'API CreateParticipantConnection.

Esempio di richiesta API SendMessage (JavaScript)

Se usi axios nella tua applicazione, inserisci il seguente codice JavaScript per chiamare l'API SendMessage:

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
  });

Esempio di richiesta API SendEvent (JavaScript)

Se utilizzi axios nella tua applicazione, utilizza il seguente codice JavaScript per chiamare l'API SendEvent:

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 UFFICIALE
AWS UFFICIALEAggiornata 10 mesi fa