역할

기본 JSON 레이아웃에는 다음과 같은 세 가지 역할이 있습니다.

• 상담원 - 상담원이 상담원 활동을 처리하기 위해 Webex Contact Center 데스크톱에 로그인할 때 표시할 데스크톱 레이아웃을 설정합니다.

• 감독자 - 감독자가 Webex Contact Center 데스크톱에 로그인할 때 감독자 기능만 처리하도록 데스크톱 레이아웃이 표시되도록 설정합니다.

  감독자가 데스크톱에 로그인하면 기본 팀에 지정된 데스크톱 레이아웃이 적용됩니다. 기본 팀을 제공하지 않으면 전역 레이아웃이 적용됩니다. 기본적으로 APS 보고서는 비활성화되어 있습니다.

• supervisorAgent - 감독자가 Webex Contact Center 데스크톱에 로그인하여 감독자 기능과 상담원 활동을 모두 처리할 때 표시할 데스크톱 레이아웃을 설정합니다.

다음은 역할을 기반으로 하는 JSON 레이아웃의 최상위 속성입니다.

{ "agent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["아웃다이얼", "알림"], "area": { "advancedHeader": { ... }, "패널": { ... }, "탐색": { ... }, "영구": { ... }, "헤드리스": { ... } }, }, "supervisor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": 거짓, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["아웃다이얼", "알림"], "area": { "advancedHeader": { ... }, "패널": { ... }, "탐색": { ... }, "영구": { ... }, "헤드리스": { ... }, "홈페이지": { ... } }, } "supervisorAgent": { "버전": "0.1.0", "appTitle": "Webex Contact Center", "로고": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": 거짓, "dragDropEnabled": 거짓, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["아웃다이얼", "알림"], "area": { "advancedHeader": { ... }, "패널": { ... }, "탐색": { ... }, "영구": { ... }, "헤드리스": { ... } }, } },

appTitle

데스크톱의 가로 헤더에 제목을 지정하는 것입니다. 기본 제목은 Webex Contact Center 입니다.

예:

"appTitle": "Webex Contact Center"

제목은 텍스트, 이미지 또는 빈 문자열일 수 있습니다. 제목 텍스트는 두 행으로 표시됩니다. 텍스트가 두 번째 행을 초과하면 줄임표 아이콘이 표시되고 도구 설명에 전체 제목이 표시됩니다. 제목에는 스타일을 적용할 수 없습니다.

데이터 URI(Uniform Resource Identifier)를 사용하거나 콘텐츠 전송 네트워크(CDN), Amazon Web Services(AWS) Simple Storage Service(S3) 버킷 또는 유사한 호스팅 서비스에서 사용자 지정 제목 이미지를 호스팅한 다음 호스팅된 이미지의 URL을 지정할 수 있습니다. 지원되는 제목 이미지 형식은 PNG, JPG, JPEG, GIF, SVG 및 WebP입니다. 지원되는 제목 이미지 크기는 184 x 32픽셀(너비 x 높이)입니다.

로고

회사 로고의 URL을 지정합니다. URL을 입력하지 않으면 기본적으로 Webex Contact Center 로고가 표시됩니다.

예:

"로고": "https://my-cdn.com/logo.png"

CDN, Amazon Web Services(AWS) Simple Storage Service(S3) 버킷 또는 이와 유사한 호스팅 서비스에서 사용자 지정 로고 이미지를 호스팅한 다음 호스팅된 이미지의 URL을 지정할 수 있습니다. 지원되는 로고 이미지 형식은 PNG, JPG, JPEG, GIF, SVG 및 WebP입니다. 지원되는 로고 이미지 크기는 96 x 32픽셀(너비 x 높이)입니다.

taskPage일러스트레이션

조직 기본 설정과 브랜드 정렬에 따라 작업 페이지에 대한 사용자 정의 일러스트레이션을 지정합니다. 상담원이 로그인하면 작업 페이지에 구성된 그림이 배경으로 표시됩니다. 기본적으로 작업 페이지는 그림 없이 표시됩니다.

예:

"taskPageIllustration": "https://www.abc.com/image/logo.jpg",

데이터 URI를 사용하거나 CDN(콘텐츠 전송 네트워크), AWS(Amazon Web Services) S3(Simple Storage Service) 버킷 또는 이와 유사한 호스팅 서비스에서 사용자 지정 일러스트레이션을 호스팅한 다음 호스팅된 일러스트레이션의 URL을 지정할 수 있습니다. 그림은 레이아웃 정의에 따라 전역 또는 팀 수준에서 구성할 수 있습니다. 깨진 이미지가 바탕 화면에 표시되지 않도록 올바른 URL을 구성해야 합니다.

