API를 사용해 Guide 채팅 사용자 정의

Guide를 사용하여 웹 사이트에 채팅을 구현하는 경우 채팅 구현에 진입점을 추가한 후 페이지에 표시할 Guide 템플릿을 추가하거나 규칙을 사용하여 웹 사이트 방문자에게 채팅을 제공할 정확한 시기를 결정합니다.

다음 JavaScript API를 사용하여 Guide로 구현된 채팅의 모양과 동작을 사용자 정의할 수 있습니다. 채팅을 사용하려는 웹사이트 페이지에 이 코드를 추가해야 합니다.

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

채팅 동작 API 호출

이 섹션의 호출을 통해 Guide 채팅 창이 작동하는 방식을 변경할 수 있습니다.

인증 코드 설정

OAuth 흐름의 인증 코드를 설정합니다. OAuth는 인증 프로토콜입니다. 이 프로토콜로 암호를 제공하지 않고도 애플리케이션이 다른 애플리케이션과 상호작용할 수 있습니다. 채팅 초기화 이전에 호출해야 합니다.

cxone('chat','setAuthorizationCode', 'authorization_code');

초기 자동 컨택 메시지 사용자 정의

Guide에서 채팅이 시작되면 채팅 세션의 첫 번째 메시지가 전송될 때 새 케이스닫힘 채널을 통한 상담원과의 전체 대화입니다. 예를 들어, 상호작용은 음성 통화, 이메일, 채팅 또는 소셜 미디어 대화가 될 수 있습니다.가 생성되어 대기열에 추가됩니다. 채팅 세션이 시작되면 숨겨진 자동 메시지가 방문자를 대신하여 전송됩니다. 그러면 방문자가 상담원을 기다리는 시간이 줄어듭니다. 초기 메시지는 컨택이 볼 수 없지만 상담원은 이를 볼 수 있습니다.

기본 메시지는 고객이 대화를 시작하기 위해 클릭하는 버튼의 텍스트입니다. 다음 세 가지 방법으로 초기 자동 메시지의 텍스트를 사용자 정의할 수 있습니다.

  • 기본 버튼 텍스트를 재정의합니다.

    cxone('chat','sendFirstMessageAutomatically', 'Hello');

  • 초기 메시지를 동적으로 변경합니다.

    cxone('chat','setFirstAutomatedMessageContent', 'Hello, I have a question');

  • 번역 페이지의 메시지 텍스트를 변경합니다.

초기 자동 메시지를 컨택에 표시하도록 설정

방문자가 초기 자동 메시지를 볼 수 있도록 하려면 스크립트에 다음 호출을 추가합니다.

cxone('chat','hideFirstSentMessage', false);

지연 케이스 생성

Guide은(는) 채팅 세션의 첫 번째 메시지가 전송될 때 새 케이스를 만들어 대기열에 추가합니다. 채팅 세션이 시작되면 숨겨진 자동 메시지가 방문자를 대신하여 전송됩니다. 그러면 방문자가 상담원을 기다리는 시간이 줄어듭니다. 방문자가 채팅 아이콘을 클릭하여 대화를 시작하면 채팅 세션이 시작됩니다. 초기 메시지는 방문자에게 보이지 않지만 상담원은 이를 볼 수 있습니다.

이 호출을 사용하여 케이스를 생성하기 전에 방문자의 실제 첫 번째 메시지를 기다리도록 Guide을(를) 구성할 수 있습니다.

cxone('chat','sendFirstMessageAutomatically', false);

게임 모드 활성화

상담원을 기다리는 동안 방문자가 Snake 게임을 할 수 있습니다.

cxone('chat','allowGameMode');

만족도 설문조사 자동화

만족도 설문조사를 자동으로 감지하여 팝업으로 띄울 수 있습니다. 설문조사를 감지하고 띄우도록 활성화하거나 비활성화합니다.

cxone('chat','automatedSatisfactionSurveyModal', 'false');

채팅 정보 API 호출

이러한 호출을 통해 채팅 세션 중에 방문자에게 제공되는 정보를 사용자 정의할 수 있습니다.

고객 ID 받기

채팅에서 방문자의 고유 식별자를 반환합니다.

