JavaScript

을 사용하여 채팅 채널 사용자 지정

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

채팅 채널의 다음 측면을 사용자 정의할 수 있습니다. :

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

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

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

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

디지털 채팅이나 CXone Mpower를 통해 Guide 로더를 사용하는 경우 다음과 같이 통화를 구성합니다.


            cxone('chat','enableChatAlwaysOnline');

Brand Embassy 로더를 사용하는 경우 다음과 같이 통화를 구성합니다.


            brandembassy('enableChatAlwaysOnline');

채팅 채널에 JavaScript 통화 추가

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

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

앱 선택기 를 클릭하고 선택합니다.ACD.
Digital > 디지털 연락처로 이동합니다.
채널에서 웹사이트 스크립트를 클릭합니다.
페이지에서 JavaScript 코드를 복사하여 Notepad++와 같은 텍스트 편집 프로그램에 붙여넣습니다. 열기 및 닫기 <script> 태그를 포함해야 합니다.
Notepad++에서는 닫는 부분 바로 위에</script> 붙여넣은 코드의 태그에 사용하려는 JavaScript 호출을 추가합니다. 다음 예시 이미지에서 메모는 호출을 추가할 위치를 나타냅니다. 사용할 수 있는 지원되는 호출은 이 페이지의 나머지 부분에 설명되어 있습니다.
이미지 보기
오프닝과 클로징을 포함한 전체 스크립트를 복사하여 붙여넣습니다.<script> tags, into the header of a page of your website.
수정된 페이지를 방문하여 테스트 채팅 메시지를 보내 사용자 정의가 의도한 대로 작동하는지 확인하세요.
완전히 테스트하고 예상대로 작동하면 채팅 위젯이 있어야 하는 각 페이지의 헤더에 최종 스크립트를 복사합니다.

채팅 동작 JavaScript 호출

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

채팅 창 열기

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


            brandembassy('openChatWindow');

채팅 창 닫기

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


            brandembassy('hideChatWindow');

항상 온라인 채팅

온라인에 상담원이 없는 경우에도 상담원이 있는 것처럼 채팅 창을 표시합니다.


            brandembassy('chat','enableChatAlwaysOnline');

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

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


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

작업Adaptive Card

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

예제 보기


							<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>

기본 Adaptive Card 핸들러 추가 명령:


            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');

사전 연락 설문조사 미리 채워진 필드 설정

이전에 입력한 사용자 정의 필드 값이 이후 필드나 상호작용에서 자동 채우기 옵션으로 표시되도록 합니다. 특정 ID는 채팅 창에 저장할 사용자 지정 필드 값을 알려줍니다. 컨택이 새로운 대화를 시작하면 이전 대화의 사용자 지정 필드가 자동으로 이용가능해집니다. 이 기능은 컨택이 이메일 주소와 같이 이전 채팅 세션에서 입력한 것과 동일한 정보를 새 채팅 세션에 입력해야 하는 경우 시간을 절약하는 데 도움이 됩니다. 자동 채우기 옵션으로 표시하려는 필드가 여러 개 있는 경우, 모두 동일한 API 호출에 포함시킵니다.


            cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

새 채팅 세션 자동 시작

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

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

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

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

에 구성된

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

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

스크립트에 호출을 추가하는 경우 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 값을 추가합니다.

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);

사례 생성 지연

이 호출을 사용하여 사례를 만들기 전에 연락처의 실제 첫 번째 메시지를 기다리도록 Digital Experience를 구성할 수 있습니다.


            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.');

에이전트 이미지 설정

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


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

고객 ID 설정

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


            brandembassy('setCustomerId', 'customer_id');

고객 이름 설정

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


            brandembassy('setCustomerName', 'Elizabeth');

날짜 형식 설정

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


            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	채팅을 시작하세요!
