역할들

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

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

• 수퍼바이저 - 수퍼바이저 기능만 처리하도록 수퍼바이저가 Webex Contact Center 데스크톱에 로그인할 때 표시될 데스크탑 레이아웃을 설정하기 위해서예요.

  수퍼바이저가 데스크톱에 로그인하면 주 팀에 지정된 데스크톱 레이아웃이 적용돼요. 주 팀을 제공하지 않으면 글로벌 레이아웃이 적용돼요. 기본적으로 APS 보고서는 비활성화돼요.

• 수퍼바이저 에이전트—수퍼바이저가 수퍼바이저 기능과 상담원 활동을 모두 처리하기 위해 Webex 컨택 센터 데스크톱에 로그인할 때 표시될 데스크탑 레이아웃을 설정하기 위해서예요.

다음은 역할에 따른 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": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    },
    "supervisor": {
        "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": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            },
            "homePage": {
                ...
            }
        },
    }
    "supervisorAgent": {
        "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": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    }
},

앱 제목

데스크탑 가로 헤더에 제목을 지정하려면. 기본 제목은 Webex 컨택 센터예요.

예시:

"appTitle": "Webex Contact Center"

제목은 텍스트, 이미지 또는 빈 문자열일 수 있어요. 제목 텍스트가 두 줄로 표시돼요. 텍스트가 두 번째 줄 이후로 확장되면 줄임표 아이콘이 표시되고 툴팁에 전체 제목이 표시돼요. 스타일은 제목에 적용할 수 없어요.

데이터 URI (유니폼 리소스 식별자) 를 사용하거나 콘텐츠 전송 네트워크 (CDN), 아마존 웹 서비스 (AWS) 심플 스토리지 서비스 (S3) 버킷 또는 유사한 호스팅 서비스에 커스텀 타이틀 이미지를 호스팅한 다음 호스팅된 이미지의 URL을 지정할 수 있어요. 지원되는 타이틀 이미지 형식은 PNG, JPG, JPEG, GIF, SVG, WebP예요. 지원되는 타이틀 이미지 크기는 184 x 32픽셀 (너비 x 높이) 이에요.

로고

회사 로고 URL 지정하기 위해서요. URL을 제공하지 않으면 기본적으로 Webex 컨택 센터 로고가 표시돼요.

예시:

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

CDN, 아마존 웹 서비스 (AWS) 심플 스토리지 서비스 (S3) 버킷 또는 유사한 호스팅 서비스에 커스텀 로고 이미지를 호스팅한 다음 호스팅된 이미지의 URL을 지정할 수 있어요. 지원되는 로고 이미지 형식은 PNG, JPG, JPEG, GIF, SVG, WebP예요. 지원되는 로고 이미지 크기는 96 x 32 픽셀 (너비 x 높이) 이에요.

태스크 페이지 일러스트레이션

조직 선호도와 브랜드 정렬을 기반으로 작업 페이지에 사용자 지정 일러스트레이션을 지정하기 위해서요. 상담원이 로그인하면 작업 페이지에 구성된 그림이 배경으로 표시돼요. 기본적으로 작업 페이지는 그림 없이 표시돼요.

예시:

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

데이터 URI를 사용하거나 콘텐츠 전송 네트워크 (CDN), 아마존 웹 서비스 (AWS) 심플 스토리지 서비스 (S3) 버킷 또는 유사한 호스팅 서비스에 커스텀 일러스트레이션을 호스팅한 다음 호스팅된 일러스트레이션의 URL을 지정할 수 있어요. 일러스트레이션은 레이아웃 정의에 따라 글로벌 또는 팀 수준에서 구성할 수 있어요. 깨진 이미지가 데스크탑에 표시되지 않도록 올바른 URL을 구성해야 해요.

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

수락 작업 탐색 그만해요

에이전트가 이전 작업을 진행하는 동안 새 작업을 수락할 때 새로 수락한 작업으로 초점을 옮길지 여부를 결정하기 위해서요. 기본값은 거짓이에요.

예시:

"stopNavigateOnAcceptTask": false

값을 true로 설정하면 사용자가 데스크톱에서 새 작업을 수락하면 초점이 이전 작업에 유지되고 새로 수락한 작업으로 이동하지 않아요. 이 설정은 사용자가 새 요청을 수락할 때 데이터가 손실되는 것을 방지해요.

예를 들어 상담원 1이 고객 1과 채팅하면서 동시에 고객 2와 음성 통화를 하고 있다고 생각해 보세요. 음성 통화 중에 상담원 1이 상호작용 제어 패널에서 고객 2의 세부 정보를 업데이트하고 있어요. 현재 에이전트 1의 작업 목록 창에 활성 작업이 두 개 있는데 초점은 상호 작용 제어 창에 있어요. 상담원 1이 고객 3으로부터 새 채팅 요청을 수락하면 초점은 고객 2와의 상호 작용 제어판에 남아 새로 수락한 채팅 요청으로 이동하지 않아요.

