Rollen

De standaard JSON-indeling heeft de volgende drie rollen.

• Agent: om in te stellen dat de bureaubladindeling wordt weergegeven wanneer een agent zich aanmeldt bij de Webex Contact Center Desktop om de activiteiten van agenten af te handelen.

• Supervisor — om in te stellen dat de bureaubladindeling wordt weergegeven wanneer een supervisor zich aanmeldt bij de Webex Contact Center Desktop, zodat alleen de functies van de supervisor kunnen worden afgehandeld.

  Wanneer een supervisor zich aanmeldt bij de Desktop, wordt de indeling van het bureaublad toegepast die is gespecificeerd voor het primaire team. Als u geen primair team ter beschikking stelt, is de globale indeling van toepassing. APS-rapporten zijn standaard uitgeschakeld.

• SupervisorAgent — om in te stellen dat de bureaubladindeling wordt weergegeven wanneer een supervisor zich aanmeldt bij de Webex Contact Center Desktop om zowel de functies van de supervisor als de activiteiten van de agent af te handelen.

De volgende eigenschappen op het hoogste niveau voor de JSON-indeling zijn gebaseerd op de rol:

{
    "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": {
                ...
            }
        },
    }
},

Titel van de app

Om een titel op te geven op de horizontale kop van het bureaublad. De standaardtitel is Webex Contact Center.

Voorbeeld:

"appTitle": "Webex Contact Center"

De titel kan tekst, een afbeelding of een lege tekenreeks zijn. De titeltekst wordt in twee rijen weergegeven. Als de tekst verder reikt dan de tweede rij, wordt er een ellipspictogram weergegeven en wordt op de knopinfo de volledige titel weergegeven. Stijlen kunnen niet worden toegepast op de titel.

U kunt ofwel data-URI's (Uniform Resource Identifier) gebruiken of een aangepaste titelafbeelding hosten op een content delivery network (CDN), Amazon Web Services (AWS) Simple Storage Service (S3) bucket, of een vergelijkbare hostingservice, en vervolgens de URL van de gehoste afbeelding opgeven. De ondersteunde formaten voor titelafbeeldingen zijn PNG, JPG, JPEG, GIF, SVG en WebP. De ondersteunde grootte van de titelafbeelding is 184 x 32 pixels (breedte x hoogte).

logo

Om een URL voor het bedrijfslogo te specificeren. Als u geen URL opgeeft, wordt standaard het Webex Contact Center-logo weergegeven.

Voorbeeld:

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

U kunt een afbeelding met een aangepast logo hosten op een CDN, Amazon Web Services (AWS) Simple Storage Service (S3) -bucket of een vergelijkbare hostingservice, en vervolgens de URL van de gehoste afbeelding opgeven. De ondersteunde beeldformaten voor logo's zijn PNG, JPG, JPEG, GIF, SVG en WebP. De ondersteunde afbeeldingsgrootte van het logo is 96 x 32 pixels (breedte x hoogte).

Illustratie van de taakpagina

Om een aangepaste illustratie voor de taakpagina te specificeren op basis van de voorkeuren van de organisatie en de merkafstemming. Wanneer een agent zich aanmeldt, wordt op de taakpagina de geconfigureerde afbeelding als achtergrond weergegeven. De taakpagina wordt standaard zonder illustratie weergegeven.

Voorbeeld:

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

U kunt gegevens-URI's gebruiken of een aangepaste illustratie hosten op een Content Delivery Network (CDN), Amazon Web Services (AWS) Simple Storage Service (S3) -bucket of een vergelijkbare hostingservice, en vervolgens de URL van de gehoste afbeelding opgeven. De illustratie kan op globaal niveau of op teamniveau worden geconfigureerd op basis van de definitie van de indeling. Zorg ervoor dat u de juiste URL instelt om te voorkomen dat de defecte afbeelding op het bureaublad wordt weergegeven.