지원되는 작업 페이지 일러스트레이션 형식은 PNG, JPG, JPEG, GIF, SVG 및 WebP입니다. 권장 그림 크기는 400 x 400픽셀(너비 x 높이)입니다. 사용자 정의 일러스트레이션 크기가 권장 크기보다 크면 작업 페이지의 가로 세로 비율에 따라 일러스트레이션 크기가 조정됩니다. 사용자 정의 일러스트레이션 크기가 권장 크기보다 작으면 실제 일러스트레이션 크기가 작업 페이지에 유지됩니다.

stopNavigateOnAcceptTask

상담원이 이전 작업에서 작업하는 동안 새 작업을 수락한 경우 새로 수락한 작업으로 포커스를 이동할지 여부를 결정합니다. 기본값은 false 입니다.

예:

"stopNavigateOnAcceptTask": 거짓

값이 true 로설정된 경우 사용자가 데스크톱에서 새 작업을 수락하면 포커스가 이전 작업에 유지되고 새로 수락된 작업으로 이동하지 않습니다. 이 설정은 사용자가 새 요청을 수락할 때 데이터가 손실되지 않도록 합니다.

예를 들어 상담원 1이 고객 1과 채팅 중이며 동시에 고객 2와 음성 통화 중이라고 가정합니다. 음성 통화 중에 상담원 1이 상호 작용 제어 창에서 고객 2의 세부 정보를 업데이트하고 있습니다. 현재 상담원 1의 작업 목록 창에는 두 개의 활성 작업이 있으며 상호 작용 제어 창에 포커스가 있습니다. 상담원 1이 고객 3의 새 채팅 요청을 수락하면 포커스는 고객 2가 있는 상호 작용 제어 창에 남아 있으며 새로 수락된 채팅 요청으로 이동하지 않습니다.

이전 작업에 포커스를 유지하고 새로 승인된 작업으로 이동하지 않으려면 stopNavigateOnAcceptTask 속성 값이 true로 설정된 사용자 지정 레이아웃을 선택합니다.

stopNavigateOnAcceptTask 속성 값이 JSON 레이아웃에 입력되지 않은 경우 데스크톱은 포커스를 새로 수락된 작업으로 이동합니다. 이 동작은 stopNavigateOnAcceptTask 특성 값이 false 로 설정된 경우와유사합니다.

dragDropEnabled

사용자 정의 페이지에서 위젯의 끌어서 놓기 및 크기 조정을 활성화하려면 값을 true 로설정합니다. 기본값은 false 입니다.

예:

"dragDropEnabled": 거짓

알림 타이머

데스크톱의 바탕 화면 알림이 자동으로 해제되는 기간(초)을 설정합니다. 알림은 데스크톱의 오른쪽 상단 모서리에 나타납니다. 기본 시간 제한 값은 8초입니다. 시간 제한 값의 유효 범위는 1-10초입니다. 시간 제한 변경 내용을 적용하려면 변경 내용을 적용한 후 브라우저를 새로 고쳐야 합니다.

예:

"알림 타이머": 8

maximumNotificationCount

데스크톱에서 한 번에 표시할 바탕 화면 알림 수 설정 기본값은 3입니다. 데스크톱 알림의 범위는 1-10입니다. 바탕 화면 알림이 누적됩니다. 알림이 많을 경우 notificationTimer 설정에 따라 약간의 지연이 나타납니다.

브라우저 알림 타이머

바탕 화면에서 브라우저 토스터 알림이 자동으로 해제되는 기간(초)을 설정합니다. 토스터는 바탕 화면이 활성 브라우저 창이 아니거나 Tab이 아닌 경우에만 나타나는 기본 브라우저 알림입니다. 데스크톱 브라우저 창 또는 Tab가 비활성화되면

• 다른 브라우저 창 또는 탭에서 작업 중입니다.

• 다른 애플리케이션에서 작업 중입니다.

• 데스크톱 브라우저 창을 최소화했습니다.

알림은 데스크톱의 오른쪽 상단 모서리에 나타납니다. 기본 시간 제한 값은 8초입니다. 시간 제한 값의 권장 범위는 5-15초입니다. 시간 제한 변경 내용을 적용하려면 변경 내용을 적용한 후 브라우저를 새로 고쳐야 합니다.