이전 작업에 초점을 맞추고 새로 수락한 작업으로 이동하지 않으려면 StopNavigateOnAcceptTask 속성 값을 true로 설정한 사용자 지정 레이아웃을 선택하세요.

StopNavigateOnAcceptTask 속성 값을 JSON 레이아웃에 입력하지 않으면 데스크톱은 새로 수락한 작업으로 초점을 이동해요. 동작은 StopNavigateOnAcceptTask 속성 값이 false로 설정되었을 때와 비슷해요.

드래그 드롭 가능해요

사용자 지정 페이지에서 위젯을 드래그 앤 드롭하고 크기 조정할 수 있게 하려면 값을 true로 설정하세요. 기본값은 거짓이에요.

예시:

"dragDropEnabled": false

알림 타이머

지속 시간 (초) 을 설정하려면요. 그 후 데스크톱의 바탕 화면 알림이 자동으로 닫히죠. 데스크톱 오른쪽 상단에 알림이 표시돼요. 기본 타임아웃 값은 8초예요. 타임아웃 값의 유효 범위는 1~10초예요. 타임아웃 변경 사항을 적용하려면 변경 후 브라우저를 새로 고쳐야 해요.

예시:

"notificationTimer": 8

최대 알림 개수

데스크탑에서 한 번에 표시될 데스크톱 알림 수를 설정하기 위해서요. 기본값은 3이에요. 데스크톱 알림 범위는 1~10이에요. 데스크톱 알림이 누적돼요. 알림이 많으면 알림 타이머 설정에 따라 약간 지연되어 표시돼요.

브라우저 알림 타이머

지속 시간 (초) 을 설정하려면요. 그 후 데스크톱의 브라우저 토스터 알림이 자동으로 닫히죠. 토스터는 데스크톱이 활성 브라우저 창이나 탭이 아닌 경우에만 나타나는 기본 브라우저 알림이에요. 데스크톱 브라우저 창이나 탭이 비활성 상태인 경우

• 다른 브라우저 창이나 탭에서 작업하고 계세요.

• 다른 애플리케이션에서 작업하고 계세요.

• 데스크탑 브라우저 창을 최소화하셨어요.

데스크톱 오른쪽 상단에 알림이 표시돼요. 기본 타임아웃 값은 8초예요. 타임아웃 값의 권장 범위는 5~15초예요. 타임아웃 변경 사항을 적용하려면 변경 후 브라우저를 새로 고쳐야 해요.

예시:

"browserNotificationTimer": 8

WXM구성했어요

(선택 사항) Webex Experience Management 구성하려면 값을 true로 설정하세요. 기본값은 거짓이에요.

예시:

"wxmConfigured": true

데스크톱 채팅 앱

Webex 앱처럼 Cisco에서 제공하는 채팅 애플리케이션을 여러 개 구성하려면.

웹엑스 컨피그레이티드

Webex 앱과 메시징 및 미팅 기능을 데스크탑에서 구성할 수 있어요. 이 구성을 통해 상담원은 데스크톱을 벗어나지 않고도 조직의 다른 상담원, 감독자 및 주제 전문가 (SME) 와 협업할 수 있어요.

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

• 에서 Cisco Webex Control Hub 사용자에 대한 서비스를 추가할 때 고급 메시징 체크 박스 (사용자 > 사용자 관리 > 서비스 > 메시징) 를 선택해요. 자세한 내용은 Cisco Webex사이트 관리에서 사용자 계정 관리를 참조하십시오.

• 사용자 지정 데스크톱 레이아웃에서 WebExConfigured 속성 값을 true로 설정하세요.

  예시:

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

  WebexConfigured 속성의 기본값은 거짓이에요.

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

  데스크탑의 가로 헤더에 (웹엑스) 아이콘을 표시하려면 HeaderActions 속성에 webex 값을 입력하세요. 자세한 내용은 헤더 액션을 참조하세요.

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

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

웹엑스 앱 알림

알림 타이머에 대한 알림 타이머 및 브라우저 알림 타이머 속성을 사용하여 지정한 값은 Webex 앱에 적용할 수 있어요. 이 속성들의 기본 타임아웃 값은 8초예요. 자세한 내용은 알림 타이머 및 브라우저 알림 타이머를 참조하세요.

헤더 액션

데스크탑 가로 헤더에 있는 아이콘 순서를 변경하려면. 기본 순서는 다음과 같아요.

1. (웹엑스)

2. (아웃다이얼 콜)

3. (알림 센터)

헤더액션 속성의 값을 다음과 같이 설정하세요.

예시:

