Proactive Chat 팝업 사용자 정의

Proactive Chat을 위한 사용자 정의 팝업은 기본 팝업보다 더욱 다양한 유연성과 옵션을 제공합니다. 이러한 팝업 옵션은 라이브 채팅 실시간으로 인터랙션하는 상담원 및 컨택입니다 및 채팅 메시지 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다 채널 컨택이 상담원이나 Bot과 인터랙션하는 방법입니다. 채널은 음성, 이메일, 채팅, 소셜 미디어 등이 될 수 있습니다.에 사용할 수 있습니다. 다음 항목을 지정할 수 있습니다.

• 웹사이트에서 팝업이 나타나는 페이지.
• 팝업이 나타나는 경우. 팝업 표시를 트리거하는 특정 이벤트를 구성할 수 있습니다. 이벤트에는 웹 페이지 방문자가 어느 페이지에서 특정한 시간을 보내거나, 장바구니에 특정한 수의 품목이 있는 등의 항목이 포함됩니다.
• 팝업 화면 모양. 텍스트 색상, 테두리 색상, 테두리 이미지 및 팝업 위치를 포함하여 고급 팝업의 모양을 지정하는 다양한 옵션이 있습니다.

태그 관리자 애플리케이션

사용자 정의 가능한 팝업을 사용하려면 웹사이트에 태그 웹사이트를 위한 HTML 코드에 있는 코드의 스니펫입니다. 이는 Tag Manager 애플리케이션에서 사용됩니다. HTML 코드 태그 또는 소셜 미디어 컨텍스트에서의 태그와는 다릅니다. 관리자 애플리케이션이 있어야 합니다. 태그 관리자는 웹사이트 방문자를 ‘관찰’하고 이에 대한 응답으로 작업을 트리거할 수 있는 애플리케이션입니다. Digital Experience의 경우 태그 관리자 애플리케이션이 방문자에게 표시되도록 팝업을 트리거합니다.  Google Tag Manager나 Tealium과 같은 다른 태그 관리자를 사용할 수 있습니다.

태그 관리자에서 웹사이트 방문자에게 팝업을 표시할 이벤트 및 조건을 정의합니다. 팝업을 표시할 조건은 매우 구체적으로 지정할 수 있습니다. 예를 들어 방문자가 페이지를 스크롤하는 것으로 이벤트를 정의하는 경우, 페이지를 스크롤하는 모든 방문자에게 팝업이 표시되는 것은 바람직하지 않습니다. 페이지를 반 이상 스크롤한 방문자에게만 팝업이 표시되도록 할 수 있습니다. 이를 페이지 스크롤 이벤트의 조건으로 설정할 수 있습니다.

Digital Experience에서, 작업을 정의한 태그 관리자 이벤트에 연결하는 트리거를 사용하여 작업 흐름 자동화 작업을 만듭니다. 팝업 모양을 사용자 정의할 수 있는 작업입니다.

팝업이 나타나도록 구성된 웹페이지에 웹사이트 방문자가 있을 때 발생하는 상황은 다음과 같습니다.

1. 웹사이트 방문자는 태그 관리자에서 설정된 조건을 충족하는 작업을 수행합니다.
2. 태그 관리자는 API API는 CXone 시스템을 조직에서 사용하는 다른 소프트웨어와 연결하여 특정 기능을 자동화할 수 있습니다.를 통해 Digital Experience에 연락합니다.
3. 트리거된 태그 관리자 이벤트와 연결된 작업 흐름 자동화 작업이 실행되면서, 방문자가 방문한 웹페이지에 팝업을 표시합니다.

고급 팝업 요구 사항

Proactive Chat 팝업을 사용하려면 다음 항목이 필요합니다.

• 조직의 웹사이트: 웹사이트에 태그 웹사이트를 위한 HTML 코드에 있는 코드의 스니펫입니다. 이는 Tag Manager 애플리케이션에서 사용됩니다. HTML 코드 태그 또는 소셜 미디어 컨텍스트에서의 태그와는 다릅니다. 관리자 애플리케이션을 위한 스크립트와 디지털 채팅 위젯 스크립트가 있어야 합니다.
• 태그 관리자 애플리케이션용 계정: Google Tag Manager나 Tealium과 같은 다른 태그 관리자 애플리케이션을 사용할 수 있습니다.
• 디지털 라우팅 시스템은 라우팅 큐를 사용하여 케이스를 어떤 상담원에게 라우팅할지 결정합니다. 시스템 관리자는 라우팅 큐를 생성합니다. 이를 통해 특정 케이스를 해당 케이스 유형에 전문 지식을 가진 상담원에게 라우팅합니다.: 필요에 따라 라이브 채팅 또는 채팅 메시징에 대해 Digital Experience에서 라우팅을 구성해야 합니다.
• 고급 팝업 활성화: 조직에서 이 기능을 활성화하려면 CXone 계정 담당자에 문의하십시오.

