JavaScript를 사용하여 채팅 채널 사용자 지정

JavaScript를 사용하여 라이브 채팅 실시간으로 상호작용하는 상담원 및 컨택입니다 및 채팅 메시징 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다을 사용자 지정할 수 있습니다. CXone은 기본 사용자 지정과 관련 JavaScript API 호출을 제공합니다. 웹사이트에 채팅을 추가하는 스크립트 태그에 이러한 API 호출을 포함시켜야 합니다. 이러한 기능을 추가하려면 웹사이트 코드에 액세스할 수 있어야 합니다. 이 페이지에서는 JavaScript를 추가할 위치와 포함할 정확한 코드 라인에 대해 설명합니다. 또한 이 페이지의 정보를 자신 있게 사용하려면 JavaScript 또는 웹 개발에 익숙해야 합니다.

채팅 채널 컨택이 상담원이나 봇과 상호 작용하는 방법입니다. 채널은 음성, 이메일, 채팅, 소셜 미디어 등이 될 수 있습니다.의 다음과 같은 측면을 사용자 지정할 수 있습니다.

채팅 동작 :채팅 창이 동작 하는 방식을 사용자 정의합니다. 여기에는 채팅 창 열기 및 닫기 또는 게임 모드 활성화가 포함됩니다. 게임 모드에서는 고객이 상담원을 기다리는 동안 Snake 게임을 플레이할 수 있습니다.
채팅 정보 : 채팅 창에 표시되는 정보를 사용자 정의합니다. 여기에는 고객의 이름, 상담원 이미지 또는 활동 상태 등이 포함됩니다.
사용자 정의 필드, 레이블 및 구 : 사용자 정의 필드 를 정의하거나 필드 레이블을 사용자 정의합니다. 컨택에게 표시되는 자동 메시지의 대체 텍스트를 구성할 수도 있습니다.
채팅 창 모양 : 채팅 창의 모양을 사용자 정의합니다 . 웹 페이지에서 창의 크기와 위치 등을 변경할 수 있습니다.
사용자 정의 CSS :채팅 창의 사용자 정의 CSS를 정의합니다.
선제적 작업:고객 행동에 따라 선제적 작업을 이용해 경험을 사용자 정의합니다.
기타 기능 - 구성할 수 있는 기타 항목은 다음과 같습니다.
- 호스트 환경이 특정 이벤트에 주의를 기울이도록 합니다.
- iOS 또는 Android 앱에 디지털 채팅 채널을 통합합니다.
- OAuth 인증 활성화.

현재 모든 JavaScript API는 각 호출에 대해 Brand Embassy 로더를 지원합니다. 웹사이트에서 독립 실행형 CXone 채팅을 사용하는 경우 이러한 모든 호출은 새로운 CXone 로더도 지원합니다. 결국 모든 채팅용 JavaScript API는 Brand Embassy 대신 CXone 로더를 사용하게 됩니다.

JavaScript 호출 구조는 사용하는 로더에 따라 다릅니다. 두 구조를 동시에 사용할 수는 없습니다. 사용하는 로더에 따라 둘 중 하나만 사용하십시오.

CXone Guide를 사용하여 웹사이트에 채팅을 구현하는 경우 CXone 로더를 사용합니다. 이 페이지의 모든 호출이 Guide에서 지원되는 것은 아니지만 CXone Guide 설명서에는 지원되는 모든 JavaScript 호출이 나열되어 있습니다.

디지털 채팅이나 Guide를 통해 CXone 로더를 사용하는 경우 다음과 같이 호출을 구성하십시오.


            cxone('chat','enableChatAlwaysOnline');

Brand Embassy 로더를 사용하는 경우 다음과 같이 호출을 구성하십시오.


            brandembassy('enableChatAlwaysOnline');

채팅 채널에 JavaScript 호출 추가

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

표시된 대로 정확히 스크립트 및 API 호출을 복사합니다. 예기치 않은 변경으로 인해 채널이 오작동할 수 있습니다.