De ondersteunde formaten voor het illustreren van taakpagina's zijn PNG, JPG, JPEG, GIF, SVG en WebP. De aanbevolen afbeeldingsgrootte is 400 x 400 pixels (breedte x hoogte). Als het aangepaste illustratieformaat groter is dan het aanbevolen formaat, wordt het illustratieformaat aangepast op basis van de hoogte-breedteverhouding op de taakpagina. Als het aangepaste illustratieformaat kleiner is dan het aanbevolen formaat, blijft de werkelijke grootte van de illustratie behouden op de taakpagina.

Stop met navigeren bij AcceptTask

Om te bepalen of de focus moet worden verlegd naar een nieuw aanvaarde taak, wanneer de agent de nieuwe taak aanvaardt terwijl hij aan een vorige taak werkt. De standaardwaarde is false.

Voorbeeld:

"stopNavigateOnAcceptTask": false

Als de waarde op true is ingesteld en de gebruiker een nieuwe taak op het bureaublad accepteert, blijft de focus op de vorige taak liggen en wordt niet verschoven naar de nieuw geaccepteerde taak. Deze instelling voorkomt dat de gebruiker gegevens verliest wanneer hij een nieuw verzoek accepteert.

Bedenk bijvoorbeeld dat agent 1 aan het chatten is met klant 1 en tegelijkertijd een telefoongesprek voert met klant 2. Tijdens het telefoongesprek werkt Agent 1 de gegevens van klant 2 bij in het venster Interaction Control. Agent 1 heeft momenteel twee actieve taken in het venster Takenlijst, en de focus ligt op het paneel Interaction Control. Wanneer Agent 1 een nieuw chatverzoek van klant 3 accepteert, blijft de focus liggen op het paneel Interaction Control met Customer 2 en wordt niet verschoven naar het nieuw geaccepteerde chatverzoek.

Om de focus op de vorige taak te behouden en niet over te schakelen naar de nieuw geaccepteerde taak, selecteert u de aangepaste indeling waarbij de eigenschapswaarde StopNavigateOnAcceptTask is ingesteld op true.

Als de eigenschapswaarde StopNavigateOnAcceptTask niet wordt ingevoerd in de JSON-indeling, verschuift het bureaublad de focus naar de nieuw geaccepteerde taak. Het gedrag is vergelijkbaar met wanneer de eigenschapswaarde StopNavigateOnAcceptTask is ingesteld op false.

Drag Drop ingeschakeld

Om het slepen en neerzetten van de widgets op de aangepaste pagina's mogelijk te maken, stelt u de waarde in op true. De standaardwaarde is false.

Voorbeeld:

"dragDropEnabled": false

NotificationTimer

Om de duur in te stellen (in seconden) waarna de bureaubladmeldingen op het bureaublad automatisch worden verwijderd. De melding verschijnt in de rechterbovenhoek van het bureaublad. De standaardtime-outwaarde is 8 seconden. Het geldige bereik voor time-outwaarden is 1-10 seconden. Om de time-outwijzigingen van kracht te laten worden, moet de browser worden vernieuwd nadat de wijzigingen zijn aangebracht.

Voorbeeld:

"notificationTimer": 8

Maximaal aantal meldingen

Om het aantal bureaubladmeldingen in te stellen dat tegelijkertijd op het bureaublad moet worden weergegeven. De standaardwaarde is 3. Het bereik voor desktopmeldingen is 1 tot 10. De meldingen op het bureaublad zijn gestapeld. Als er veel meldingen zijn, verschijnen deze met enige vertraging, afhankelijk van de instellingen van de NotificationTimer.

Timer voor meldingen in de browser

Om de duur in te stellen (in seconden) waarna de meldingen van de broodrooster in de browser op het bureaublad automatisch worden verwijderd. Toaster is een systeemeigen browsermelding die alleen verschijnt als het bureaublad niet het actieve browservenster of tabblad is. Het venster of tabblad van de desktopbrowser is niet actief wanneer

• U werkt in andere browservensters of -tabbladen.

• U werkt aan andere toepassingen.

• U hebt het venster van de desktopbrowser geminimaliseerd.

