Global outage event

If you're experiencing issues with your AWS services, then please refer to the AWS Health Dashboard. You can find the overall status of ongoing outages, the health of AWS services, and the latest updates from AWS engineers.

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

5분 분량

Amazon Connect 고객 응대 센터의 에이전트에게 고객이 걸어오는 통화의 연락처 속성을 볼 수 있게 해 주고 싶습니다. 어떻게 설정하나요?

간략한 설명

Amazon Connect Contact Control Panel(CCP)에서 에이전트에게 발신자 연락처 속성을 표시하려면 스크린팝을 사용하십시오.

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

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

고객 응대 흐름을 만들거나 업데이트하여 통화 라우팅 중에 연락처 속성을 설정합니다.
사용자 지정 웹 애플리케이션에서 Amazon Connect 인스턴스의 CCP를 설정합니다.

자세한 내용은 CCP의 연락처 사용을 참조하십시오.

해결 방법

참고: 이 예제 설정에서는 연락처 속성 값을 테스트로 하드 코딩할 수 있습니다. 고급 설정의 경우 AWS Lambda를 사용하여 Amazon DynamoDB 데이터베이스에서 고객 정보를 검색하여 연락처 속성 값을 검색할 수 있습니다. 비슷한 예를 보려면 Amazon Connect 고객 응대 센터에서 에이전트간 통화 연장을 설정하려면 어떻게 해야 합니까?를 참조하십시오.

고객 응대 흐름을 만들거나 업데이트하여 통화 라우팅 중에 연락처 속성을 설정

고객 응대 흐름 디자이너에서 새 고객 응대 흐름을 만들거나 기존 통화 흐름 열기

1. Amazon Connect 콘솔을 엽니다.

2. 액세스 URL에서 Amazon Connect 인스턴스의 액세스 URL을 선택합니다.

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

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

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

-또는-

사용자 지정 고객 응대 흐름을 설계하려면 고객 응대 흐름 생성을 선택합니다.

6. 고객 응대 흐름 디자이너에서 이름 입력에 고객 응대 흐름의 이름을 입력합니다. 예를 들면 다음과 같습니다. 스크린팝의 연락처 속성.

7. 저장을 선택합니다.

자세한 내용은 새 고객 응대 흐름 만들기를 참조하십시오.

연락처 속성 설정 블록 추가

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

키-값 쌍을 연락처 속성으로 저장하려면 연락처 속성 설정 블록을 사용하십시오.

1. 고객 응대 흐름 디자이너에서 설정을 선택합니다. 그런 다음 연락처 속성 설정 블록을 캔버스에 끌어다 놓습니다.

2. 블록 제목(연락처 속성 설정)을 선택합니다. 블록의 설정 메뉴가 열립니다.

3. 저장할 속성에서 텍스트 사용을 선택합니다. 그런 다음, 아래와 같이 수행합니다.
대상 키에는 firstName과 같은 이름 속성의 이름을 입력합니다.
값에 테스트할 이름 예시를 입력합니다. 예를 들면 다음과 같습니다. Alexa

4. 다른 속성 추가를 선택합니다.

5. 새 속성에서 텍스트 사용을 선택합니다. 그런 다음, 아래와 같이 수행합니다.
대상 키에 전화번호 속성의 이름을 입력합니다. 예를 들면 다음과 같습니다. phoneNumber
값 에 테스트용 전화번호 예시를 입력합니다. 예를 들면 다음과 같습니다. 123-456-7890

6. 다른 속성 추가를 선택합니다.

7. 새 속성에서 텍스트 사용을 선택합니다. 그런 다음, 아래와 같이 수행합니다.
대상 키에 계정 번호 속성의 이름을 입력합니다. 예를 들면 다음과 같습니다. accountNumber
값에 테스트용 예시 계정 번호를 입력합니다. 예를 들면 다음과 같습니다. 9876543210

8. 저장을 선택합니다.

대기열로 전송 블록 추가

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

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

작업 대기열 설정 블록 추가

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

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

**블록 연결 **

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

고객 대응 흐름 디자이너에서 다음을 수행하여 각 블록의 화살표를 다음 작업을 수행하려는 블록으로 드래그합니다.

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

2. 각 블록에 대해 오류 및 용량을 연결 해제/중단 블록에 연결합니다.

고객 응대 흐름 저장 및 게시

1. 저장을 선택합니다.

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

3. 게시를 선택합니다.

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

사용자 지정 웹 애플리케이션에서 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()를 참조하십시오.