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

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

그러나 웹 개발에 익숙하고 Guide 위젯의 레이아웃과 동작을 사용자 지정하고 싶다면 JavaScript 코드에 APIClosed 애플리케이션 프로그래밍 인터페이스. 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. 앱 선택기 앱 선택기 아이콘를 클릭하고 선택합니다.Guide.
  2. Integrations을(를) 클릭합니다. 테넌트와 관련된 JavaScript 코드가 포함된 페이지가 나타납니다.

  3. Copy code with Guide 을 클릭하여 코드를 복사하세요.
  4. 복사한 코드 조각을 코드나 텍스트 편집 프로그램에 붙여넣습니다.
  5. 붙여넣은 코드의 닫기 </script> 태그 바로 위에 사용할 JavaScript 호출을 추가합니다. 다음 예시 이미지에서 메모는 호출을 추가할 위치를 나타냅니다.

    JavaScript 호출을 추가할 위치를 보여주는 예시 스크립트

    사용할 수 있는 호출에 대한 자세한 내용은 Guide위젯 관련 API, 채팅 관련 API, 보고 관련 API를 참조하세요.

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

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

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

Guide에 사용할 언어 설정

브라우저 언어 설정을 무시하고 Guide 방문자가 특정 언어로 콘텐츠를 보도록 하려면 삽입 스크립트를 수정합니다. 스크립트 끝에 있는 cxone('guide','init'); 명령에 locale 매개변수를 추가하고 원하는 언어를 지정합니다. 예를 들어 다음과 같이 프랑스어로 설정할 수 있습니다.


cxone('init','####'); 
cxone('guide','init', {locale: 'fr-fr'});

####을 4자리 테넌트 ID로 바꾸세요.

선제적 제안에 작성한 콘텐츠는 작성된 언어로 계속 표시됩니다. 이는 프랑스어 Guide 번역 문자열을 설정했다고 가정합니다.