앱 선택기 를 클릭하고 선택합니다. ACD.
DFO > 디지털 컨택 포인트로 이동합니다.
내 채널에서 웹사이트 스크립트를 클릭합니다.
페이지에서 JavaScript 코드를 복사하여 Notepad++와 같은 텍스트 편집 프로그램에 붙여넣습니다. 열기 및 닫기 <script> 태그를 포함해야 합니다.
Notepad++에서 붙여넣은 코드의 닫는 </script> 태그 바로 위에 사용하려는 JavaScript 호출을 추가합니다. 다음 예시 이미지에서 메모는 호출을 추가할 위치를 나타냅니다. 사용할 수 있는 지원되는 호출은 이 페이지의 나머지 부분에 설명되어 있습니다.

이미지 보기
열기 및 닫기 <script> 태그를 포함한 전체 스크립트를 복사하여 웹사이트 페이지의 헤더에 붙여넣습니다.
수정된 페이지를 방문하고 테스트 채팅 메시지를 보내 사용자 정의 사항이 의도한 대로 작동하는지 확인합니다.
테스트를 모두 마치고 예상대로 작동한다면 채팅 위젯이 있어야 하는 각 페이지 헤더에 최종 스크립트를 복사합니다.

채팅 동작 JavaScript 호출

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

채팅 창 열기

자동으로 채팅창을 엽니다. 기본 동작은 컨택이 채팅 아이콘을 클릭하면 채팅 창이 열리는 것입니다.


            brandembassy('openChatWindow');

채팅 창 닫기

자동으로 채팅창을 닫습니다. 기본 동작은 컨택이 채팅 아이콘을 클릭하면 채팅 창이 닫히는 것입니다.


            brandembassy('hideChatWindow');

항상 채팅 온라인

상담원이 온라인 상태가 아닌 경우에도 사용 가능한 상담원이 있는 것처럼 채팅 창을 표시합니다.


            brandembassy('chat','enableChatAlwaysOnline');

이전 채팅의 사용자 정의 필드 유지

상호작용이 시작된 후 사용자 정의 필드를 유지하거나 로컬 저장소에서 제거할지 여부를 선택할 수 있습니다. 이를 통해 컨택과의 모든 상호작용에서 계속 표시될 사용자 정의 필드를 선택할 수 있습니다. 'field_id'는 사용자 정의 필드를 생성할 때 Ident 필드의 값을 나타냅니다.


        cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');

적응형 카드에서 포스트백 데이터 보내기

Studio 작업과 봇은 채팅을 통해 컨택에 적응형 카드를 보낼 수 있습니다. 디지털 채팅에서 포스트백 데이터를 Studio 또는 봇으로 보내려면 처리기를 활성화해야 합니다. 적응형 카드 처리기는 봇 또는 Studio 작업 내에서 적응형 카드를 사용한 참여를 관리하고 응답하는 기능을 합니다. 처리기는 사용자가 버튼을 클릭하거나 드롭다운 메뉴에서 옵션을 선택하는 등 적응형 카드의 구성 요소와 상호작용할 때 활성화됩니다. 처리기는 사용자의 입력을 해독하고 적절한 응답이나 취할 조치를 결정합니다. Studio 또는 봇이 적절하게 응답하거나 보고 목적으로 적응형 카드 데이터를 저장할 수 있도록 기본 처리기 명령과 메시지 보내기 명령을 추가합니다. 사용자 정의 처리기 명령을 사용하여 기본 처리기를 대체할 수도 있습니다.

예시 보기


							<script>
								(function (i, s, o, r, g, v, a, m) {
								g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;
								i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;
								a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
								a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);
								})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');

								cxone('init', '1032');
								cxone('chat', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');
    
								cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {
								let messageContent = {
								type: "TEXT",
								payload: {
								text: action.title
								},
								postback: action.id
								}
      
								chatSdkInstance.sendMessage(messageContent)
								});
							</script>

기본 적응형 카드 처리기 명령을 추가합니다.


            adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

메시지 명령 보내기:


            sendMessage(messageContent: MessageContent)

사용자 정의 처리기 명령 생성:


					{
					"acType": "Action.Execute", // type of action Action.Execute or Action.Submit
					"acVerb": "null|string", // only if `verb` is provided in the Action
					"acActionId": "null|string" // only if id is provided in the Action
					"acData": { // `data` are provided in Action
					"firstName": "John",
					"lastName": "Doe",
					"_messageText": "Submitted something for you"
					}
			}