취소	취소
caseNumber	사례 #{caseNumber}
변경	변경
chattedWith	방금 채팅을 했습니다.
commonErrorText	예기치 않은 오류가 발생했습니다. 나중에 다시 시도하십시오.
done	완료
dragAndDropDropzone	여기로 파일을 끌어서 놓아서 보내세요
dragAndDropDropzoneRejected	파일을 업로드할 수 없습니다 :(
EmailLabel	E-mail
endChat	채팅 종료
endChatTitle	이 대화를 종료하시겠습니까?
endGame	종료 game
ending	채팅 종료 중...
fileSendingFailed	파일 전송 실패
getTranscriptDescription	이 대화의 사본을 다음 이메일 주소로 보내세요:
getTranscriptLink	채팅 사본 받기
invalidToken	잘못된 토큰
ipAddressBlocked	IP 주소가 차단되었습니다.
loading	로딩 중 ...
loadPreviousButton	이전 대화 로드
messageLabel	메시지
networkErrorText	네트워크 오류가 발생했습니다. 다시 시도하십시오.
newCase	새로운 사례
noAgentOnlineForQueue	현재 해당 대기열에 상담원이 없습니다.
오프라인	오프라인
offlineFormDesc	현재 서비스를 이용할 수 없습니다.
offlineFormSuccessMsgHead	감사합니다!
offlineFormSuccessMsgSub	이메일이 성공적으로 전송되었습니다. 곧 다시 연락 드리겠습니다.
online	Online
onlineFormText	채팅을 시작하려면 이름을 알려주세요. 저희 상담원이 곧 도와 드리겠습니다.
pleaseSelect	선택하세요...
poweredBy	Powered by
preparingSession	세션 준비 중...
replyBoxPlaceholder	여기에 쓰고 누르세요.<enter> 보내기
재시도	재시도
sendFileTextSize	{filesize}보다 작은 파일을 업로드해 주세요.
sendFileTextSupportedFormat	지원되는 형식입니다.
sendFileTextSupportedFormatDesc	이미지, 비디오, {fileFormats}
sendMessageButton	메시지 보내기
sendNewEmail	새 이메일 보내기
sendTranscript	대본 보내기
snakeWaiting	대기열에 {queue}이(가) 있습니다.
startChatInPopup	질문해보세요!
startNewChat	새 채팅 시작
statusReconnecting	연결을 시도 중인가요?
surveySuccesfullySent	피드백을 보내주셔서 감사합니다!
systemChattingWith	현재 {name}
과 채팅 중입니다. topic	Topic
transciptSentFailed	보내기에 실패했습니다.
전송성공	대본이 성공적으로 전송되었습니다!
tryAgainButton	다시 시도하세요.
unexpectedError	예기치 않은 오류가 발생했습니다.
validationInvalidEmail	이메일 주소가 유효하지 않습니다.
validationMandatory	이 필드는 필수입니다.
validationShorterName	짧은 이름을 사용하세요.
validationShortMessage	메시지가 너무 짧습니다.
waiting	Waiting...
waitingDescription	곧 상담원이 연락을 드릴 것입니다.
waitingFooter	조회<spacebar> 대기 시간을 줄이려면.
waitingForAgent	에이전트를 기다리는 중...
waitingInQueue	에이전트를 기다리는 중. 대기자 중 {queue}번째입니다.
yourNameLabel	당신의 이름

사용자 정의 필드 번역s

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


            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 사양에서 지원되는 절대 단위 또는 상대 단위를 사용할 수 있습니다.

전체 디스플레이 모드

위치 및 오프셋

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 Mpower에서 직접 채팅용 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');

방문자 이벤트 설정

보고 목적으로 정의된 고객 행동(이벤트)을 저장합니다. 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 그룹 소속이 아니거나 자세한 정보를 원하시면, 계정 대표자에게 문의하십시오.

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

연락처에 태그를 추가하려면:


            brandembassy('assignTag', 'tagID');

연락처에서 태그를 제거하려면:


            brandembassy('removeTag', 'tagID');

타사 애플리케이션과 통합

이 섹션의 호출을 사용하면 특정 채팅 이벤트가 발생할 때 푸시 알림을 받을 수 있습니다.

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


            brandembassy('getOngoingThreads');

채팅 창에서 진행 중인 연락 인식


            brandembassy('getOngoingContact')

특정 채팅 이벤트에 대한 푸시 알림 수신

한 채팅 이벤트에 대한 알림을 받으려면:


            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>