cxone('chat','getCustomerIdentityId');

고객 ID 설정

채팅에서 방문자의 고유 식별자를 설정합니다.

cxone('chat','setCustomerId', 'customer_id');

대기열 카운터 숨기기

대기열 카운터로 방문자는 상담원 대기열에서의 위치에 따라 상담원이 언제 자신을 도와줄 수 있는지 파악할 수 있습니다. 방문자가 상담원에게 라우팅 된 이후에 대기열 카운터를 숨길 수 있습니다. 이렇게 하면 방문자의 주의를 끌지 않고 받은 편지함에서 고객 카드를 삭제할 수 있습니다.

cxone('chat','hideQueueCounterAfterAssignment');

활동 상태 설정

활동 바에서 메시지를 변경합니다. 예를 들어 채팅 메시징닫힘 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다 세션에 대한 응답 시간을 알려주기 위해 사용할 수 있습니다. 채팅 메시징은 비동기식 채팅이므로 방문자가 상담원의 소식을 듣기 위해 기다려야 할 때 도움이 됩니다.

cxone('chat','setStatusMessage', 'We typically reply within 3 hours.');

상담원 이미지 설정

채팅창에 표시되는 상담원 이미지를 동적으로 변경합니다. 기본적으로, Guide은(는) 상담원 프로필의 이미지를 사용합니다. 스크립트에 이 호출을 포함하면 코드 스니펫의 URL에 의해 지정된 이미지가 사용됩니다. 예시 URL을 채팅에서 사용할 이미지의 URL로 바꿉니다.