태그 관리자 준비

웹사이트에 디지털 팝업을 표시할 이벤트 및 조건을 감시하도록 태그 웹사이트를 위한 HTML 코드에 있는 코드의 스니펫입니다. 이는 Tag Manager 애플리케이션에서 사용됩니다. HTML 코드 태그 또는 소셜 미디어 컨텍스트에서의 태그와는 다릅니다. 관리자 애플리케이션을 설정해야 합니다. 태그 관리자에서 다음 항목을 구성해야 합니다.

• 트리거 이벤트: 사람들이 웹사이트를 탐색할 때 트리거가 ‘관찰’하는 발생 이벤트.  태그 관리자는 트리거가 감시할 수 있는 이벤트에 대해 다양한 옵션을 제공합니다. 예를 들어, 특정 웹 페이지 보기, 특정 링크 클릭, 페이지의 특정 부분으로 스크롤 또는 페이지에서 보낸 시간을 선택할 수 있습니다.
• 트리거 조건: 트리거 이벤트에 대한 특정 세부 정보. 이러한 세부 정보는 태그 관리자가 조치를 취해야 하는 항목을 결정하는 데 도움이 됩니다. 예를 들어, 페이지 아래로 스크롤해야 하는 길이, 방문자가 클릭해야 하는 특정 링크 또는 페이지에서 경과해야 하는 시간을 지정할 수 있습니다.
• 태그 - 태그에는 트리거 이벤트가 발생하고 조건이 충족될 때 태그 관리자가 수행해야 하는 작업에 대한 정보가 포함되어 있습니다. Digital Experience Proactive Chat 팝업의 경우 태그 관리자 애플리케이션이 Digital Experience와(과) 통신할 수 있도록 하는 스크립트 코드 스니펫이 포함된 사용자 정의 HTML 태그를 사용합니다. 사용자 정의 HTML에서 사용할 코드는 다음과 같습니다.

여기서 [TRIGGER ID]는 생성한 작업 흐름 자동화 트리거의 ID 번호입니다. Digital Experience의 편집 모드에서 트리거를 볼 때 트리거의 URL에서 ID를 찾을 수 있습니다.

작업 흐름 자동화 팝업 작업 만들기

이 작업 단계를 따르면 템플릿을 기반으로 채팅 팝업을 사용자 정의할 수 있습니다.

1. 앱 선택기 를 클릭하고 선택합니다.ACD.

2. 디지털 > 자동화 작업으로 이동합니다.

3. 추가를 클릭합니다.
4. 작업이 수행하는 동작을 설명하는 이름을 입력합니다.
5. 작업 드롭다운에서 채팅 팝업 상자를 선택합니다.
6. 팝업 상자 이름을 입력합니다.
7. 팝업 상자의 레이아웃에 사용할 템플릿을 선택합니다. 각 템플릿의 예는 템플릿 드롭다운 목록 아래에 나타납니다.

8. 콘텐츠 섹션에서 팝업에 사용할 텍스트와 이미지를 구성합니다. 텍스트 필드에 일반 텍스트를 입력하거나 사용자 정의 필드를 사용하도록 형식이 지정된 입력 내용을 입력할 수 있습니다. 사용자 정의 필드를 사용하면 고객의 경험을 개인화하는 데 도움이 될 수 있습니다.

   일반 텍스트 입력 예시

   고객님, 안녕하세요. 5%의 특별 할인을 제공해 드리려 합니다.

   사용자 정의 필드 입력 예시

   {{customer.firstName}}님 안녕하세요. {{customer.customField.discountValue}}의 특별 할인을 제공해 드리려 합니다.

   사용자 정의 필드를 사용하는 경우 사용자 정의 필드가 실패할 경우를 대비하여 대체 값을 포함하는 것이 좋습니다. 이렇게 하려면 다음 형식으로 텍스트에 추가 줄을 추가합니다.

   {{fallbackMessage|Dear customer, we would like to offer you a special discount of 5%.}}

   | 뒤에 있는 모든 텍스트는 폴백 메시지로 간주됩니다.

