Amazon Connect 스크린팝에 발신자 연락처 속성을 표시하려면 어떻게 해야 합니까?

최종 업데이트 날짜: 2020년 1월 17일

고객이 Amazon Connect 콜 센터에 전화할 때 상담원이 볼 수 있도록 연락처 속성을 표시하려고 합니다. 어떻게 설정해야 합니까?

간략한 설명

Amazon Connect Contact Control Panel(CCP)에서 상담원에 대한 발신자 연락처 속성을 보여주는 스크린팝을 사용합니다. 스크린팝은 Amazon Connect 인스턴스 CCP에서 직접 사용할 수 없습니다. 대신 Amazon Connect Streams API를 사용하여 CCP를 사용자 지정 웹 애플리케이션에 통합할 수 있습니다. 자세한 내용은 GitHub의 Amazon Connect Streams 리포지토리를 참조하십시오.

다음 지침에 따라 통화 라우팅 중 연락처 속성을 설정하는 고객 응대 흐름을 설계합니다. 그런 다음 제공된 예제 코드를 사용하여 예제 웹 애플리케이션을 생성합니다. 이 예제 설정의 경우 연락처 속성 값을 테스트로 하드 코딩할 수 있습니다. 고급 설정을 위해 AWS Lambda를 사용하여 고객 정보의 Amazon DynamoDB 데이터베이스에 데이터 딥을 수행함으로써 연락처 속성 값을 검색할 수 있습니다.

자세한 내용은 CCP의 연락처 속성 사용연락처 속성 개념을 참조하십시오. 또 다른 설정 예제는 AWS 콜 센터 블로그의 Amazon Connect로 외부 스크린 팝 수행을 참조하십시오.

​해결 방법

고객 응대 흐름 생성 또는 업데이트

  1. Amazon Connect 콘솔의 [URL 액세스]에서 인스턴스의 액세스 URL을 선택합니다.
  2. 관리자 계정을 사용하여 인스턴스에 로그인합니다.
  3. 왼쪽 탐색 모음에서 [Routing(라우팅)]을 일시 중지하고 [Contact flows(고객 응대 흐름)]를 선택합니다.
  4. [Contact flows(고객 응대 흐름)]에서 업데이트할 템플릿 또는 기존 고객 응대 흐름을 선택하거나 [Create contact flow(고객 응대 흐름 생성)]을 선택하여 고객 응대 흐름을 처음부터 설계합니다. 자세한 내용은 새 고객 응대 흐름 생성을 참조하십시오.
    참고: 스크린팝 템플릿에 샘플 노트를 사용할 수 있지만 스크린팝을 설정하는 데는 필요하지 않습니다.
  5. 고객 응대 흐름 디자이너의 [Enter a name(이름 입력)]에 고객 응대 흐름의 이름을 입력합니다. (예: 스크린팝에 대한 연락처 속성)
  6. [저장]을 선택합니다.

자세한 내용은 Amazon Connect 고객 응대 흐름 생성을 참조하십시오.

연락처 속성 설정 블록 추가

중요: 이 블록에서 정의하는 연락처 속성은 사용자 지정 웹 애플리케이션에 사용하는 HTML 파일에서 참조되어야 합니다.

  1. 고객 응대 흐름 디자이너에서 [설정]을 선택한 다음 [Set contact attributes(연락처 속성 설정)] 블록을 캔버스로 끌어 놓습니다.
  2. 블록 제목(고객 응대 속성 설정 )을 선택합니다. 블록 설정 메뉴가 열립니다.
  3. [Attribute to save(저장할 속성)]에서 [Use text(텍스트 사용)]을 선택한 후 다음을 수행합니다.
    [Destination key(대상 키)]에 firstName과 같은 첫 번째 이름 속성의 이름을 입력합니다.
    [Value(값)]에 테스트할 예제 이름을 입력합니다. 예를 들어 Alexa를 입력합니다.
  4. [Add another attribute(다른 속성 추가)]를 선택합니다.
  5. 새 속성에서 [Use text(텍스트 사용)]를 선택한 후 다음을 수행합니다.
    [Destination key(대상 키)]에 전화 번호 속성의 이름을 입력합니다 예: phoneNumber.
    []에 테스트할 전화 번호 예제를 입력합니다. 예를 들어 123-456-7890을 입력합니다.
  6. [Add another attribute(다른 속성 추가)]를 선택합니다.
  7. 새 속성에서 [Use text(텍스트 사용)]를 선택한 후 다음을 수행합니다.
    [Destination key(대상 키)]에 계정 번호 속성의 이름을 입력합니다 예: accountNumber.
    []에 테스트를 위한 예제 계정 번호를 입력합니다. 예를 들어 9876543210을 입력합니다.
  8. [저장]을 선택합니다.