아이콘의 기본 순서를 변경하려면 HeaderActions 속성과 그에 따라 사용자 지정 레이아웃의 값을 입력하세요.

예시:

지역

영역 속성은 데스크톱 레이아웃의 핵심 섹션이에요. 면적별로 레이아웃을 정의할 수 있어요.

"area": {
    "header": {
        ...
    },
    "advancedHeader: {
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
    },
    "panel": {
        ...
    },
    "navigation": {
        ...
    },
    "persistent": {
        ...
    },
    "headless": {
        ...
    }
},

다음 영역 개체를 구성할 수 있어요.

• 패널: 보조 정보 창의 두 번째 패널 또는 가장 오른쪽 패널을 나타냅니다.

• 내비게이션: 사용자 지정 페이지 및 페이지와 관련된 탐색 요소를 나타냅니다.

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

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

어드밴스드 헤더

가시성 사용자 정의하고 데스크탑 가로 헤더에 있는 아이콘 순서를 변경하려면. 기본 순서는 다음과 같아요.

1. (웹엑스)

2. (아웃다이얼 콜)

3. (알림 센터)

4. (에이전트 스테이트 셀렉터)

어드밴스드헤더 속성 값을 다음과 같이 설정하세요.

예시:

"advancedHeader": [
        {
          "comp": "agentx-webex"
        },
        {
          "comp": "agentx-outdial"
        },
        {
          "comp": "agentx-notification"
        },
        {
          "comp": "agentx-state-selector"
        }
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
      ]

아이콘의 기본 순서를 변경하려면 AdvancedHeader 속성과 그에 따라 사용자 지정 레이아웃의 값을 입력하세요.

위젯이 드롭다운 메뉴로 왼쪽에서 오른쪽으로 흐릅니다.

퍼시스턴트 탭 어트리뷰트

사용자 지정 페이지와 사용자 정의 위젯의 탭을 영구 탭으로 설정하려면 사용자 지정 레이아웃에 md-tabs의 속성을 입력하세요.

예: 탭을 영구 탭으로 설정하세요.

{
    "comp": "md-tabs",
    "attributes": {
        "persist-selection": true,
        "tabs-id": "unique-id for all the tabs together in the container"
    },
}

md-tabs를 영구 (지속 선택: true) 으로 설정하면 에이전트가 데스크톱에서 페이지나 위젯 사이를 전환해도 탭 선택이 Agent Desktop 유지돼요.

보조 정보 창에 탭이 여러 개 있으면 추가 탭 드롭다운 목록이 자동으로 나타나요.

가독성과 접근성을 위해 사용자 지정 탭 툴팁을 추가해야 해요. 사용자 지정 탭에 툴팁을 추가하려면 구성 요소를 md-tooltip으로 래핑하세요. 메시지 속성에 툴팁 정보를 입력하고 다음 예와 같이 스타일 속성값을 적용하세요.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Tab 1",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

사용자 지정 탭에서 드래그 앤 드롭 기능을 활성화하려면 속성 내에 다음 속성을 추가하세요.

"comp": "md-tabs",
"attributes": {
    "class": "widget-tabs",
    "draggable": true,
    "comp-unique-id": "sample-dynamic-custom-tabs"
},

• 드래그 가능: 드래그 가능 속성 값을 true로 설정하세요.

• comp-unie-id: 구성 요소를 식별하는 고유 값을 입력하세요.

  예시:

  "comp-unique-id": "sample-dynamic-custom-tabs"
  

사용자 지정 탭에 드래그 앤 드롭을 활성화하면 상담원이 보조 정보 창 내의 필요한 위치에 탭을 끌어다 놓을 수 있어요. 탭을 기본 탭 순서로 재설정하려면 다음 속성을 추가하세요.

"comp": "agentx-wc-more-actions-widget",
"attributes": {
    "slot": "settings",
    "class": "widget-pane",
    "tabs-unique-id": "sample-dynamic-custom-tabs"
},

• agentx-wc-more-actions-widget: 보조 정보 창에 추가 작업 () 아이콘으로 표시되는 구성 요소를 입력하세요.

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. 에이전트는 > 탭 순서 재설정을 클릭하여 보조 정보 창에 있는 탭을 기본 순서로 재설정할 수 있어요.

• 탭-고유-ID: md-tabs 구성 요소를 매핑하고 재설정하려면 comp-unique id 속성에 정의된 것과 동일한 고유 값을 입력하세요.

다음 샘플 코드는 기타 작업과 탭 순서 재설정 기능을 사용해요.

"comp": "agentx-wc-more-actions-widget",
"attributes": {
    "slot": "settings",
    "class": "widget-pane",
    "tabs-unique-id": "sample-dynamic-custom-tabs"
},
"children": [{
    "comp": "div",
    "attributes": {
        "textContent": "custom action",
        "slot": "custom-action"
    },
    "children": [{
            "comp": "agentx-wc-notes-header-widget"
        },
        {
            "comp": "agentx-wc-menu-notification"
        }
    ]
}],

}