cxone('chat','setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

고객 이름 설정

고객 이름은 사전 컨택 설문조사 양식의 필드이며, 방문자는 채팅 메시지닫힘 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다 채널에서 상담원과 채팅하기 전에 이를 작성해야 합니다. 이 API 호출은 필드를 동적으로 채웁니다.

cxone('chat','setCustomerName', 'Elizabeth');

날짜 양식 설정

날짜 형식을 절대적 날짜 형식(01/01/2022) 또는 상대적 날짜 양식(오늘, 월요일)을 사용하도록 설정할 수 있습니다.

cxone('chat','setDateFormat', 'date_format');

로케일 설정

채팅 창의 번역 로케일을 설정합니다.

cxone('chat','setLocale', 'locale');

케이스 정보 표시

채팅 메시지닫힘 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다 채널 전용입니다. 방문자에게 케이스 정보를 표시합니다.

cxone('chat','showCaseInfo');

대화 내용 보내기 버튼 표시/숨기기

대화 내용 보내기 버튼이 보이도록 설정할 경우 방문자가 채팅 기록을 자신에게 보낼 수 있도록 채팅 채널을 구성해야 합니다. 채팅 메시지 또는 라이브 채팅에 이 옵션을 구성합니다.

cxone('chat','showSendTranscript');
cxone('chat','hideSendTranscript');

시스템 메시지 표시/숨기기

상담원 할당 기록과 같은 시스템 메시지를 표시하거나 숨깁니다.

cxone('chat','showSystemMessages');
cxone('chat','hideSystemMessages');

이용약관

채팅 창 내에서 방문자에게 이용 약관 문서를 제공할 수 있습니다. 이 기능으로 창에 버튼이 추가됩니다. 버튼의 레이블과 스타일, 그리고 방문자가 버튼을 클릭하면 어떻게 되는지 사용자 정의할 수 있습니다. 온클릭 작업은 내부 창 또는 외부 링크로 이용 약관을 표시할 수 있습니다.

내부 창:

cxone('chat','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

외부 링크:

cxone('chat','showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

기능 비활성화:

cxone('chat','hideTermsOfUse');

사용자 정의 필드, 레이블 및 문구

사용자 정의 필드 생성 및 채우기

이 호출에 사용할 수 있는 사용자 정의 필드는 고객 카드에서 사용할 수 있는 필드와 동일합니다. 채팅 창을 열기 전에 이러한 호출을 사용하면 사전 컨택 양식의 필드는 API 호출에 포함된 데이터로 채워집니다.

케이스 사용자 정의 필드 값 정의:

cxone('chat','setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

고객 카드 사용자 정의 필드 값 정의:

cxone('chat','setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

레이블 및 문구 사용자 정의

Guide 채팅에서 사용할 다양한 레이블과 문구를 사용자 정의하고 사용자 정의를 지정할 수 있습니다. 문구 또는 화면 레이블을 동적으로 변경해야 하는 경우 이러한 API 호출을 사용합니다.

단일 메시지 또는 라벨을 변경하려면 다음 단계를 따릅니다.

cxone('chat','setTranslation', 'key', 'your translation');

여러 메시지 또는 라벨을 변경하려면 다음 단계를 따릅니다.

cxone('chat','setTranslations', {key1: 'your custom label', key2: 'your custom message'});

중괄호는 시스템이 실제 데이터로 대체하는 변수입니다. 예를 들어, {caseNumber}는 컨택 채팅 세션의 케이스 번호로 대체됩니다.

Key Default label/Message
allAgentsForQueueAreBusy 귀하의 모든 전담 상담원이 현재 통화 중입니다. 대기자 중 {queue, plural, one {is} other {are}} <strong>{대기열, 수}</strong> {queue, plural, one {person} other {people}}번째입니다.

beginButton

채팅 시작!
cancel 취소
caseNumber 케이스 #{caseNumber}
change 변경
chattedWith 방금 채팅한 상대
commonErrorText 예상치 못한 오류가 발생했습니다. 다시 걸어 주십시오.
done 완료
dragAndDropDropzone 파일을 여기로 드래그 앤 드롭하여 보내세요.
dragAndDropDropzoneRejected 파일을 업로드할 수 없습니다 :(
EmailLabel 이메일
endChat 채팅 종료
endChatTitle 이 대화를 끝내시겠습니까?
endGame 최종 단계
ending 채팅 종료 중...
fileSendingFailed 파일 전송 실패
getTranscriptDescription 이 대화 내용을 다음 이메일 주소로 보내십시오.
getTranscriptLink 채팅 기록 받기
invalidToken 잘못된 토큰
ipAddressBlocked IP 주소가 차단됨
loading 로드 중...
loadPreviousButton 이전 대화 로드
messageLabel 메시지
networkErrorText 네트워크 오류가 발생했습니다. 다시 시도해 주십시오.
newCase 새 케이스
noAgentOnlineForQueue 현재 대기열에 대화 가능한 상담원이 없습니다.
offline 오프라인
offlineFormDesc 현재 대화를 할 수 없습니다
offlineFormSuccessMsgHead 감사합니다!
offlineFormSuccessMsgSub 이메일이 성공적으로 전송되었습니다. 곧 다시 연락드리겠습니다.
online 온라인
onlineFormText 채팅을 시작하려면 이름을 알려주십시오. 저희 상담원이 곧 도와 드리겠습니다.
pleaseSelect 선택해주세요...
poweredBy 제공자
preparingSession 세션 준비 중...
replyBoxPlaceholder 여기에 작성하고 <enter> 키를 눌러 보내십시오.
retry 재시도
sendFileTextSize {filesize}보다 작은 파일을 업로드하세요.
sendFileTextSupportedFormat 지원되는 형식.
sendFileTextSupportedFormatDesc 이미지, 동영상, {fileFormats}
sendMessageButton 메시지 보내기
sendNewEmail 새 이메일 보내기
sendTranscript 대화 내용 보내기
snakeWaiting 대기자 중 {queue}번째입니다.
startChatInPopup 궁금한 점을 물어보세요!
startNewChat 새 채팅 시작
statusReconnecting 연결 시도 중…
surveySuccesfullySent 피드백 주셔서 감사합니다!
systemChattingWith 현재 {이름}님과 채팅 중입니다.
topic 주제
transciptSentFailed 보내기에 실패했습니다.
transciptSuccesfullySent 대화 내용이 성공적으로 전송되었습니다!
tryAgainButton 다시 시도
unexpectedError 예기치 않은 오류가 발생했습니다.
validationInvalidEmail 이메일 주소가 유효하지 않습니다
validationMandatory 이 필드는 필수입니다.
validationShorterName 더 짧은 이름을 사용하세요.
validationShortMessage 메시지가 너무 짧습니다.
waiting 대기 중...
waitingDescription 상담원이 곧 도와 드리겠습니다.
waitingFooter 대기 시간을 줄이려면 <spacebar>를 누르십시오.
waitingForAgent 상담원을 기다리는 중...
waitingInQueue 상담원을 기다리고 있습니다. 대기자 중 {queue}번째입니다.
weAreOffline 현재 오프라인 상태입니다.
weAreOnline 온라인 상태입니다.
yourNameLabel 귀하의 이름

채팅 창 모양 API 호출

Guide가 사용하는 채팅 창의 모양을 수정할 수 있습니다.

할당된 상담원 숨기기

cxone('chat','hideAssignedAgent');

헤더 숨기기

cxone('chat','hideHeader');

고객 아바타 표시

cxone('chat','showCustomerAvatar');

보내기 버튼 표시

cxone('chat','showSendButton');

회신 칸의 글자 수 제한 설정

cxone('chat','setReplyBoxLimit', '280');

데이터 선택기가 있는 사용자 정의 CSS

API 호출에서 데이터 선택기를 사용하여 사용자 정의 CSS로 채팅 창의 모양을 사용자 정의할 수 있습니다. 데이터 선택기를 사용하면 사용자 정의 CSS를 적용할 채팅 창 섹션을 지정할 수 있습니다. data-selector 속성을 사용하여 데이터 선택기를 정의합니다. 수정할 채팅 창 구성 요소의 이름과 동일하게 설정합니다.

데이터 선택기로 사용자 정의 CSS를 추가하려면 다음 API 호출을 참조로 사용하십시오.

cxone('chat','setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');

  • ACTIVITY_BAR

  • AGENT_MESSAGE

  • AGENT_MESSAGE_BUBBLE

  • AVATAR

  • CONTENT

  • CUSTOMER_MESSAGE

  • CUSTOMER_MESSAGE_BUBBLE

  • DELIMITER

  • DROPDOWN_MENU

  • HEADER

  • INPUT

  • IS_TYPING

  • MESSENGER

  • POPUP

  • PRECONTACT_SURVEY

  • PRECONTACT_SURVEY_DESCRIPTION

  • PRIMARY_BUTTON

  • REPLY_BOX

  • SECONDARY_BUTTON

  • SEND_BUTTON

  • TEXTAREA

  • TEXT_BUTTON

  • WIDGET

  • WINDOW

data-selector 속성을 사용하는 사용자 정의 CSS 구성요소만 적용합니다. 다음의 예와 같이, 클래스 선택기 또는 JavaScript 코드의 다른 부분에는 적용하지 마십시오.

.Widget__Widget___1qQCf { background: red; }

타사 애플리케이션과의 통합

특정 채팅 이벤트가 발생하면 이 섹션에 있는 호출을 통해 푸시 알림을 받을 수 있습니다.

채팅 창에서 활성 스레드 인식

cxone('chat','getOngoingThreads');

채팅 창에서 진행 중인 컨택 인식

cxone('chat','getOngoingContact');

특정 채팅 이벤트를 위한 푸시 알림 수신

아래 예시에서 '이벤트'를 대체하려면 다음 입력 사용하십시오.

  • CaseToRoutingQueueAssignmentChanged

  • PageViewCreated

  • MessageCreated

  • MessageDeliveredToUser

  • MessageDeliveredToEndUser

  • MessageSeenByUser

  • MessageSeenByEndUser

  • MessageReadChanged

  • MessageAddedIntoCase

  • CaseInboxAssigneeChanged

  • CaseCreated

  • CaseStatusChanged

  • SenderTypingStarted

  • SenderTypingEnded

  • MessageNoteCreated

  • ContactRecipientsChanged

하나의 채팅 이벤트를 위해 알림을 수신하는 경우:

cxone('chat','onPushUpdate', 'event', callback);

하나 이상의 채팅 이벤트를 위해 알림을 수신하는 경우:

cxone('chat','onPushUpdate', ['event', 'event', 'event'], callback);

모든 채팅 이벤트를 위해 알림을 수신하는 경우:

cxone('chat','onAnyPushUpdate', callback);