고객 채팅 인터페이스 설정

고객 채팅 인터페이스는 사용하기 전에 계정 관리자가 활성화해야 합니다. 이 채팅 클라이언트는 채팅 채널을 구성하는 한 요소에 불과합니다. 컨택 센터용 채팅 구성은 여러 단계로 된 프로세스입니다.

이러한 태스크는 사용자 정의 채팅 환경을 구현할 경우에만 필요합니다. V1 또는 V2 중 어느 프로필을 사용할지 선택합니다. 둘 다 필요하지 않습니다.

채팅 프로필 만들기

추가적인 사용자 정의 환경을 위해 채팅 프로필을 여러 개 만들 수 있지만, 고객 채팅 인터페이스을(를) 설정하려면 하나만 만들면 됩니다. V1 또는 V2 중 어느 채팅 프로필을 사용할지 결정한 다음 아래의 해당 태스크를 수행합니다.

V1 채팅 프로필 만들기

필수 권한: 채팅 프로필 생성

앱 선택기 를 클릭하고 선택합니다. ACD.
컨택 설정 > 채팅 프로필로 이동합니다.
수정할 채팅 프로필을 클릭하여 엽니다.
편집을 클릭합니다.
프로필 이름을 입력합니다.
인터페이스를 위해, 드롭다운에서 V1 ASPX를 선택합니다. 프로필을 저장한 후에는 이 필드를 더 이상 편집할 수 없습니다.

배색을 구성합니다.

배색에 대해 자세히 알아보기

필드	세부 정보
배색	사용하는 시스템 배색. 다음 템플릿 중 하나를 사용하거나 회사의 요구 사항에 맞게 수정할 수 있습니다. 기본 — 파란색과 흰색이 섞인 회색. 배색 1 — 파란색과 흰색. 배색 2 — 노란색과 흰색이 섞인 주황색. 배색 3 — 회색과 흰색이 섞인 빨간색.

미리보기 영역으로 업데이트를 확인하면서, 채팅 창의 스타일 설정을 구성합니다.

로고 이미지에 대해 자세히 알아보기

필드	세부 정보
로고 이미지	기존 채팅 프로필에는 로고를 추가할 수 없습니다. 로고가 없는 채팅 프로필을 만들고 이후 고객 채팅 인터페이스에 로고를 추가하려는 경우, 새 채팅 프로필을 만들어 이를 해당 컨택 포인트에 할당해야 합니다.

미리보기 영역으로 업데이트를 확인하면서, 채팅 대화 창의 설정을 구성합니다. 상담원 및 컨택 대화 상자의 배경색과 글꼴 색상을 변경할 수 있지만, 시스템 메시지의 글꼴 색상만 가능합니다. 시스템 메시지는 일반적으로 Quemsg와 같은 Studio 작업으로 구동되며, 컨테이너 없이 채팅 인터페이스에 나타납니다.
미리보기 영역으로 업데이트를 확인하면서, 채팅 상태 표시기 및 메시지 설정을 구성합니다.
완료를 클릭합니다.

V2 채팅 프로필 만들기

필수 권한: 채팅 프로필 생성

앱 선택기 를 클릭하고 선택합니다. ACD.
컨택 설정 > 채팅 프로필로 이동합니다.
프로필을 만들려면 새로 만들기를 클릭합니다.
프로필 이름을 입력합니다.
인터페이스는, V2 (HTML5)를 선택합니다. 프로필을 저장한 후에는 이 필드를 더 이상 편집할 수 없습니다.
미리보기로 업데이트를 확인하면서, 필요에 따라 모양 필드를 구성합니다.
이미지 보기
필요한 경우 사전 채팅 양식을 활성화하고 구성합니다.
이미지 보기
1. 사전 채팅 양식 사용 확인란을 선택합니다.
2. 필요에 따라 환영 메시지를 수정합니다.
3. 필드 추가를 선택하여 필요에 따라 필드를 구성합니다.
이 양식을 사용하여 제출된 콘텐츠는 항목 P0(으)로 시작하는 매개변수로서 라우팅 스크립트의 Begin 작업에 전달됩니다.
필요한 경우, 대기열 창을 활성화하여 구성합니다.
이미지 보기
1. 대기열 활성화 확인란을 선택합니다.
2. 대기 메시지를 입력합니다. 이 프로필과 연결된 Studio 스크립트가 Quemsg 작업을 사용하여 고객에게 대기열에서 고객의 위치를 표시하는 경우, 해당 메시지는 여기에서 구성한 메시지와 번갈아 나타납니다.
3. 필요한 경우, 배경색과 텍스트의 색조를 변경합니다.
4. 원하는 경우 로고 확인란을 선택한 후 다음 작업 중 하나를 수행하여 로고를 추가합니다.
  - 다른 용도로 로고가 CXone에 이미 업로드되어 있는 경우 기존 선택을 선택합니다. 찾아보기를 클릭하여 파일 선택 창에서 이미지를 찾습니다. 이미지를 클릭하여 선택합니다. 확인을 클릭합니다.
  - 새 로고를 업로드하려면 새로 업로드를 선택합니다. 파일 선택을 클릭하여 업로드할 이미지를 찾습니다. 이미지를 클릭하여 선택합니다. 열기를 클릭합니다.
5. 원하는 경우 히어로 이미지 확인란을 선택한 후 다음 작업 중 하나를 수행하여 더 큰 이미지를 추가합니다.
  - 다른 용도로 이미지가 CXone에 이미 업로드되어 있는 경우 기존 선택을 선택합니다. 찾아보기를 클릭하여 파일 선택 창에서 이미지를 찾습니다. 이미지를 클릭하여 선택합니다. 확인을 클릭합니다.
  - 새 이미지를 업로드하려면 새로 업로드를 선택합니다. 파일 선택을 클릭하여 업로드할 이미지를 찾습니다. 이미지를 클릭하여 선택합니다. 열기를 클릭합니다.
