웹사이트에서 가이드를 사용하려면 참여를 제공하려는 웹사이트의 각 페이지에 간단히 삽입가이드하면 됩니다.
그러나 웹 개발에 익숙하고 가이드 위젯의 레이아웃과 동작을 사용자 정의하고 싶다면 JavaScript 코드에 대한 API
API는 CXone 시스템을 조직에서 사용하는 다른 소프트웨어와 연결하여 특정 기능을 자동화할 수 있습니다. 호출을 사용하면 됩니다. 변경할 수 있는 유형은 다음과 같습니다.
-
Guide 위젯 레이아웃 및 동작: Guide 위젯의 레이아웃 및 동작을 사용자 정의합니다. 여기에는 위젯 크기 변경, 버튼 크기 변경, 전체 화면 모드로 위젯 표시 등이 포함됩니다.
-
Guide 위젯에 제공될 때 채팅 기본 설정: Guide위젯에 제공될 때 채팅의 레이아웃과 동작을 사용자 정의합니다. 여기에는 채팅 창의 정보 변경, 채팅 창 레이아웃 변경, 사용자 정의 CSS 설정 등이 포함됩니다.
-
보고 기본 설정: Guide가 참여 및 전환을 추적하는 방법을 사용자 정의합니다. 사용자 정의 이벤트 정의, 방문자 변수 저장, 전환 데이터 저장, 웹 태그 할당 및 제거 등의 작업에 이러한 API를 사용할 수 있습니다.
가이드의 작동 방식 이해
가이드 위젯은 CXone Loader가 웹 사이트에 로드하는 웹 모듈입니다. 웹 모듈에는 Svelte 프레임워크를 사용하여 구축된 JavaScript 애플리케이션이 포함되어 있습니다. 애플리케이션이 가이드 구성, 활성 템플릿, 활성 채팅 상태, UI 상태 등을 추적하는 기본 상태 저장소를 사용합니다. 이러한 상태 저장소의 값은 방문자에게 표시되는 내용을 결정합니다.
웹 사이트의 페이지에 가이드를 포함하고 방문자가 페이지를 보면 가이드는 테넌트와 관련된 구성을 가져옵니다. 이 요청은 규칙, 버튼, 진입점, 번역, 참조 문서 및 기능 플래그가 포함된 JSON 결과를 반환합니다. 그런 다음 번들 규칙 엔진을 사용하여 페이지에 템플릿이나 선제적 제안이 표시되거나 표시되지 않을 수 있는 규칙 및 조건을 처리합니다.
페이지를 다시 로드하는 사이 방문자 데이터를 관리하기 위해 가이드는 로컬 및 세션 저장소를 사용합니다. 이를 통해 가이드는 지원되는 브라우저에서 도메인 교차 지원을 제공할 수 있습니다. 이는 또한 가이드가 브라우저 쿠키를 사용하지 않음을 의미합니다.
프로덕션 환경에 릴리스하기 전에 테스트 환경에서 Guide 사용자 정의를 설정하십시오. 이렇게 하면 웹사이트 방문자에 대한 방해를 최소화하는 데 도움이 됩니다. 또한 사용자 정의의 목표대로 작동하는지 확인하는 데 도움이 됩니다.
JavaScript 호출 추가
- 앱 선택기
를 클릭하고 선택합니다. ACD. -
디지털 > 디지털 컨택 포인트로 이동합니다.
- 내 채널에서 웹사이트 스크립트를 클릭합니다.
- 페이지에서 JavaScript 코드를 복사하여 코드나 텍스트 편집 프로그램에 붙여넣습니다. 열기 태그와 닫기 <script> 태그를 포함해야 합니다.
-
붙여넣은 코드의 닫기 </script> 태그 바로 위에 사용할 JavaScript 호출을 추가합니다. 다음 예시 이미지에서 메모는 호출을 추가할 위치를 나타냅니다.
이 페이지 아래에는 사용할 수 있는 Guide JavaScript 호출과 Guide 채팅 관련 API, 가이드 보고 관련 API가 설명되어 있습니다.
-
열기 및 닫기 <script> 태그를 포함한 전체 스크립트를 복사하여 웹사이트 페이지 헤더에 붙여넣습니다.
-
수정된 페이지를 방문하여 Guide 사용자 정의가 의도한 대로 작동하는지 확인합니다.
-
완전히 테스트되어 예상대로 작동하면 이 Guide 사용자 정의가 필요한 각 페이지의 헤더에 최종 스크립트를 복사합니다.
Guide 위젯 사용자 정의
이 호출을 통해 Guide 위젯 레이아웃과 동작을 조정할 수 있습니다.
CSS 조정
Guide 위젯의 CSS 요소를 변경합니다. 예:
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');이 스니펫을 사용하려면 GUIDE_ELEMENT를 다음 표의 값으로 바꾸고 중괄호 { } 안의 예시 CSS를 사용자 정의 CSS로 바꾸세요.
|
Guide 인터페이스 |
GUIDE_ELEMENT 값 |
|---|---|
| Guide 위젯 및 버튼 |
|
| 포털 |
|
| 문서 |
|
|
채팅 및 이메일 |
|
|
능동적 제안 |
|
채널 버튼 크기 조정
채널 버튼에 사용할 크기를 설정합니다. 값을 em 또는 픽셀 단위로 입력하세요. 기본 버튼 크기는 3em입니다.
cxone('guide', 'setButtonSize', '80px');채널 버튼 오프셋 조정
채널 버튼에 사용할 오프셋 값을 설정합니다. 값을 em 또는 픽셀 단위로 입력하세요.
cxone('guide', 'setOffsetX', '48px');cxone('guide', 'setOffsetY', '3em');Guide 메뉴 열기
버튼의 Guide 메뉴를 표시합니다.
cxone('guide', 'openMenu');Guide 메뉴 닫기
버튼의 Guide 메뉴를 닫습니다.
cxone('guide', 'closeMenu');글꼴 크기 변경
Guide 위젯에 사용되는 기본 글꼴 크기를 설정합니다. 값을 픽셀 단위로 입력하세요. 기본 글꼴 크기는 13픽셀입니다. 여기에 설정된 값은 Guide 전체에 사용되는 em 크기를 결정합니다.
cxone('guide','setFontSize',12);Guide 위젯 높이 변경
Guide 위젯의 높이를 설정합니다. 값을 em 또는 픽셀 단위로 입력하세요. 기본 높이는 40em입니다. 최대 높이는 40 rem입니다.
cxone('guide','setDesiredGuideHeight','30em');Guide 위젯 너비 변경
Guide 위젯의 높이를 설정합니다. 값을 em 또는 픽셀 단위로 입력하세요. 기본 너비는 23.125em입니다.
cxone('guide','setDesiredGuideWidth','608px');전체 화면 모드에서 Guide 표시
Guide를 전체 화면 모드로 표시할 수 있습니다. Guide 콘텐츠가 Guide 위젯 대신 창에 표시됩니다.
cxone('guide','setFullDisplay');전체 화면 모드에서 가장 좋은 방법은 최소화 버튼을 숨기는 것입니다. 그렇게 하려면 다음 명령을 사용하십시오.
cxone('guide','setFullDisplay');cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');채팅 사전 컨택 웹 설문조사 생략
이 API를 사용하여 사전 컨택 웹 설문조사를 표시하지 않고 채팅을 시작하도록 Guide에게 지시할 수 있습니다.
cxone('guide','hidePreSurvey');채팅 API를 사용하여 사전 컨택 웹 설문조사 값을 미리 설정할 수 있습니다. 또는 hidePreSurvey API의 매개변수로 지정할 수도 있습니다. 예:
cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');진입점 직접 표시
이 API를 사용하여 창에 진입점을 수동으로 표시합니다. 진입점에는 기본 버튼이 사용됩니다.
이 API는 누군가가 창에 진입점을 수동으로 표시해야 하는 특정 경우를 위해 제공됩니다. 일반적으로 권장되지 않으며 Guide 참여 규칙과 함께 사용하면 안 됩니다.
이 API를 사용하려면 표시할 진입점의 ID를 전달해야 합니다. 진입점 옆의 편집을 클릭한 다음 페이지 URL의 마지막 부분을 복사하면 진입점 ID를 얻을 수 있습니다.
cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');