예:

"브라우저 알림 타이머": 8

wxm구성됨

(선택 사항) Webex Experience Management를 구성하려면 값을 true 로설정합니다. 기본값은 false 입니다.

예:

"wxmConfigured": 참

데스크탑챗앱

Webex App과 같은 여러 Cisco 제공 채팅 애플리케이션 구성

webex구성됨

Webex 메시징 및 회의 기능과 함께 앱은 데스크톱 내에서 구성할 수 있습니다. 이 구성을 사용하면 상담사가 데스크톱을 벗어나지 않고도 조직의 다른 상담사, 감독자 및 SME(주제 전문가)와 협업할 수 있습니다.

데스크톱 내에서 Webex 앱을 구성하려면:

• Cisco Webex Control Hub에서 사용자에 대한 서비스를 추가할 때 고급 메시징 확인란( 사용자> 사용자 관리 >서비스 > 메시징 )을 선택합니다. 자세한 내용은 Cisco Webex 사이트 관리 에서 사용자 계정 관리를 참조하십시오.

• 사용자 정의 데스크탑 레이아웃에서 webexConfigured 속성 값을 참 으로 설정합니다.

  예:

  "desktopChatApp": { "webexConfigured": true },

  webexConfigured 속성의 기본값은 false 입니다.

  Webex 앱은 이러한 역할 각각에 대해 webexConfigured 속성 값을 true 로 설정한 경우에만 상담원, 슈퍼바이저 및 슈퍼바이저 상담원 역할에 사용할 수 있습니다. 상담원, 슈퍼바이저 또는 수퍼바이저 상담원은 Webex 앱에서 로그아웃할 수 없습니다.

  표시하려면 (Webex) 아이콘을 보려면 headerActions 속성에 Webex 값을 입력합니다. 자세한 내용은 headerActions 단원을 참조하십시오.

  특정 팀에 대해 Webex 앱을 활성화하려면 webexConfigured 속성 값이 true 로 설정된 사용자 정의 레이아웃을선택합니다. 자세한 내용은 팀 만들기를 참조하세요.

보조 정보 창, 사용자 정의 페이지 및 사용자 정의 위젯에서 Webex 앱을 구성할 수도 있습니다. 자세한 내용은 보조 정보 창을 참조하십시오.

Webex 앱 알림

알림 타이머에 대해 notificationTimer 및 browserNotificationTimer 속성을 사용하여 지정된 값은 Webex App에 적용할 수 있습니다. 이러한 속성에 대한 기본 시간 제한 값은 8초입니다. 자세한 내용은 notificationTimer 및 browserNotificationTimer를 참조하십시오 .

headerActions

바탕 화면의 가로 헤더에서 아이콘의 순서 변경 기본 순서는 다음과 같습니다.

1. (Webex)

2. (아웃다이얼 통화)

3. (알림 센터)

headerActions 속성의 값을 다음과 같이 설정합니다.

예:

아이콘의 기본 순서를 변경하려면 headerActions 속성을 입력하고 그에 따라 사용자 지정 레이아웃의 값을 입력합니다 .

예:

지역

area 속성은 데스크톱 레이아웃의 핵심 섹션입니다. 영역에 따라 레이아웃을 정의할 수 있습니다.

"영역": { "헤더": { ... }, "advancedHeader: { { "comp": "위젯-1", "속성": { ... }, "스크립트": .... } }, "패널": { ... }, "탐색": { ... }, "영구": { ... }, "헤드리스": { ... } },

다음 영역 개체를 구성할 수 있습니다.

• 패널: 보조 정보 창에서 두 번째 패널 또는 맨 오른쪽 패널을 나타냅니다.

• Navigation: 사용자 지정 페이지와 해당 페이지와 관련된 탐색 요소를 나타냅니다.

• 영구적: 영구적이며 데스크톱의 모든 페이지에 표시되는 페이지 수준 위젯을 나타냅니다.

• Headless: 시각적 인터페이스가 없지만 백그라운드에서 로직을 실행하는 위젯을 나타냅니다.

advancedHeader

가시성을 사용자 정의하고 데스크톱의 가로 헤더에 있는 아이콘의 순서를 변경합니다. 기본 순서는 다음과 같습니다.

1. (Webex)

2. (아웃다이얼 통화)

3. (알림 센터)

4. (상담원 상태 선택기)

advancedHeader 속성의 값을 다음과 같이 설정합니다.

예:

"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } { "comp": "위젯-1", "속성": { ... }, "스크립트": .... } ]

아이콘의 기본 순서를 변경하려면 advancedHeader 속성을 입력하고 그에 따라 사용자 지정 레이아웃의 값을 입력합니다 .

위젯은 왼쪽에서 오른쪽으로 드롭다운 메뉴로 이동합니다.

영구 탭의 속성

사용자 정의 페이지 및 사용자 정의 위젯의 탭을 영구로 설정하려면 사용자 정의 레이아웃에서 md-tabs 에 대한 속성을 입력합니다.

예: 탭을 영구적으로 설정

{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "컨테이너에 있는 모든 탭에 대한 고유 ID" }, }

