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

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

그러나 웹 개발에 익숙하고 Guide 위젯의 레이아웃과 동작을 사용자 정의하고 싶다면 JavaScript 코드에 대한 API 애플리케이션 프로그래밍 인터페이스(Application Programming Interface). 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 통화 추가

앱 선택기 를 클릭하고 선택합니다.Guide.
Integrations을(를) 클릭합니다. 테넌트와 관련된 JavaScript 코드가 포함된 페이지가 나타납니다.
Copy code with Guide 을 클릭하여 코드를 복사하세요.
복사한 코드 조각을 코드나 텍스트 편집 프로그램에 붙여넣습니다.
붙여넣은 코드의 닫기 </script> 태그 바로 위에 사용할 JavaScript 호출을 추가합니다. 다음 예시 이미지에서 메모는 호출을 추가할 위치를 나타냅니다.

사용할 수 있는 호출에 대한 자세한 내용은 Guide위젯 관련 API, 채팅 관련 API, 보고 관련 API를 참조하세요.
열기 및 닫기 <script> 태그를 포함한 전체 스크립트를 복사하여 웹사이트 페이지 헤더에 붙여넣습니다.
수정된 페이지를 방문하여 Guide 사용자 정의가 의도한 대로 작동하는지 확인합니다.
완전히 테스트되어 예상대로 작동하면 이 Guide 사용자 정의가 필요한 각 페이지의 헤더에 최종 스크립트를 복사합니다.

Guide에 사용할 언어 설정

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


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

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

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