인바운드 메시지 예시 보기


							{
							...,
							"messageContent": {
							"type": "TEXT",
							"payload": {
							"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)
							},
							"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"
							}
							}
					}

아웃바운드 메시지 예시 보기


							{
							"thread": {
							"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
							},
							"messageContent": {
							"type": "ADAPTIVE_CARD",
							"payload": {
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"type": "AdaptiveCard",
							"version": "1.4",
							"body": [
							{
							"type": "TextBlock",
							"text": "Present a form and submit it back to the originator"
							},
							{
							"type": "Input.Text",
							"id": "firstName",
							"label": "What is your first name?"
							},
							{
							"type": "Input.Text",
							"id": "lastName",
							"label": "What is your last name?"
							}
							],
							"actions": [
							{
							"type": "Action.Execute",
							"title": "Fire!",
							"data": {
							"_messageText": "Submitted something for you"
							}
							}
							]
							}
							}
					}

인증 코드 설정

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


            brandembassy('setAuthorizationCode', 'authorization_code');

새 채팅 세션 자동 시작

현재 진행 중인 세션이 없는 경우, 새로운 채팅 메시지 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다 또는 라이브 채팅 실시간으로 상호작용하는 상담원 및 컨택입니다 세션을 만듭니다. 이 호출은 상담원의 컨택이 불편을 느끼지 않도록, 웹사이트의 트래픽이 적은 페이지에서 사용하십시오.

디지털 참여은(는) 채팅 세션의 첫 번째 메시지가 전송될 때 새 케이스를 만들어 대기열에 추가합니다. 채팅 세션이 시작되면 숨겨진 자동 메시지가 고객을 대신하여 전송됩니다. 이렇게 하면 프로세스가 더 빨리 시작되어 컨택이 상담원을 기다리는 시간이 줄어듭니다. 채팅 세션은 컨택이 채팅 아이콘을 클릭하여 대화를 시작하거나 자동 시작 채팅 세션을 위한 채팅 창이 열릴 때 시작됩니다. 초기 메시지는 고객에게는 보이지 않지만 상담원은 볼 수 있습니다.

숨겨진 초기 메시지의 텍스트를 사용자 정의할 수 있습니다.

채팅 세션을 자동으로 시작하면 사전 컨택 설문조사 양식을 건너뜁니다. 이 때문에 컨택에 대한 정보를 수집하려면 다른 방법을 사용해야 합니다. 예를 들어 상담원이 고객 카드에 직접 정보를 입력하도록 할 수 있습니다. OAuth 통합을 사용하여 고객 인증을 구성할 수도 있습니다.

자동 시작 케이스의 라우팅은 Digital Experience에서 구성된 라우팅 대기열 시스템은 라우팅 대기열을 사용하여 케이스를 어떤 상담원에게 라우팅할지 결정합니다. 시스템 관리자는 라우팅 대기열을 생성합니다. 이를 통해 특정 케이스를 해당 케이스 유형에 전문 지식을 가진 상담원에게 라우팅합니다.에 따라 이루어집니다. 라이브 채팅 세션의 경우 대화 가능한 상담원이 없으면 채팅 창에 대화 가능한 상담원 대기 중 메시지가 표시됩니다.

채팅 세션을 자동으로 시작하려면 다음 호출을 표시된 순서대로 사용하십시오.


            brandembassy('openChatWindow');

brandembassy('autoStartSession');

스크립트에 다른 호출을 추가하는 경우, autoStartSession은(는) 항상 스크립트의 마지막 호출이어야 합니다. 예:


            // set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');

// open chat window so user can start to chat
brandembassy('openChatWindow');

// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');

동시 채팅 세션 활성화

컨택이 동일한 브라우저에서 여러 채팅 세션을 시작하도록 할 수 있습니다. 한 브라우저 탭에서 활성 채팅 중인 경우 컨택이 새 브라우저 탭이나 창에서 두 번째 채팅을 시작할 수 있습니다.

이 동작을 활성화하려면 채팅 데이터가 저장되는 방법을 지정해야 합니다. 다음과 같은 두 가지 옵션이 있습니다.