CXone에 업로드하기 전에 로고 또는 이미지의 크기를 조정해야 합니다. 그렇지 않으면, 로고 또는 히어로 이미지가 지정된 최대 크기에 맞게 늘어납니다. 로고와 이미지는 SVG 또는 PNG 파일 형식이어야 합니다.
프로필을 만드는 중이면 저장을 클릭합니다.

채팅 프로필에 컨택 포인트 추가

필수 권한: 채팅 프로필 편집

앱 선택기 를 클릭하고 선택합니다. ACD.
컨택 설정 > 채팅 프로필로 이동합니다.
컨택 포인트에 할당할 채팅 프로필을 클릭하여 엽니다.
컨택 포인트 탭을 클릭합니다.
컨택 포인트 추가 테이블에서, 채팅 프로필을 할당할 컨택 포인트의 확인란을 선택합니다. 이 프로필을 모든 컨택 포인트에 할당하려면 이 단계를 건너뜁니다.
컨택 포인트 추가를 클릭합니다. 채팅 프로필을 활성된 모든 채팅 컨택 포인트에 할당하려면 모두 추가를 클릭합니다.

웹 페이지에 Live Chat V2 (HTML5) 포함 및 사용자 정의

앱 선택기 를 클릭하고 선택합니다. ACD.
컨택 설정 > 컨택 포인트로 이동합니다.
기존 컨택 포인트를 선택하거나 새로 만들기를 수행합니다.
페이지 하단에 있는 코드를 복사합니다.
복사한 텍스트를 웹페이지 <body> 섹션 끝에 붙여넣습니다.
웹사이트에 표시되는 기본 라이브 채팅 아이콘을 바꾸려면, 웹사이트에 붙여넣은 스크립트에 다음 아이콘을 추가하십시오.

기본 라이브 채팅 아이콘 보기
1. 스크립트에서 <script type ="text/javascript"> 줄 바로 아래에 다음 코드를 추가합니다.
```
function showBadge( i) { var divBadge = document.getElementById("divBadge"); if(i>0) { divBadge.innerHTML=i; divBadge.style.display="block"; divBadge.classList.add('badge2'); } else if(i==0 && divBadge) { divBadge.style.display="none";} }
```
2. 웹사이트의 CSS에 .badge2 클래스를 추가하고, 원하는 대로 사용자 정의 라이브 채팅 버튼의 배지 효과 스타일을 지정합니다.
3. 다음 강조 표시된 코드를 icPatronChat.init 코드 블록에 추가합니다.
```
icPatronChat.init( { serverHost:'http://home-b2.incontact.com', bus_no:50, poc:'c7744b03-fe43-437f-a464-aec52e56f683', params:['FirstName','Last Name','first.last@company.com',555-555-5555], customChatButton: true }, showBadge); 
```
  params는 런타임에 Studio 스크립트에 전달되는 문자열 배열입니다. 사전 채팅 양식 필드를 포함하여 최대 10개의 사용자 정의 쿼리 매개변수를 보낼 수 있습니다.
4. </script> 태그 바로 뒤에, HTML로 사용자 정의 버튼을 추가합니다. 링크에 onclick="icPatronChat.setStateWindowToggle()"이 포함되어야 합니다. 다음 예를 참조하십시오.
```
<a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>Live Chat</span><div id="divBadge" class="badge2"></div> </a>
```
5. 웹페이지를 저장하고 테스트합니다. 필요에 따라 변경합니다.
컨택이 웹사이트를 열 때 웹사이트에 나타나는 라이브 채팅 창의 크기와 위치를 사용자 정의하려면, 웹사이트에 붙여넣은 스크립트에 대해 다음 작업을 수행합니다.

기본 라이브 채팅 창 크기 보기
1. icPatronChat.init 줄 위에 다음 코드 블록을 추가합니다.
```
var dimensions = {top:20,left:200,height:50,width:600};
```
2. 웹 사이트에서 채팅 창의 왼쪽 상단 모서리가 위치할, 브라우저 창의 상단 및 왼쪽으로부터의 픽셀 수로 top 및 left 설정을 지정합니다.
3. 컨택이 창을 열 때 창의 높이와 너비의 픽셀 수로 height 및 width 설정을 지정합니다.
4. </script> 태그 바로 위에 다음 줄을 추가합니다.
```
icPatronChat.setDimension(dimensions);
```
5. 웹페이지를 저장하고 테스트합니다. 필요에 따라 변경합니다.

웹 페이지에 고객 채팅 인터페이스 팝업 창 추가

이 지침은 V1(ASPX) 및 V2(HTML5) 채팅 프로필에 모두 적용됩니다.

앱 선택기 를 클릭하고 선택합니다. ACD.
컨택 설정 > 채팅 프로필로 이동합니다.
기존 컨택 포인트를 선택하거나 새로 만들기를 수행합니다.
컨택 포인트 URL을 복사합니다.

웹페이지의 <body> 섹션 끝에 다음 코드 줄을 추가합니다. 강조 표시된 텍스트를 URL로 바꿉니다.

<script type = "text/javascript"> var popupPatronChat = function() { var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555; window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true); }; </script>

URL 뒤의 매개변수는 런타임에 Studio 스크립트에 전달되는 문자열 배열입니다. 최대 10개까지 추가할 수 있습니다.