De melding verschijnt in de rechterbovenhoek van het bureaublad. De standaardtime-outwaarde is 8 seconden. Het aanbevolen bereik voor time-outwaarden is 5-15 seconden. Om de time-outwijzigingen van kracht te laten worden, moet de browser worden vernieuwd nadat de wijzigingen zijn aangebracht.

Voorbeeld:

"browserNotificationTimer": 8

WXM geconfigureerd

(Optioneel) Om te configurerenWebex Experience Management, stelt u de waarde in op true. De standaardwaarde is false.

Voorbeeld:

"wxmConfigured": true

Chat-app op de desktop

Om meerdere door Cisco aangeboden chattoepassingen te configureren, zoals de Webex-app.

WebEx-geconfigureerd

De Webex-app en de bijbehorende functies voor berichten en vergaderingen kunnen binnen de desktop worden geconfigureerd. Met deze configuratie kunnen agenten samenwerken met andere agenten, supervisors en vakdeskundigen (KMO's) in hun organisatie zonder de desktop te hoeven verlaten.

Om de Webex-app op de desktop te configureren:

• InCisco Webex Control Hub, wanneer u diensten voor een gebruiker toevoegt, vinkt u het selectievakje Advanced Messaging aan (Gebruikers > Gebruikers beheren > Services > Berichten). Zie Gebruikersaccounts beheren in Cisco Webex Sitebeheer voor meer informatie.

• Stel in de aangepaste bureaubladindeling de waarde van de eigenschap WebExConfigureed in op true.

  Voorbeeld:

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

  De standaardwaarde van de eigenschap WebExConfigured is false.

  De Webex-app is alleen beschikbaar voor de rollen agent, supervisor en SupervisorAgent als u de eigenschapswaarde voor elk van deze rollen op true instelt. De agent, supervisor of SupervisorAgent kan zich niet afmelden bij de Webex-app.

  Om het (Webex) -pictogram op de horizontale kop van het bureaublad weer te geven, voert u de waarde webex in de eigenschap HeaderActions in. Zie HeaderActions voor meer informatie.

  Om de Webex-app voor een specifiek team in te schakelen, selecteert u de aangepaste indeling waarbij de eigenschapswaarde van WebEx is ingesteld op true. Zie Een team aanmaken voor meer informatie.

U kunt de Webex-app ook configureren in het venster Aanvullende informatie, de aangepaste pagina en de aangepaste widget. Voor meer informatie, zie het venster met aanvullende informatie.

Melding van de Webex-app

De waarden die zijn opgegeven met de eigenschappen NotificationTimer en BrowserNotificationTimer voor de meldingstimer zijn van toepassing op de Webex-app. De standaardtime-outwaarde is 8 seconden voor deze eigenschappen. Zie NotificationTimer en BrowserNotificationTimer voor meer informatie.

Header Actions

Om de volgorde van de pictogrammen op de horizontale kop van het bureaublad te wijzigen. De standaardvolgorde is als volgt:

1. (Webex)

2. (Buitenoproep)

3. (Meldingscentrum)

Stel de waarde van de eigenschap HeaderActions als volgt in:

Voorbeeld:

Om de standaardvolgorde van de pictogrammen te wijzigen, voert u de eigenschap HeaderActions en de waarden dienovereenkomstig in de aangepaste lay-out in.

Voorbeeld:

gebied

De gebiedseigenschap is het kerngedeelte van de Desktop Layout. U kunt de indeling per gebied definiëren.

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

U kunt de volgende gebiedsobjecten configureren:

• Paneel: vertegenwoordigt het tweede paneel of het meest rechtse paneel in het venster met aanvullende informatie.

• Navigatie: vertegenwoordigt aangepaste pagina's en hun navigatie-elementen die gerelateerd zijn aan de pagina's.

• Persistent: vertegenwoordigt de widgets op paginaniveau die permanent zijn en op alle pagina's van het bureaublad worden weergegeven.

• Headless: vertegenwoordigt de widgets die geen visuele interface hebben, maar die logica op de achtergrond uitvoeren.

Geavanceerde koptekst

Om de zichtbaarheid aan te passen en de volgorde van de pictogrammen op de horizontale kop van het bureaublad te wijzigen. De standaardvolgorde is als volgt:

1. (Webex)

2. (Buitenoproep)

3. (Meldingscentrum)

4. (Agent State Selector)

Stel de waarde van de eigenschap advancedHeader als volgt in:

Voorbeeld:

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

Om de standaardvolgorde van de pictogrammen te wijzigen, voert u de eigenschap advancedHeader en de waarden overeenkomstig in de aangepaste lay-out.

De widgets gaan van links naar rechts naar het dropdown-menu.

Kenmerken voor permanente tabbladen

Om de tabbladen op de aangepaste pagina's en aangepaste widgets als permanent in te stellen, voert u de kenmerken voor md-tabs in de aangepaste lay-out in.

Voorbeeld: Tabbladen instellen als permanent

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

Wanneer u md-tabs instelt op persistent (persist-selectie: true), Agent Desktop blijft de tabselectie behouden, zelfs als een agent op het bureaublad tussen pagina's of widgets wisselt.

De keuzelijst Meer tabbladen verschijnt automatisch wanneer het venster Aanvullende informatie meerdere tabbladen bevat.

U moet een aangepaste tooltip voor tabbladen toevoegen voor leesbaarheid en toegankelijkheid. Om een tooltip voor een aangepast tabblad toe te voegen, moet u de component omwikkelen met md-tooltip. Voer de tooltip-informatie in de eigenschap message in en pas de waarden van de stijleigenschap toe, zoals in het volgende voorbeeld wordt getoond.

"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;"
},

