Amazon Connect에서 호스팅하는 웹 사이트에 채팅 사용자 인터페이스 추가

1. Amazon Connect 관리자 웹 사이트 https://에 로그인합니다.instance name.my.connect.aws/. 커뮤니케이션 위젯 사용자 지정을 선택합니다.

   

2. 커뮤니케이션 위젯 페이지에서 커뮤니케이션 위젯 추가를 선택하여 새 커뮤니케이션 위젯 경험을 사용자 지정하기 시작합니다. 기존 커뮤니케이션 위젯을 편집, 삭제 또는 복제하려면 다음 이미지와 같이 작업 열 아래의 옵션 중에서 선택합니다.

   

3. 커뮤니케이션 위젯의 이름과 설명을 입력합니다.

   참고

   이름은 Amazon Connect 인스턴스에서 만든 각 커뮤니케이션 위젯마다 고유해야 합니다.

4. 커뮤니케이션 옵션 섹션에서 고객이 위젯을 사용할 수 있는 방법을 선택한 다음 저장 후 계속을 선택합니다. 다음 이미지는 고객에게 채팅 및 메시지 수신을 허용하는 옵션을 보여줍니다.

   

5. 커뮤니케이션 위젯 생성 페이지에서 위젯 버튼 스타일과 표시 이름 및 스타일을 선택합니다.

   이러한 옵션을 선택하면 위젯 미리 보기가 자동으로 업데이트되어 고객 경험이 어떨지 확인할 수 있습니다.

   

버튼 스타일

1. 16진수 값( 색상HTML 코드 )을 입력하여 버튼 배경의 색상을 선택합니다.

2. 아이콘 색상으로 흰색 또는 검은색을 선택합니다. 아이콘 색상은 사용자 지정할 수 없습니다.

위젯 헤더

1. 헤더 메시지 및 색상, 위젯 배경색 값을 입력합니다.

2. 로고 URL: Amazon S3 버킷 또는 다른 온라인 소스에서 로고 배너URL에 를 삽입합니다.

   참고

   Amazon S3 버킷이 아닌 온라인 소스에서 로고를 가져온 경우에는 사용자 지정 페이지의 커뮤니케이션 위젯 미리 보기에 로고가 표시되지 않습니다. 그러나 사용자 지정 커뮤니케이션 위젯이 페이지에 구현되면 로고가 표시됩니다.

   배너는 .svg, .jpg 또는 .png 형식이어야 합니다. 이미지는 280px(너비) x 60px(높이)까지 가능합니다. 이 크기보다 큰 이미지는 280x60 로고 구성 요소 공간에 맞게 크기가 조정됩니다.

   1. 로고 배너와 같은 파일을 S3에 업로드하는 방법에 대한 지침은 Amazon Simple Storage Service 사용 설명서의 객체 업로드 섹션을 참조하세요.

   2. 커뮤니케이션 위젯이 이미지에 액세스할 수 있는 권한을 갖도록 이미지 권한이 올바르게 설정되어 있는지 확인하세요. S3 객체에 공개적으로 액세스할 수 있도록 설정하는 방법에 대한 자세한 내용은 2단계: 웹 사이트 액세스 권한 설정 주제의 버킷 정책 추가 섹션을 참조하세요.

채팅 보기

1. 서체: 드롭다운을 사용하여 커뮤니케이션 위젯의 텍스트에 사용할 서체를 선택합니다.

2. • 시스템 메시지 표시 이름: 기본값을 재정의할 새 표시 이름을 입력합니다. 기본값은 SYSTEM_MESSAGE입니다.

   • 봇 메시지 표시 이름: 기본값을 재정의할 새 표시 이름을 입력합니다. 기본값은 입니다BOT.

   • 텍스트 입력 자리 표시자: 기본값을 재정의하는 새 자리 표시자 텍스트를 입력합니다. 기본값은 메시지 입력입니다.

   • 채팅 종료 버튼 텍스트: 기본값을 대체할 새 텍스트를 입력합니다. 기본값은 채팅 종료입니다.

3. 에이전트 채팅 버블 색상 : 16진수 값(색상HTML 코드 )을 입력하여 에이전트의 메시지 버블 색상을 선택합니다.

4. 고객 채팅 버블 색상 : 16진수 값( 색상HTML 코드 )을 입력하여 고객의 메시지 버블 색상을 선택합니다.

5. [Save and continue]를 선택합니다.

1. 커뮤니케이션 위젯을 배치할 웹 사이트 도메인을 입력합니다. 이 단계에서 선택한 웹 사이트에서만 채팅이 로드됩니다.

   도메인 추가를 선택하여 최대 50개의 도메인을 추가합니다.

   

   중요

   • 웹 사이트URLs가 유효하고 오류가 없는지 다시 확인합니다. https://. URL 시작하는 전체 포함

   • 프로덕션 웹 사이트 및 애플리케이션에는 https://를 사용하는 것이 좋습니다.

2. 통신 위젯에 대한 보안 추가에서 예를 선택하고 웹 사이트 관리자와 협력하여 새 채팅 요청에 대해 웹 토큰(JWTs)을 발급하도록 JSON 웹 서버를 설정하는 것이 좋습니다. 이렇게 하면 Amazon Connect로 전송된 채팅 요청이 인증된 사용자로부터 온 것인지 확인하는 기능을 포함하여 새 채팅을 시작할 때 더 많은 제어 기능을 사용할 수 있습니다.

   

   예를 선택하면 다음과 같은 결과가 표시됩니다

   • Amazon Connect는 다음 페이지에서 JSON 웹 토큰을 생성하는 데 사용할 수 있는 44자 보안 키를 제공합니다(JWTs).

   • Amazon Connect는 채팅이 시작될 때 JSON 웹 토큰(JWT)을 확인하는 콜백 함수를 통신 위젯 임베드 스크립트에 추가합니다.

     다음 예시와 같이 임베디드 조각에 콜백 함수를 구현해야 합니다.

     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });

   이 옵션을 선택하면 다음 단계에서 웹 사이트에서 시작된 모든 채팅 요청에 대한 보안 키를 받게 됩니다. 웹 사이트 관리자에게 이 보안 키를 JWTs 사용하여 문제를 일으킬 웹 서버를 설정하도록 요청합니다.

3. 저장(Save)을 선택합니다.