연락처 전송 설정

[Set working queue(작업 대기열 설정)] 블록과 [Transfer to queue(대기열로 전송)] 블록을 추가합니다. 자세한 내용은 연락처 전송 설정을 참조하십시오.

블록 연결

고객 응대 흐름 디자이너에서 각 블록의 화살표를 다음 작업을 수행할 블록으로 끌어 놓습니다. 고객 응대 흐름을 게시하려면 먼저 모든 커넥터가 블록에 연결되어야 합니다.

  • 각 블록에 대해 다음 순서로 [시작] 또는 [성공]을 다음 블록에 연결합니다.
    진입점 > 연락처 속성 설정 > 작업 대기열 설정 > 대기열로 전송
  • 각 블록에 대해 [Error(오류)] 및 [At capacity(용량 수준)]을 [Disconnect / hang up(연결 해제/중단)] 블록에 연결합니다.

고객 응대 흐름 저장 및 게시

  1. [Save]를 선택합니다.
  2. [Save flow] 대화 상자에서 [Save]를 선택합니다.
  3. [Publish]를 선택합니다.
  4. [Publish(게시)] 대화 상자에서 [Publish(게시)]를 선택합니다.

사용자 지정 웹 애플리케이션에서 CCP 설정

Streams API를 사용하여 Amazon Connect CCP를 사용자 지정 웹 애플리케이션에 통합합니다. 웹 페이지를 사용하여 Streams API를 설정하는 방법에 대한 자세한 내용은 GitHub의 Amazon Connect Streams 설명서를 참조하십시오.

이 예제 코드는 Amazon Simple Storage Service(Amazon S3)에서 정적 웹 사이트로 호스팅되는 기본 HTML 파일에 CCP를 통합합니다. 상담원이 발신자에게 연결할 때 스크린팝이 표시됩니다. 통화가 수락되거나 상담원으로 라우팅될 때 스크린팝이 표시되도록 할 수도 있습니다.

참고: 필요에 따라 이 코드를 수정하여 고객 응대 흐름의 연락처 속성 설정 블록에서 정의한 대로 연락처 속성을 참조해야 합니다. 또한 bucketName을 S3 버킷 이름으로 바꾸고 connectInstanceName을 Amazon Connect 인스턴스 이름으로 바꿔야 합니다. 자세한 내용은 버킷 액세스CCP 시작을 참조하십시오.

<!--Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.-->
<!--SPDX-License-Identifier: MIT-0-->

<html>
<head>
 <script src="http://bucketName.s3-website-us-east-1.amazonaws.com/amazon-connect-v1.1.1-2-g0b8509c.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://connectInstanceName.awsapps.com/connect/ccp#/',        /*REQUIRED (*** has been replaced) */
   loginPopup:    true,          /*optional, default TRUE*/
   softphone:     {              /*optional*/
      allowFramedSoftphone: true
   }
});
connect.contact(function(contact) {

        contact.onIncoming(function(contact) {
        });

        contact.onRefresh(function(contact) {
        });

        contact.onAccepted(function(contact) {
        });

        contact.onEnded(function() {
        });

        contact.onConnected(function() {
                console.log(`onConnected(${contact.getContactId()})`);
                var attributeMap = contact.getAttributes();
                var name = JSON.stringify(attributeMap["name"]["value"]);
                var phone = JSON.stringify(attributeMap["phoneNumber"]["value"]);
                var account = JSON.stringify(attributeMap["accountNumber"]["value"]);
                console.log(name);
                console.log(phone);
                console.log(account);
                window.alert("Customer's name: " + name + "\nCustomer's phone #: " + phone + "\nCustomer's account #: " + account);

        });
});
</script>
</body>
</html>

문제 해결

Streams API 관련 문제를 해결하려면 스크립트에서 console.log() 문을 사용합니다. 웹 페이지에서 웹 브라우저 개발자 도구의 콘솔에서 로깅 출력을 봅니다.