md-tabs를 영구적으로 설정 하면(persist-selection: true) 상담원이 데스크탑에서 페이지 또는 위젯 사이를 전환하더라도 Agent Desktop는 Tab 선택을 유지합니다.

보조 정보 창에 여러 탭이 있는 경우 추가 탭 드롭다운 목록이 자동으로 나타납니다.

가독성 및 접근성을 위해 사용자 정의 Tab 툴팁을 추가해야 합니다. 사용자 지정 Tab에 대한 도구 설명을 추가하려면 구성 요소를 md-tooltip 으로래핑합니다. message 속성에 도구 설명 정보를 입력하고 다음 예제와 같이 스타일 속성 값을 적용합니다 .

"comp": "md-tooltip", "attributes": { "class": "위젯 탭", "message": "샘플 Tab 1", "style": "최대 너비: 252px; 최소 너비 : 110px; 오버플로: 숨김; 텍스트 오버플로: 줄임표; 공백 : nowrap; 디스플레이: 인라인 블록; margin-bottom: -10px;" },

사용자 지정 Tab 내에서 끌어서 놓기 기능을 활성화하려면 특성 내에 다음 속성을 추가합니다.

"comp": "md-tabs", "attributes": { "class": "위젯 탭", "draggable": 참, "comp-unique-id": "sample-dynamic-custom-tabs" },

• draggable: draggable 속성 값을 true 로 설정합니다.

• comp-unique-id: 구성 요소를 식별하기 위한 고유한 값을 입력합니다.

  예:

  "comp-unique-id": "샘플 동적 사용자 정의 탭" 

사용자 지정 Tab에 끌어서 놓기를 활성화하면 상담원은 Tab를 보조 정보 창 내의 필요한 위치로 끌어서 놓을 수 있습니다. 탭을 기본 Tab 순서로 재설정하려면 다음 속성을 추가합니다.

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "설정", "class": "위젯 창", "tabs-unique-id": "샘플 동적 사용자 정의 탭" },

• agentx-wc-more-actions-widget: 추가 작업 () 아이콘을 클릭합니다.

• slot="settings": 추가 작업 드롭다운 목록에서 Tab 순서 재설정 옵션으로 표시되는 구성 요소 내의 특성을 입력합니다. 상담원은 보조 정보 창의 탭을 클릭하여 기본 순서로 재설정할 수 있습니다. > Tab 순서를 재설정합니다.

• tabs-unique-id: comp-unique-id 속성에 대해 정의된 것과 동일한 고유 값을 입력하여 md-tabs 구성 요소를 매핑하고 재설정합니다 .

다음 샘플 코드에서는 추가 작업 및 Tab 순서 재설정 함수를 사용합니다 .

"comp": "agentx-wc-more-actions-widget", "attributes": { "slot": "설정", "class": "위젯 창", "tabs-unique-id": "sample-dynamic-custom-tabs" }, "children": [{ "comp": "div", "attributes": { "textContent": "커스텀 액션", "slot": "커스텀 액션" }, "children": [{ "comp": "agentx-wc-notes-header-widget" }, { "comp": "agentx-wc-menu-notification" } ] }], }

추가 작업 드롭다운 목록을 확장하여 Tab 순서 재설정 옵션 다음에 사용자 정의 구성 요소 또는 위젯을 추가할 수 있습니다. 다음은 추가 구성 요소에 적용할 수 있는 스타일 속성 값의 샘플 집합 입니다.

"comp": "md-tooltip", "attributes": { "class": "위젯 탭", "message": "샘플 요소", "style": "최대 너비: 252px; 최소 너비 : 110px; 오버플로: 숨김; 텍스트 오버플로: 줄임표; 공백 : nowrap; 디스플레이: 인라인 블록; margin-bottom: -10px;" },