localStorage: 탭이나 창을 닫은 후에도 데이터가 브라우저에 유지됩니다. 이것이 기본 저장 방법입니다. 여러 채팅 세션이 서로 다른 탭에서 동시에 열려 있는 경우 모두 동일한 상호작용으로 간주됩니다. 채팅 대화와 경험은 모든 탭에서 동일합니다.
sessionStorage: 데이터는 개별 탭이나 창에 대해 저장되었다가 탭이나 창이 닫히면 지워집니다. 사용자는 다양한 탭이나 창에서 여러 채팅 세션을 만들 수 있습니다. 각 탭의 채팅 세션은 고유한 상호작용으로 간주됩니다.

동시 채팅 세션을 활성화하려면 다음 예시와 같이 sessionStorage 값과 함께 storageType 키를 추가합니다.

localStorage 옵션을 사용하고 여전히 대화 내역을 비우려는 경우 채팅이 끝난 후 customerID를 제거하는 이벤트 리스너를 생성할 수 있습니다.


brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

대화 내역 비우기

채팅 대화가 끝난 후 대화 내역을 제거합니다. 채팅의 기본 저장소 옵션인 로컬 저장소를 사용하는 경우 유용할 수 있습니다. 이 저장 옵션은 브라우저 인스턴스가 닫힌 후에도 데이터를 저장합니다. 이 경우 로컬 저장소에서 customerID를 삭제하여 대화 내역을 구체적으로 제거할 수 있습니다. 다음 예에서는 채팅에서 caseStatusChanged 이벤트를 수신하는 이벤트 리스너를 생성합니다. 이는 채팅 세션이 종료되었음을 나타냅니다. 그런 다음, 브라우저의 로컬 저장소에서 customerID를 제거하는 removeItem 명령이 호출됩니다.


brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 
	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 
		return; 
	}  
	const { status } = pushUpdatePayload.data.case || {};   
	if (typeof status === 'undefined') { 
		return; 
	}   
	// When a previous case has been closed, this will set the custom fields again. 
	if (status === 'closed') { 
		localStorage.removeItem('_BECustomerID') 
		); 
	} 
});

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

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

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


                brandembassy('sendFirstMessageAutomatically', 'Hello');

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


                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

전환 페이지의 메시지 텍스트를 변경합니다.

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

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


            brandembassy('hideFirstSentMessage', false);

지연 케이스 생성

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


            brandembassy('sendFirstMessageAutomatically', false);

게임 모드 활성화

상담원을 기다리는 동안 컨택이 Snake 게임을 할 수 있습니다.


            brandembassy('allowGameMode');

만족도 설문조사 자동화

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


            brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'

채팅 정보 JavaScript 호출

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

고객 ID 받기

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


            brandembassy('getCustomerIdentityId');

사전 컨택 설문조사 양식 숨기기

채팅 메시지 컨택에 언제든 채팅 메시지를 보내고 회신을 기다리는 비동기 채팅입니다 세션 시작 시, 사전 컨택 설문조사 양식이 나타납니다. 컨택 이름 등 컨택에 대한 정보를 수집합니다. 원하는 경우 사전 컨택 설문조사 양식을 숨기고 대화 상대가 채팅 메시징 세션을 시작하는 즉시 채팅 창이 나타나도록 할 수 있습니다.


            brandembassy('hidePreSurvey');

대기열 카운터 숨기기

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


            brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');

채팅 알림 오디오 음소거

채팅 알림음을 끌 수 있습니다. 채팅 알림음은 기본적으로 켜져 있습니다. 이는 다른 채팅 사운드 설정과 관계없이 구성해야 합니다. 값을 'false'로 변경하여 채팅 알림 오디오를 다시 켤 수 있습니다.


            brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');

브라우저 언어 번역 재정의

사용자의 브라우저 언어 설정 또는 사용자 지정된 로캘을 설정된 번역으로 재정의합니다. 예를 들어, 연락처의 브라우저 언어 설정에 관계없이 특정 텍스트가 항상 영어로 표시되도록 할 수 있습니다.


            brandembassy('init', 'brandId', 123, 'locale');

활동 상태 설정

