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

최종 업데이트 날짜: 2021년 8월 17일

Amazon Connect 고객 센터의 상담원이 수신 고객 통화의 연락처 속성을 확인할 수 있었으면 합니다. 어떻게 설정해야 하나요?

간략한 설명

Amazon Connect Contact Control Panel(CCP)에서 상담원에게 발신자 연락처 속성을 보여주려면 스크린팝을 사용합니다.

Amazon Connect에서 스크린팝을 사용하려면 Amazon Connect Streams API를 사용하여 CCP를 사용자 지정 애플리케이션에 통합해야 합니다. 스크린팝은 CCP에서 직접 사용할 수 없습니다.

이 문서의 예제 절차에서는 다음을 수행하여 CCP에 발신자 연락처 속성을 표시하는 방법을 보여 줍니다.

자세한 내용은 CCP에서 연락처 속성 사용을 참조하세요. 

해결 방법

참고: 이 예제 설정의 경우 연락처 속성 값을 테스트로 하드 코딩할 수 있습니다. 고급 설정을 위해 AWS Lambda를 사용하여 Amazon DynamoDB 데이터베이스에서 고객 정보를 검색함으로써 연락처 속성 값을 검색할 수 있습니다. 유사한 예제는 Amazon Connect 고객 센터에서 상담원 간 통화를 위해 내선을 설정하려면 어떻게 해야 하나요?를 참조하세요.

통화 라우팅 중에 연락처 속성을 설정하기 위해 고객 응대 흐름을 생성하거나 업데이트합니다.

고객 응대 흐름 디자이너에서 새 통화 흐름 생성 또는 기존 고객 응대 흐름 열기

1.    Amazon Connect 콘솔을 엽니다.

2.    [액세스 URL(Access URL)]에서 Amazon Connect 인스턴스의 액세스 URL을 선택합니다.

3.    관리자 계정을 사용하여 인스턴스에 로그인합니다.

4.    왼쪽 탐색 창에서 [라우팅(Routing)]을 일시 중지합니다. 그런 다음 [고객 응대 흐름(Contact flows)]을 선택합니다.

5.    [고객 응대 흐름(Contact flows)]에서 업데이트하려는 템플릿 또는 기존 고객 응대 흐름을 선택합니다.
참고: 스크린팝 템플릿에 샘플 노트를 사용할 수 있지만 Amazon Connect에서 스크린팝을 설정하는 데는 필요하지 않습니다.

-또는-

사용자 지정 고객 응대 흐름을 디자인하려면 [고객 응대 흐름 생성(Create contact flow)]을 선택합니다.

6.    고객 응대 흐름 디자이너에서 [이름 입력(Enter a name)]에 고객 응대 흐름의 이름을 입력합니다. 예: 스크린팝에 대한 연락처 속성.

7.    [저장(Save)]을 선택합니다.

자세한 내용은 새 고객 응대 흐름 생성을 참조하세요.

통화 속성 설정 블록 추가

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

키-값 페어를 연락처 속성으로 저장하려면 [연락처 속성 설정(Set contact attributes)] 블록을 사용합니다.

1.    고객 응대 흐름 디자이너에서 [설정(Set)]을 선택합니다. [연락처 속성 설정(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.
[값(Value)]에 테스트할 전화 번호 예제를 입력합니다. 예: 123-456-7890.

6.    [다른 속성 추가(Add another attribute)]를 선택합니다.

7.    새 속성에서 [텍스트 사용(Use text)]을 선택합니다. 이어서, 다음 작업을 수행합니다.
[대상 키(Destination key)]에 계정 번호 속성의 이름을 입력합니다. 예: accountNumber.
[값(Value)]에 테스트를 위한 예제 계정 번호를 입력합니다. 예: 9876543210.

8.    [저장(Save)]을 선택합니다.

대기열로 전송 블록 추가

현재 고객 응대 흐름을 종료하고 고객을 대기열에 배치하려면 대기열로 전송 블록을 추가합니다.

자세한 내용은 연락처 전송 설정을 참조하세요.

작업 대기열 설정 블록 추가

대기열로 전송 블록이 호출될 때 사용할 대기열을 지정하려면 작업 대기열 설정 블록을 추가합니다.

자세한 내용은 연락처 전송 설정을 참조하세요.

블록 연결

중요: 고객 응대 흐름을 게시하려면 먼저 모든 커넥터가 블록에 연결되어야 합니다.

고객 응대 흐름 디자이너에서 다음을 수행하여 각 블록의 화살표를 다음 작업을 수행할 블록으로 끌어 놓습니다.

1.    다음 순서로 각 블록의 [시작(Start)] 또는 [성공(Success)]을 다음 블록에 연결합니다.
진입점 > 연락처 속성 설정 > 작업 대기열 설정 > 대기열로 전송

2.    각 블록의 [오류(Error)] 및 [용량 초과(At capacity)]를 [연결 끊기/전화 끊기(Disconnect / hang up)] 블록에 연결합니다.

통화 흐름 저장 및 게시

1.    [저장(Save)]을 선택합니다.

2.    흐름 저장(Save flow) 대화 상자에서 저장(Save)을 선택합니다.

3.    게시(Publish)를 선택합니다.

4.    게시(Publish) 대화 상자에서 게시(Publish)를 선택합니다.

사용자 지정 웹 애플리케이션에서 Amazon Connect 인스턴스의 CCP 설정

인스턴스의 CCP를 사용자 지정 웹 애플리케이션에 통합하려면 GitHub의 Amazon Connect Streams 설명서에 있는 지침을 따릅니다.

예 상담원이 발신자와 연결할 때 스크린팝을 표시하는 Amazon Connect Streams API 코드

다음의 예제 코드는 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>
<meta charset="UTF-8">
<script type="text/javascript" src="http://bucketName.s3-website-us-east-1.amazonaws.com/connect-streams-min.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://my-instance-domain.awsapps.com/connect/ccp-v2/',        /*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["firstName"]["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>

참고: 통화가 수락되거나 상담원으로 라우팅될 때 스크린팝이 표시되도록 구성할 수도 있습니다.

Amazon Connect Streams API 관련 문제를 해결하려면 다음을 수행합니다.

스크립트에서 console.log() 문을 사용합니다. 웹 페이지에서 웹 브라우저 개발자 도구의 콘솔에서 로깅 출력을 봅니다.

자세한 내용은 MDN 웹 문서 페이지의 console.log()를 참조하세요.