API를 사용하여 Guide 위젯 사용자 지정

다음 JavaScript API를 사용하여 Guide 위젯의 모양과 동작을 사용자 지정할 수 있습니다.

CSS 조정

Guide 위젯의 CSS 요소를 변경합니다. 단 한 번의 호출로 모든 CSS 변경을 수행합니다. 두 번째 호출은 첫 번째 호출의 변경 사항을 재정의합니다.

예시 구문:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_BACK_BUTTON"] {color: white !important; background: red !important;}');

데이터 선택기를 숨기려면 display:none을 사용합니다. 예를 들어, Guide 메뉴 버튼을 숨기려면:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Guide 인터페이스 데이터 선택기
Guide 위젯 및 버튼

  • GUIDE_CHANNEL_BUTTON

  • GUIDE_CHANNEL_BACK_BUTTON

  • GUIDE_SINGLE_MENU_CLOSE_BUTTON

  • GUIDE_MULTIPLE_MENU_CLOSE_BUTTON

  • GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON

  • GUIDE_FRAME_CONTENT

  • GUIDE_CHANNEL_ICON

  • GUIDE_CHANNEL_MENU_ICON
포털

  • PORTAL_HEADER_ICON

  • PORTAL_HEADER

  • PORTAL_TITLE

  • PORTAL_SUBTITLE

  • GUIDE_CHANNEL_BUTTON_1

  • GUIDE_CHANNEL_BUTTON_2

  • GUIDE_CHANNEL_BUTTON_3

  • GUIDE_CHANNEL_BUTTON_4

  • GUIDE_MENU_BUTTON

  • KB_WIDGET_TITLE

  • KB_WIDGET_SEARCHBAR

  • KB_SEE_MORE_BUTTON

  • PORTAL_BODY

  • KB_WIDGET

  • CHANNELS_WIDGET
문서

  • KB_HEADER

  • KB_BODY

채팅 및 이메일

  • PRECONTACT_SURVEY

  • BEGIN_CHAT

  • SEND_EMAIL

  • INPUT

  • TEXTAREA

  • DROPDOWN

  • TREE

  • PRECONTACT_SURVEY_DESCRIPTION

  • PRECONTACT_SURVEY_ICON

  • TREE_POPUP_BACK_BUTTON

  • CLOSE_TREE_POPUP

  • CLOSE

능동적 제안

  • OFFER_CLOSE_BUTTON

  • OFFER_HEADER

  • OFFER_BODY

  • OFFER_BUTTON_1

  • OFFER_BUTTON_2

  • OFFER_BUTTON_3

채널 버튼 크기 조정

채널 버튼에 사용할 크기를 설정합니다. 값을 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', {email: "dre@classics.com"});

사전 접촉 설문 조사에 대한 사용자 정의 필드 값 설정

이 API를 사용하면 사전 연락 설문조사에 나타나는 사용자 정의 필드에 대한 값을 설정할 수 있습니다. 다음에 대한 값을 설정할 수 있습니다.

  • 이름

  • 모든 컨택 사용자 지정 필드

  • 모든 고객 사용자 지정 필드

사용자 지정 필드 값을 hidden:true로 표시할 수 있습니다. 사전 접촉 설문조사 양식에는 숨겨진 필드가 표시되지 않습니다. 하지만 숨겨진 필드에 설정한 값은 채팅 창으로 전달됩니다.

hidden:false로 표시되지 않은 사용자 정의 필드의 경우 Guide는 API 명령으로 지정된 값으로 사전 연락 설문 조사의 사용자 정의 필드를 사전 설정합니다. 방문자는 기본값을 사용하거나 원하는 대로 변경할 수 있습니다.

다음 구문 예는 숨겨진 이름을 지정하여 채팅에 직접 전달하는 방법을 보여줍니다.

cxone('guide','setCustomFields', customerName: {value:"Francis", hidden: true});

다음 구문 예제는 두 개의 연락처 사용자 정의 필드 값을 지정하는 방법을 보여줍니다. 이메일 값은 사전 연락 설문 조사에서 숨겨지고 채팅으로 직접 전달됩니다. 주소 값은 사전 연락 설문 조사에서 표시되고 편집할 수 있습니다.

cxone('guide','setCustomFields', 
contactCustomFields:[
{ident:email', value: 'josey@nice.com', hidden:true}, 
{ident: 'address', value: '123 Main St', hidden:false}
]);

다음 구문 예는 고객 사용자 정의 필드를 지정하는 방법을 보여줍니다.

cxone('guide','setCustomFields', 
contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]);

다음 구문 예는 연락처 사용자 정의 필드와 고객 사용자 정의 필드를 모두 지정하는 방법을 보여줍니다.

cxone('guide','setCustomFields', 
contactCustomFields:[{ident:email', value: 'josey@nice.com', hidden:true}, {ident: 'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]);

진입점 직접 표시

이 API를 사용하여 창에 진입점을 수동으로 표시합니다. 진입점에는 기본 버튼이 사용됩니다.

이 API는 누군가가 창에 진입점을 수동으로 표시해야 하는 특정 경우를 위해 제공됩니다. 일반적으로 권장되지 않으며 Guide 참여 규칙과 함께 사용하면 안 됩니다.

이 API를 사용하려면 표시할 진입점의 ID를 전달해야 합니다. 진입점 옆의 편집을 클릭한 다음 페이지 URL의 마지막 부분을 복사하면 진입점 ID를 얻을 수 있습니다.

cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');