Amazon Connect 및 Amazon Connect Participant Service API와 기본적으로 상호 작용하는 애플리케이션에 채팅 위젯을 설정하려면 어떻게 해야 합니까?

최종 업데이트 날짜: 2022년 3월 22일

Amazon Connect 및 Amazon Connect Participant Service API와 기본적으로 상호 작용하는 애플리케이션용 채팅 위젯을 만들고 싶습니다. 어떻게 설정해야 하나요?

해결 방법

Amazon Connect 및 Amazon Connect Participant Service API를 사용하여 애플리케이션에서 직접 고객 채팅 문의를 시작하려면 다음을 수행하도록 애플리케이션을 구성합니다.

고객이 채팅 문의를 시작할 때 StartChatContact Amazon Connect API 호출

고객이 채팅 문의를 시작할 때 StartChatContact Amazon Connect를 호출하도록 애플리케이션을 구성합니다. API 응답은 다음 단계에서 CreateParticipantConnection API를 호출하는 데 필요한 ParticipantToken 값을 반환합니다.

중요: API를 호출하는 클라이언트에서 connect:StartChatContact 작업을 수행하려면 AWS Identity and Access Management(IAM) 권한이 있어야 합니다.

애플리케이션에서 StartChatContact API를 호출하는 데 필요한 리소스를 배포하려면 GitHub 기반 AWS CloudFormation 템플릿: amazon-connect-chat-ui-examples을 사용할 수 있습니다. 템플릿은 필요한 IAM 권한을 포함하는 AWS Lambda 함수를 호출하는 Amazon API Gateway 엔드포인트를 생성합니다. AWS Lambda 함수는 Amazon Connect StartChatContact API를 호출하고 해당 호출의 결과를 반환합니다.

StartChatContact API 요청(JavaScript) 예제

애플리케이션에서 axios를 사용하는 경우, 다음 JavaScript 코드를 사용하여 StartChatContact API를 호출할 수 있습니다.

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

...

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

CreateParticipantConnection Amazon Connect Participant Service API를 호출하고 ParticipantToken 값을 전달합니다.

채팅 연락처가 시작된 후 CreateParticipantConnection Amazon Connect Participant Service API를 호출하도록 애플리케이션을 구성합니다.

CreateParticipantConnection API를 호출하면 WebSocket URL과 ConnectionToken이 반환됩니다. 클라이언트는 WebSocket URL에 수동으로 연결하고 원하는 주제(“aws/chat”)에 가입하여 채팅 참가자의 연결을 생성해야 합니다.

참고: Amazon Connect Participant Service API는 서명 버전 4 인증을 사용하지 않습니다. X-Amz-Bearer 요청 헤더 값의 경우 ParticipantToken 또는 ConnectionToken 값을 대신 사용해야 합니다. ParticipantToken 값은 CreateParticipantConnection API를 호출할 때만 사용됩니다. 다른 Amazon Connect Participant Service API를 사용하려면 ConnectionToken 값을 전달해야 합니다.

CreateParticipantConnection API 요청(JavaScript) 예제

애플리케이션에서 axios를 사용하는 경우, 다음 JavaScript 코드를 사용하여 CreateParticipantConnection API를 호출할 수 있습니다.

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

반환된 WebSocket URL을 사용하여 WebSocket 연결을 만들고 “aws/chat” 주제에 애플리케이션을 구독합니다.

CreateParticipantConnection API를 호출한 후 클라이언트는 반환된 WebSocket URL에 수동으로 연결하고 “aws/chat” 주제를 구독해야 합니다.

자세한 내용은 Amazon Connect Participant Service API 참조에서 CreateParticipantConnection 단원을 참조하세요.

WebSocket 연결을 생성하고 클라이언트가 “aws/chat” 주제를 구독할 수 있는 JavaScript 코드 예제

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

Amazon Connect Participant Service API를 호출하여 채팅 메시지 또는 이벤트를 보냅니다.

참고: WebSocket 연결을 통해 직접 메시지나 이벤트를 보낼 수 없습니다. 대신 Amazon Connect Participant Service API 중 하나를 사용해야 합니다.

채팅 메시지를 보내려면 SendMessage Amazon Connect Participant Service API를 호출합니다.

또는

이벤트를 전송하려면 SendEvent Amazon Connect Participant Service API를 호출합니다.

중요: X-Amz-Bearer 요청 헤더의 경우, CreateParticipantConnection API에서 반환되는 ConnectionToken 값을 사용해야 합니다.

SendMessage API 요청(JavaScript) 예제

애플리케이션에서 axios를 사용하는 경우, 다음 JavaScript 코드를 사용하여 SendMessage API를 호출할 수 있습니다.

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

SendEvent API 요청(JavaScript) 예제

애플리케이션에서 axios를 사용하는 경우, 다음 JavaScript 코드를 사용하여 SendEvent API를 호출할 수 있습니다.

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

이 문서가 도움이 되었나요?


결제 또는 기술 지원이 필요하세요?