JavaScript를 사용하여 Guide 사용자 정의

웹사이트에서 Guide를 사용하려면 참여를 제공하려는 웹사이트의 각 페이지에 간단히 삽입Guide하면 됩니다.

그러나 웹 개발에 익숙하고 Guide 위젯의 레이아웃과 동작을 사용자 정의하고 싶다면 JavaScript 코드에 대한 API닫힘 API는 CXone Mpower 시스템을 조직에서 사용하는 다른 소프트웨어와 연결하여 특정 기능을 자동화할 수 있습니다. 호출을 사용하면 됩니다. 변경할 수 있는 유형은 다음과 같습니다.

  • Guide 위젯 레이아웃 및 동작: Guide 위젯의 레이아웃 및 동작을 사용자 정의합니다. 여기에는 위젯 크기 변경, 버튼 크기 변경, 전체 화면 모드로 위젯 표시 등이 포함됩니다.

  • Guide 위젯에 제공될 때 채팅 기본 설정: Guide위젯에 제공될 때 채팅의 레이아웃과 동작을 사용자 정의합니다. 여기에는 채팅 창의 정보 변경, 채팅 창 레이아웃 변경, 사용자 정의 CSS 설정 등이 포함됩니다.

  • 보고 기본 설정: Guide가 참여 및 전환을 추적하는 방법을 사용자 정의합니다. 사용자 정의 이벤트 정의, 방문자 변수 저장, 전환 데이터 저장, 웹 태그 할당 및 제거 등의 작업에 이러한 API를 사용할 수 있습니다.

Guide의 작동 방식 이해

Guide 위젯은 CXone Mpower 로더가 웹사이트에 로드하는 웹 모듈입니다. 웹 모듈에는 Svelte 프레임워크를 사용하여 구축된 JavaScript 애플리케이션이 포함되어 있습니다. 애플리케이션이 Guide 구성, 활성 템플릿, 활성 채팅 상태, UI 상태 등을 추적하는 기본 상태 저장소를 사용합니다. 이러한 상태 저장소의 값은 방문자에게 표시되는 내용을 결정합니다.

웹 사이트의 페이지에 Guide를 포함하고 방문자가 페이지를 보면 Guide는 테넌트와 관련된 구성을 가져옵니다. 이 요청은 규칙, 버튼, 진입점, 번역, 참조 문서 및 기능 플래그가 포함된 JSON 결과를 반환합니다. 그런 다음 번들 규칙 엔진을 사용하여 페이지에 템플릿이나 선제적 제안이 표시되거나 표시되지 않을 수 있는 규칙 및 조건을 처리합니다.

페이지를 다시 로드하는 사이 방문자 데이터를 관리하기 위해 Guide는 로컬 및 세션 저장소를 사용합니다. 이를 통해 Guide는 지원되는 브라우저에서 도메인 교차 지원을 제공할 수 있습니다. 이는 또한 Guide가 브라우저 쿠키를 사용하지 않음을 의미합니다.

프로덕션 환경에 릴리스하기 전에 테스트 환경에서 Guide 사용자 정의를 설정하십시오. 이렇게 하면 웹사이트 방문자에 대한 방해를 최소화하는 데 도움이 됩니다. 또한 사용자 정의의 목표대로 작동하는지 확인하는 데 도움이 됩니다.

JavaScript 호출 추가

  1. 앱 선택기 앱 선택기 아이콘를 클릭하고 선택합니다. ACD.
  2. Digital > 디지털 컨택 포인트로 이동합니다.

  3. 내 채널에서 웹사이트 스크립트를 클릭합니다.
  4. 페이지에서 JavaScript 코드를 복사하여 코드나 텍스트 편집 프로그램에 붙여넣습니다. 열기 태그와 닫기 <script> 태그를 포함해야 합니다.
  5. 붙여넣은 코드의 닫기 </script> 태그 바로 위에 사용할 JavaScript 호출을 추가합니다. 다음 예시 이미지에서 메모는 호출을 추가할 위치를 나타냅니다.

    이 페이지 아래에는 사용할 수 있는 Guide JavaScript 호출과 Guide 채팅 관련 API, Guide 보고 관련 API가 설명되어 있습니다.

  6. 열기 및 닫기 <script> 태그를 포함한 전체 스크립트를 복사하여 웹사이트 페이지 헤더에 붙여넣습니다.

  7. 수정된 페이지를 방문하여 Guide 사용자 정의가 의도한 대로 작동하는지 확인합니다.

  8. 완전히 테스트되어 예상대로 작동하면 이 Guide 사용자 정의가 필요한 각 페이지의 헤더에 최종 스크립트를 복사합니다.