추가 작업 드롭다운 목록을 확장해서 탭 순서 재설정 옵션 다음에 사용자 지정 구성 요소나 위젯을 추가할 수 있어요. 다음은 추가 컴포넌트에 적용할 수 있는 스타일 속성 값의 샘플 세트입니다.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Element",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

• 내비게이션 바에서 고객 경험 관리 지표 위젯 구성 및 액세스해요

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

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

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

내비게이션 바에서 고객 경험 관리 지표 위젯 구성 및 액세스해요

예시:

{
    "nav": {
        "label": "Customer Experience Management Metrics",
        "icon": "/app/images/wxm.bcd45cc3.svg",
        "iconType": "other",
        "navigateTo": "wxm-metrics",
        "align": "top"
    },
    "page": {
        "id": "wxm-metrics",
        "widgets": {
            "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": "Customer Experience Journey",
                    "maximizeAreaName": "app-maximize-area"
                }
            }
        },
        "layout": {
            "areas": [
                ["comp1"]
            ],
            "size": {
                "cols": [1],
                "rows": [1]
            }
        }
    }
},

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

예시:

{
    "nav": {
        "label": "Dynamic Tabs",
        "icon": "stored-info",
        "iconType": "momentum",
        "navigateTo": "dynamic-tabs",
        "align": "top"
    },
    "page": {
        "id": "page-id-tabs",
        "widgets": {
            "comp1": {
                "comp": "md-tabs",
                "children": [{
                        "comp": "md-tab",
                        "textContent": "One",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": "widget-two",
                            "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js"
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Two",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "textContent": "Two Content",
                        "attributes": {
                            "slot": "panel"
                        }
                    }
                ]
            },
            "comp2": {
                "comp": "widget-two",
                "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js"
            }
        },
        "layout": {
            "areas": [
                ["comp1", "comp2"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
}

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

예시:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
            "comp": "md-tab",
            "attributes": {
                "slot": "tab",
                "class": "widget-pane-tab"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY_TAB"
                }
            }]
        },
        {
            "comp": "md-tab-panel",
            "attributes": {
                "slot": "panel",
                "class": "widget-pane"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY"
                }
            }]
        },
    ]
}, {
    "comp": "md-tab",
    "attributes": {
        "slot": "tab",
        "class": "widget-pane-tab"
    },
    {
        "comp": "md-tab",
        "attributes": {
            "slot": "tab",
            "class": "widget-pane-tab"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP_TAB"
            }
        }],
        "visibility": "SCREEN_POP"
    },
    {
        "comp": "md-tab-panel",
        "attributes": {
            "slot": "panel",
            "class": "widget-pane"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP"
            }
        }],
        "visibility": "SCREEN_POP"
    }
},

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

예시:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
                "comp": "md-tab",
                "attributes": {
                    "slot": "tab"
                },
                "children": [{
                    "comp": "slot",
                    "attributes": {
                        "name": "WXM_JOURNEY_TAB"
                    }
                }],
                "visibility": "WXM_JOURNEY"
            },
            {
                "comp": "md-tab-panel",
                "attributes": {
                    "slot": "panel",
                    "class": "widget-pane"
                },
                "children": [{
                    "comp": "agentx-wc-cloudcherry-widget",
                    "properties": {
                        "userModel": "$STORE.app.userModel",
                        "spaceId": "",
                        "metricsId": "",
                        "teamId": "$STORE.agent.teamName",
                        "ani": "$STORE.agentContact.taskSelected.ani",
                        "isDarkMode": "$STORE.app.darkMode"
                    },
                    "wrapper": {
                        "title": "Customer Experience Journey",
                        "maximizeAreaName": "app-maximize-area"
                    }
                }],
                {
                    "comp": "md-tab",
                    "attributes": {
                        "slot": "tab",
                        "class": "widget-pane-tab"
                    },
                    "children": {
                        "comp": "md-tab",
                        "attributes": {
                            "slot": "tab",
                            "class": "widget-pane-tab"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "CONTACT_HISTORY_TAB"
                            }
                        }]
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel",
                            "class": "widget-pane"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "CONTACT_HISTORY"
                            }
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "attributes": {
                            "slot": "tab",
                            "class": "widget-pane-tab"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "SCREEN_POP_TAB"
                            }
                        }],
                        "visibility": "SCREEN_POP"
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel",
                            "class": "widget-pane"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "SCREEN_POP"
                            }
                        }],
                        "visibility": "SCREEN_POP"
                    }
                    "visibility": "SCREEN_POP"
                },
            },