활동 바에서 메시지를 변경합니다. 예를 들어 채팅 메시징 세션에 대한 응답 시간을 알려주기 위해 사용할 수 있습니다. 채팅 메시징은 비동기식 채팅이므로 컨택이 상담원의 소식을 듣기 위해 기다려야 할 때 도움이 됩니다.


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

상담원 이미지 설정

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


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

고객 ID 설정

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


            brandembassy('setCustomerId', 'customer_id');

고객 이름 설정

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


            brandembassy('setCustomerName', 'Elizabeth');

날짜 양식 설정

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


            brandembassy('setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'

로케일 설정

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


            brandembassy('setLocale', 'locale');

케이스 정보 표시

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


            brandembassy('showCaseInfo');

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

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


            brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

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

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


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

이용약관

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

내부 창
외부 링크


            // Internal Modal Window
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

// If you want to explicitely disable this feature, you can use
brandembassy('hideTermsOfUse');

버튼 또는 내부 창의 모양을 사용자 정의하려면 이 페이지에 설명된 CSS API 호출을 사용합니다.

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

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

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

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


            brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

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


            brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

채팅 레이블 및 문구 사용자 정의

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

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


            brandembassy('setTranslation', 'key', 'your translation');

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


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

사용자 정의할 수 있는 메시지 및 레이블을 보려면 클릭하십시오.

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

키	기본 레이블/메시지
allAgentsForQueueAreBusy	대기열의 모든 상담원이 현재 통화 중입니다. 고객님 앞에{queue, plural,one {} other {}} <strong>{queue, number}</strong> {queue, plural, one {명이} other {명이}} 대기하고 있습니다.
beginButton	채팅 시작!
cancel	취소
caseNumber	케이스 #{caseNumber}
change	변경
chattedWith	방금 채팅한 상대
commonErrorText	예상치 못한 오류가 발생했습니다. 나중에 다시 시도하십시오.
완료	완료
dragAndDropDropzone	여기에서 파일을 드래그 앤 드롭하여 보냅니다.
dragAndDropDropzone거부됨	파일을 업로드할 수 없습니다 :(
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}번째입니다.
yourNameLabel	귀하의 이름

사용자　지정　필드　번역

채팅 창에 표시되는 사용자 지정 필드를 번역할 수 있습니다.


            brandembassy('chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

채팅 창 모양 호출

채팅 창의 모양을 수정할 수 있습니다.

채팅 아이콘 닫기

True로 설정된 경우, 설정 메뉴의 채팅 종료 옵션 대신에 X 아이콘이 창에 표시됩니다.


            brandembassy('enableCloseIcon', true);

할당된 상담원 숨기기


            brandembassy('hideAssignedAgent');

헤더 숨기기


            brandembassy('hideHeader');

팝업 숨기기


            brandembassy('hidePopups');

고객 아바타 표시


            brandembassy('showCustomerAvatar');

보내기 버튼 표시


            brandembassy('chat','showSendButton');

사이즈

채팅 창의 너비와 높이를 사용자 정의합니다. CSS 사양에서 지원되는 절대 단위 또는 상대 단위를 사용할 수 있습니다.


            brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

전체 디스플레이 모드


            brandembassy('setFullDisplay');
// OR
brandembassy('chat','setWindowWidth', '100%');
brandembassy('chat','setWindowHeight', '100%');

위치 및 오프셋

setPositionX 호출은 화면의 왼쪽 또는 오른쪽을 시작 위치로 정의합니다. setOffsetX 및 setOffsetY 호출은 채팅 창이 시작점에서 수평 및 수직으로 오프셋되는 픽셀 수를 각각 정의합니다.


            // set horizontal starting position
brandembassy('setPositionX', 'right');
													
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20

회신 칸의 글자 수 제한 설정


            brandembassy('setReplyBoxLimit', '280'); // default = null

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

자신만의 CSS를 추가하여 채팅　창 모양을 사용자 지정할 수 있습니다. data-selector 속성으로 스타일을 지정할 채팅　창 부분을 지정합니다. 아래 드롭다운에는 data-selector 속성으로 선택할 수 있는 모든 구성 요소의 목록이 포함되어 있습니다. 데이터 선택기를 사용하면 사용자 정의 CSS를 적용할 채팅 창 섹션을 지정할 수 있습니다. data-selector　뒤에　중괄호　안에　스타일을　추가합니다. 여러 요소의 스타일을 지정하려면 단일 JavaScript 호출로 모든 CSS를 추가해야 합니다. 동일한 JavaScript 호출을 여러 번 사용하는 경우 마지막 JavaScript 호출이 이전의 모든 CSS를 재정의합니다. CXone에서 직접 채팅용 CSS를 사용자 지정할 수도 있습니다.

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


            brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important} 
	[data-selector="CONTENT"] {background: green !important}`);

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

.Widget__Widget___1qQCf { background: red; }

창 구성 요소는 여러 개의 중첩 블록으로 구성될 수 있습니다. 이 섹션에 나열된 구성 요소 선택기는 각 구성 요소의 루트 이름을 지정합니다. 구성 요소의 중첩 블록 중 하나에 CSS를 적용하려면, 개발자 콘솔에서 구성 요소를 검사하여 올바른 블록을 선택할 수 있습니다.

선제적 작업

이 섹션의 호출로 고객 행동에 따라 고객을 선제적으로 채팅에 참여시킬 수 있습니다.

트리거 실행

trigger_id로　정의된 작업 흐름 자동화 트리거를 시작합니다.


            brandembassy('executeTrigger', 'trigger_id');

방문자 이벤트 설정

보고 목적으로 정의된 고객 행동(이벤트)을 저장합니다. CXone Mobile SDK에서 이 호출이 사용되면 event_type이 custom_event_type으로 변경됩니다.


            brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');

방문자 변수 설정

정의된 고객 정보를 보고 목적으로 저장합니다.


            brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

전환 저장

고객 행동 전환을 보고 목적으로 저장합니다.


            brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

웹 방문자 태그

이 섹션은 제어 릴리스(CR)의 제품 또는 기능에 관한 내용입니다. CR 그룹 소속이 아니거나 자세한 정보를 원하시면, CXone 계정 담당자에게 문의하십시오.

웹 사이트에서 특정 행동을 보이는 컨택에 태그를 지정할 수 있습니다. 이 기능은 Digital Experience의 태그를 사용하며, 가이드이(가) 필요합니다.

컨택에 태그 추가:


            brandembassy('assignTag', 'tagID');

컨택의 태그 제거:


            brandembassy('removeTag', 'tagID');

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

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

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


            brandembassy('getOngoingThreads');

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


            brandembassy('getOngoingContact')

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

호환 가능한 이벤트를 보기 위해 클릭

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

CaseToRoutingQueueAssignmentChanged
PageViewCreated
MessageCreated
MessageDeliveredToUser
MessageDeliveredToEndUser
MessageSeenByUser
MessageSeenByEndUser
MessageReadChanged
MessageAddedIntoCase
CaseInboxAssigneeChanged
CaseCreated
CaseStatusChanged
SenderTypingStarted
SenderTypingEnded
MessageNoteCreated
ContactRecipientsChanged

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


            brandembassy('onPushUpdate', 'event', callback);

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


            brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

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


            brandembassy('onAnyPushUpdate', callback);

Android 또는 iOS 애플리케이션에 통합

Android 또는 iOS 앱에 디지털 채팅을 통합할 수 있습니다. 기본 애플리케이션은 JavaScript 초기화 코드가 추가되는 WebView를 사용해야 합니다. 이 예시 코드는 이 페이지의 JavaScript를 사용하여 채팅 기능의 모양과 동작을 수정합니다.


            <script async type=”text/javascript”>
  (function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;
    a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)
  })(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');

  //init of Livechat
  brandembassy(‘init’, BRAND_HASH);

  // hiding unwanted UI elements
  brandembassy('hideHeader');
  brandembassy('hidePopups');
 
  // stretching livechat to full width and height
  brandembassy('setFullDisplay');

  // Customer's name
  brandembassy('setCustomerName', 'CUSTOMER_NAME');

  // Other optional Custom Fields
  brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
    
  // Start Chat
  brandembassy('openChatWindow');
  brandembassy('autoStartSession');

</script>