• 탐색 모음에서 Customer Experience Management 메트릭 위젯 구성 및 액세스

• 사용자 지정 페이지에서 탭 사용

• 연락처 기록 및 화면 팝업이 있는 기본 보조 정보 창

• 고객 경험 여정 위젯이 있는 보조 정보 창

탐색 모음에서 Customer Experience Management 메트릭 위젯 구성 및 액세스

예:

{ "nav": { "label": "고객 경험 관리 지표", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "기타", "navigateTo": "wxm-metrics", "align": "상단" }, "페이지": { "id": "wxm-metrics", "위젯": { "comp1": { "comp": "agentx-wc-cloudcherry-widget", "attributes": { "metrics": true }, "properties": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app. darkMode" }, "wrapper": { "title": "고객 경험 여정", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } } },

사용자 지정 페이지에서 탭 사용

예:

{ "nav": { "label": "동적 탭", "icon": "저장된 정보", "iconType": "모멘텀", "navigateTo": "동적 탭", "align": "상단" }, "페이지": { "id": "페이지 ID 탭", "위젯": { "comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "하나", "속성": { "슬롯": "Tab" } }, { "comp": "md-tab-panel", "attributes": { "슬롯": "패널" }, "children": [{ "comp": "위젯 2", "스크립트": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }, { "comp": "md-tab", "textContent": "둘", "속성": { "슬롯": "Tab" } }, { "comp": "md-tab-panel", "textContent": "두 개의 콘텐츠", "속성": { "슬롯": "패널" } } ] }, "comp2": { "comp": "위젯-2", "스크립트": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "레이아웃": { "영역": [ ["comp1", "comp2"] ], "크기": { "cols": [1, 1], "rows": [1] } } } } }

연락처 기록 및 화면 팝업이 있는 기본 보조 정보 창

예:

"패널": { "comp": "md-tabs", "속성": { "클래스": "위젯 탭" }, "어린이": [{ "comp": "md-tab", "속성": { "슬롯": "Tab", "클래스": "위젯 창 탭" }, "어린이": [{ "comp": "슬롯", "속성": { "이름": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "속성": { "슬롯": "패널", "클래스": "위젯 창" }, "자식": [{ "comp": "슬롯", "속성": { "이름": "CONTACT_HISTORY" } }] }, ] }, { "comp": "md-tab", "속성": { "슬롯": "Tab", "클래스": "위젯 창 탭" }, { "comp": "md-tab", "속성": { "슬롯": "Tab", "클래스": "위젯 창 탭" }, "어린이": [{ "comp": "슬롯", "속성": { "이름": "SCREEN_POP_TAB" } }], "가시성": "SCREEN_POP" }, { "comp": "md-tab-panel", "속성": { "슬롯": "패널", "클래스": "위젯 창" }, "어린이": [{ "comp": "슬롯", "속성": { "이름": "SCREEN_POP" } }], "가시성": "SCREEN_POP" } },

고객 경험 여정 위젯이 있는 보조 정보 창

예:

"패널": { "comp": "md-tabs", "속성": { "클래스": "위젯 탭" }, "어린이": [{ "comp": "md-tab", "속성": { "슬롯": "Tab" }, "어린이": [{ "comp": "슬롯", "속성": { "이름": "WXM_JOURNEY_TAB" } }], "가시성": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "속성": { "슬롯": "패널", "클래스": "위젯 창" }, "어린이": [{ "comp": "agentx-wc-cloudcherry-widget", "속성": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "래퍼": { "title": "고객 경험 여정", "maximizeAreaName": "앱 최대화 영역" } }], { "comp": "md-tab", "속성": { "슬롯": "Tab", "클래스": "위젯 창 탭" }, "어린이": { "comp": "md-tab", "속성": { "슬롯": "Tab", "클래스": "위젯 창 탭" }, "어린이": [{ "comp": "슬롯", "속성": { "이름": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "attributes": { "slot": "패널", "class": "위젯 창" }, "children": [{ "comp": "슬롯", "속성": { "이름": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "속성": { "슬롯": "Tab", "클래스": "위젯 창 탭" }, "어린이": [{ "comp": "슬롯", "속성": { "이름": "SCREEN_POP_TAB" } }], "가시성": "SCREEN_POP" }, { "comp": "md-tab-panel", "속성": { "슬롯": "패널", "클래스": "위젯 창" }, "어린이": [{ "comp": "슬롯", "속성": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "visibility": "SCREEN_POP" }, },