9. 클릭 유도 섹션에서, 선택한 템플릿이 클릭 유도를 지원하고 이 팝업에 추가하려면, 클릭 유도 표시 드롭다운에서 사용을 선택합니다. 클릭 유도 텍스트를 입력합니다.
10. 디자인 사용자 정의 섹션에서 팝업 크기, 배경, 테두리 및 텍스트의 모양을 구성합니다. 색상을 포함하는 경우 background-color와 같은 CSS 태그를 포함할 필요가 없습니다.  색상 이름, HEX 번호(숫자 기호(#) 포함)만 포함하면 됩니다. RGB 설정 또는 기타 CSS 지원 색상 정의 방법.
11. 위치 섹션의 위치 드롭다운에서 페이지의 위치를 선택합니다. 오프셋 X 및 오프셋 Y 텍스트 상자에 픽셀 수를 입력하여 팝업 위치를 추가로 수정할 수 있습니다.
12. 핸드오버 섹션에서 최대 3개의 사용자 정의 필드를 선택합니다.
13. 저장을 클릭합니다.

HTML 팝업 작업 만들기

이 작업 단계에 따르면 템플릿에 국한되지 않고 자신만의 팝업을 생성할 수 있습니다. 버튼, 양식, 링크 등과 같은 보다 맞춤형인 요소를 추가할 수 있습니다.

1. 앱 선택기 를 클릭하고 선택합니다.ACD.

2. 디지털 > 자동화 작업으로 이동합니다.

3. 추가를 클릭합니다.
4. 작업이 수행하는 동작을 설명하는 이름을 입력합니다.
5. 작업 드롭다운에서 채팅 팝업 상자 Html을 선택합니다.
6. 팝업 상자 이름, 사용자 정의 디자인 및 사용자 정의 JS를 입력합니다.
7. 위치 섹션의 위치 드롭다운에서 페이지의 위치를 선택합니다. 오프셋 X 및 오프셋 Y 텍스트 상자에 픽셀 수를 입력하여 팝업 위치를 추가로 수정할 수 있습니다.
8. 저장을 클릭합니다.

팝업으로 환영 메시지 작업 만들기

이 작업은 여타 작업들과 약간 다른 방식으로 작동합니다. 팝업만 사용하지 않고 이 작업을 사용하면 채팅 창이 열리며 환영 메시지를 표시합니다.

1. 앱 선택기 를 클릭하고 선택합니다.ACD.

2. 디지털 > 자동화 작업으로 이동합니다.

3. 추가를 클릭합니다.
4. 작업이 수행하는 동작을 설명하는 이름을 입력합니다.
5. 작업 드롭다운에서 채팅 환영 메시지를 선택합니다.
6. 환영 메시지 이름과 본문 텍스트를 입력합니다. 최대 3개의 사용자 정의 필드를 선택합니다.
7. 저장을 클릭합니다.

작업 흐름 자동화 트리거 만들기

1. 앱 선택기 를 클릭하고 선택합니다.ACD.

2. 디지털 > 자동화 트리거로 이동합니다.

3. 트리거 추가를 클릭합니다.
4. 트리거의 이름을 입력합니다.
5. 이벤트로 API에 의해 트리거됨을 선택합니다.
6. 데이터 유형 드롭다운 목록에서 채팅 창을 선택합니다.
7. 지연된 실행 필드에서 선택한 이벤트가 발생한 후 트리거를 실행하기 전에 디지털 참여이(가) 기다려야 하는 시간(초)을 입력합니다. 즉시 실행되도록 하려면 0을 입력합니다.
8. 트리거를 정리하는 폴더가 있다면 드롭다운에서 이 트리거를 넣을 폴더를 선택할 수 있습니다.
9. 저장을 클릭합니다.

조건 추가

1. 세부 정보 페이지에서 조건 추가를 클릭합니다.
2. 드롭다운을 사용하여 원하는 조건을 선택합니다. 방금 만든 항목에 사용할 수 있는 조건 목록은 아래 표를 참조하십시오.
3. 선택을 클릭합니다.
4. 일부 조건은 추가 구성이 필요합니다. 지침은 아래 표를 참조하십시오.

작업 추가

1. 이 트리거의 세부 정보 페이지에서 기존 작업 추가를 클릭합니다.
2. 드롭다운을 사용하여 이 작업을 선택합니다. 드롭다운에는 작업의 작업 내용이 아니라 작업에 지정한 이름이 표시됩니다.
3. 추가를 클릭합니다.
4. 활성화를 클릭합니다.

트리거가 조건 및 작업으로 완전히 구성되면 활성화를 클릭합니다. 그 다음, 사용자 정의 HTML 태그에 스크립트를 추가하는 것을 포함하여 태그 관리자가 완전히 구성되었는지 확인합니다.