Om de functie voor slepen en neerzetten in het aangepaste tabblad in te schakelen, voegt u de volgende eigenschap toe aan de kenmerken:

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

• versleepbaar: Stel de waarde van de versleepbare eigenschap in op true.

• comp-unique-id: Voer een unieke waarde in om het onderdeel te identificeren.

  Voorbeeld:

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

Als u drag-and-drop inschakelt voor een aangepast tabblad, kan de agent het tabblad naar de gewenste positie in het venster met aanvullende informatie slepen. Om de tabbladen terug te zetten naar de standaard tabvolgorde, voegt u de volgende eigenschap toe:

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

• agentx-wc-more-actions-widget: Voer het onderdeel in dat wordt weergegeven als het pictogram Meer acties () in het venster Aanvullende informatie.

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Agenten kunnen de tabbladen in het venster met aanvullende informatie terugzetten naar de standaardvolgorde door te klikken op > Tabvolgorde opnieuw instellen.

• tabs-unique-id: Voer dezelfde unieke waarde in die is gedefinieerd voor de eigenschap comp-unique-id om de md-tabs-componenten in kaart te brengen en opnieuw in te stellen.

De volgende voorbeeldcode maakt gebruik van de functies Meer acties en Tabvolgorde opnieuw instellen.

"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"
        }
    ]
}],

}

De keuzelijst Meer acties kan worden uitgebreid om extra aangepaste componenten of widgets toe te voegen na de optie Tabvolgorde opnieuw instellen. Het volgende is een voorbeeldset van stijleigenschapswaarden die kunnen worden toegepast op aanvullende componenten.

"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;"
},

• De widget Customer Experience Management Metrics configureren en openen via de navigatiebalk

• Tabbladen gebruiken op de aangepaste pagina

• Standaard hulpinformatievenster met contactgeschiedenis en schermpop

• Hulpinformatievenster met Customer Experience Journey-widget

De widget Customer Experience Management Metrics configureren en openen via de navigatiebalk

Voorbeeld:

{
    "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]
            }
        }
    }
},

Tabbladen gebruiken op de aangepaste pagina

Voorbeeld:

{
    "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]
            }
        }
    }
}

Standaard hulpinformatievenster met contactgeschiedenis en schermpop

Voorbeeld:

"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"
    }
},

Hulpinformatievenster met Customer Experience Journey-widget

Voorbeeld:

"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"
                },
            },