Rôles

La mise en page JSON par défaut comporte les trois rôles suivants.

• Agent : pour configurer la disposition du bureau à afficher lorsqu'un agent se connecte au Webex Contact Center Desktop pour gérer les activités des agents.

• Superviseur : définir la disposition du bureau à afficher lorsqu'un superviseur se connecte au Webex Contact Center Desktop afin de gérer uniquement les fonctionnalités du superviseur.

  Lorsqu'un superviseur se connecte au bureau, la disposition du bureau spécifiée pour l'équipe principale est appliquée. Si vous ne fournissez pas d'équipe principale, c'est la mise en page globale qui s'applique. Par défaut, les rapports APS sont désactivés.

• SupervisorAgent : pour définir la disposition du bureau à afficher lorsqu'un superviseur se connecte au Webex Contact Center Desktop afin de gérer à la fois les fonctionnalités du superviseur et les activités des agents.

Voici les propriétés de premier niveau de la mise en page JSON en fonction du rôle :

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

Titre de l'application

Indiquer un titre sur l'en-tête horizontal du bureau. Le titre par défaut est Webex Contact Center.

Exemple :

"appTitle": "Webex Contact Center"

Le titre peut être du texte, une image ou une chaîne vide. Le texte du titre apparaît sur deux lignes. Si le texte dépasse la deuxième ligne, une icône en forme de point de suspension s'affiche et l'info-bulle affiche le titre complet. Les styles ne peuvent pas être appliqués au titre.

Vous pouvez soit utiliser des URI de données (Uniform Resource Identifier), soit héberger une image de titre personnalisée sur un réseau de diffusion de contenu (CDN), un bucket Amazon Web Services (AWS) Simple Storage Service (S3) ou un service d'hébergement similaire, puis spécifier l'URL de l'image hébergée. Les formats d'image de titre pris en charge sont PNG, JPG, JPEG, GIF, SVG et WebP. La taille d'image de titre prise en charge est de 184 x 32 pixels (largeur x hauteur).

logo

Pour spécifier l'URL du logo de l'entreprise. Si vous ne fournissez pas d'URL, le logo du centre d'appels Webex apparaît par défaut.

Exemple :

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

Vous pouvez héberger une image de logo personnalisée sur un CDN, un bucket Amazon Web Services (AWS) Simple Storage Service (S3) ou un service d'hébergement similaire, puis spécifier l'URL de l'image hébergée. Les formats d'image du logo pris en charge sont PNG, JPG, JPEG, GIF, SVG et WebP. La taille d'image du logo prise en charge est de 96 x 32 pixels (largeur x hauteur).

Illustration de la page des tâches

Pour spécifier une illustration personnalisée pour la page des tâches en fonction des préférences de l'organisation et de l'alignement de la marque. Lorsqu'un agent se connecte, la page des tâches affiche l'illustration configurée en arrière-plan. Par défaut, la page des tâches apparaît sans illustration.

Exemple :

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

Vous pouvez utiliser des URI de données ou héberger une illustration personnalisée sur un réseau de diffusion de contenu (CDN), un bucket Amazon Web Services (AWS) Simple Storage Service (S3) ou un service d'hébergement similaire, puis spécifier l'URL de l'illustration hébergée. L'illustration peut être configurée au niveau mondial ou au niveau de l'équipe en fonction de la définition de la mise en page. Assurez-vous de configurer la bonne URL pour éviter que l'image cassée ne s'affiche sur le bureau.

Les formats d'illustration des pages de tâches pris en charge sont PNG, JPG, JPEG, GIF, SVG et WebP. La taille d'illustration recommandée est de 400 x 400 pixels (largeur x hauteur). Si la taille de l'illustration personnalisée est supérieure à la taille recommandée, la taille de l'illustration est ajustée en fonction du rapport hauteur/largeur de la page des tâches. Si la taille de l'illustration personnalisée est inférieure à la taille recommandée, la taille réelle de l'illustration est conservée sur la page des tâches.

Arrêter de naviguer sur Accepter la tâche

Pour déterminer s'il faut se concentrer sur une tâche qui vient d'être acceptée, lorsque l'agent accepte la nouvelle tâche alors qu'il travaille sur une tâche précédente. La valeur par défaut est False.

Exemple :

"stopNavigateOnAcceptTask": false

Si la valeur est définie comme vraie, lorsque l'utilisateur accepte une nouvelle tâche sur le bureau, le focus est maintenu sur la tâche précédente et ne passe pas à la nouvelle tâche acceptée. Ce paramètre empêche l'utilisateur de perdre des données lorsqu'il accepte une nouvelle demande.

Par exemple, imaginez que l'agent 1 discute avec le client 1 et qu'il passe simultanément un appel vocal avec le client 2. Pendant l'appel vocal, l'agent 1 met à jour les coordonnées du client 2 dans le volet Interaction Control. Actuellement, l'Agent 1 a deux tâches actives dans le volet Liste des tâches, et l'accent est mis sur le volet Contrôle des interactions. Lorsque l'agent 1 accepte une nouvelle demande de chat du client 3, l'accent reste mis sur le volet de contrôle des interactions avec le client 2 et non sur la demande de chat récemment acceptée.

Pour rester concentrée sur la tâche précédente et ne pas passer à la nouvelle tâche acceptée, sélectionnez la mise en page personnalisée avec la valeur de la propriété StopNavigateOnAcceptTask définie sur true.

Si la valeur de la propriété StopNavigateOnAcceptTask n'est pas saisie dans la mise en page JSON, le Desktop se concentre sur la tâche nouvellement acceptée. Le comportement est similaire à celui lorsque la valeur de la propriété StopNavigateOnAcceptTask est définie sur false.

Le glisser-déposer est activé

Pour activer le glisser-déposer et le redimensionnement des widgets sur les pages personnalisées, définissez la valeur sur true. La valeur par défaut est False.

Exemple :

"dragDropEnabled": false

Minuteur de notifications

Pour définir la durée (en secondes) au bout de laquelle les notifications du bureau seront automatiquement supprimées. La notification apparaît en haut à droite du bureau. Le délai d'attente par défaut est de 8 secondes. La plage valide pour les valeurs de temporisation est de 1 à 10 secondes. Pour que les modifications du délai d'attente prennent effet, le navigateur doit être actualisé une fois les modifications apportées.

Exemple :

"notificationTimer": 8

Nombre maximum de notifications

Pour définir le nombre de notifications à afficher simultanément sur le bureau. La valeur par défaut est 3. La plage des notifications sur ordinateur va de 1 à 10. Les notifications de bureau sont empilées. S'il y a de nombreuses notifications, elles apparaissent avec un léger retard selon les paramètres de NotificationTimer.

Minuteur de notification du navigateur

Pour définir la durée (en secondes) au bout de laquelle les notifications du navigateur sur le bureau seront automatiquement supprimées. Toaster est une notification native du navigateur qui n'apparaît que si le bureau n'est pas la fenêtre ou l'onglet actif du navigateur. La fenêtre ou l'onglet du navigateur de bureau est inactif lorsque

• Vous travaillez sur d'autres fenêtres ou onglets de navigateur.

• Vous travaillez sur d'autres applications.

• Vous avez réduit la fenêtre du navigateur de bureau.

La notification apparaît en haut à droite du bureau. Le délai d'attente par défaut est de 8 secondes. La plage recommandée pour les valeurs de temporisation est de 5 à 15 secondes. Pour que les modifications du délai d'attente prennent effet, le navigateur doit être actualisé une fois les modifications apportées.

Exemple :

"browserNotificationTimer": 8

Configuré avec WXM

(Facultatif) Pour configurerWebex Experience Management, définissez la valeur sur true. La valeur par défaut est False.

Exemple :

"wxmConfigured": true

Application de chat pour ordinateur

Pour configurer plusieurs applications de chat proposées par Cisco, comme l'application Webex.

Configuration WebEx

L'application Webex ainsi que ses fonctionnalités de messagerie et de réunion peuvent être configurées sur le bureau. Cette configuration permet aux agents de collaborer avec d'autres agents, superviseurs et experts en la matière (PME) de leur organisation sans quitter le bureau.

Pour configurer l'application Webex sur le bureau :

• DansCisco Webex Control Hub, lorsque vous ajoutez des services à un utilisateur, cochez la case Messagerie avancée (Utilisateurs > Gérer les utilisateurs > Services > Messagerie). Pour plus d'informations, voir Gérer les comptes utilisateurs dans l'administration Cisco Webex du site.

• Dans la mise en page personnalisée du bureau, définissez la valeur de la propriété WebExConfigurated sur true.

  Exemple :

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

  La valeur par défaut de la propriété WebExConfigurated est false.

  L'application Webex est disponible pour les rôles d'agent, de superviseur et de SupervisorAgent uniquement si vous définissez la valeur de la propriété WebExConfigurated sur true pour chacun de ces rôles. L'agent, le superviseur ou le SupervisorAgent n'arrive pas à se déconnecter de l'application Webex.

  Pour afficher l'icône (Webex) sur l'en-tête horizontal du bureau, entrez la valeur webex dans la propriété HeaderActions. Pour plus d'informations, voir HeaderActions.

  Pour activer l'application Webex pour une équipe en particulier, sélectionnez la mise en page personnalisée avec la valeur de propriété WebExConfigurated définie sur true. Pour plus d'informations, voir Créer une équipe.

Vous pouvez également configurer l'application Webex dans le volet Informations auxiliaires, la page personnalisée et le widget personnalisé. Pour plus d'informations, voir Volet d'information auxiliaire.

Notification de l'application Webex

Les valeurs spécifiées à l'aide des propriétés NotificationTimer et BrowserNotificationTimer pour le minuteur de notification sont applicables à l'application Webex. Le délai d'expiration par défaut est de 8 secondes pour ces propriétés. Pour plus d'informations, consultez NotificationTimer et BrowserNotificationTimer.

Actions des en-têtes

Pour modifier l'ordre des icônes sur l'en-tête horizontal du bureau. L'ordre par défaut est le suivant :

1. (Webex)

2. (Appel extérieur)

3. (Centre de notifications)

Définissez la valeur de la propriété HeaderActions comme suit :

Exemple :

Pour modifier l'ordre par défaut des icônes, entrez la propriété HeaderActions et les valeurs correspondantes dans la mise en page personnalisée.

Exemple :

zone

La propriété de la zone est la section principale de la mise en page du bureau. Vous pouvez définir la disposition en fonction de la zone.

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

Vous pouvez configurer les objets de zone suivants :

• Panneau : représente le deuxième panneau ou le panneau le plus à droite du volet Informations auxiliaires.

• Navigation : représente les pages personnalisées et les éléments de navigation qui y sont liés.

• Persistant : représente les widgets permanents au niveau de la page qui s'affichent sur toutes les pages du bureau.

• Headless : représente les widgets qui n'ont pas d'interface visuelle mais qui exécutent une logique en arrière-plan.

En-tête avancé

Pour personnaliser la visibilité et modifier l'ordre des icônes sur l'en-tête horizontal du bureau. L'ordre par défaut est le suivant :

1. (Webex)

2. (Appel extérieur)

3. (Centre de notifications)

4. (Agent State Selector)

Définissez la valeur de la propriété AdvancedHeader comme suit :

Exemple :

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

Pour modifier l'ordre par défaut des icônes, entrez la propriété AdvancedHeader et les valeurs correspondantes dans la mise en page personnalisée.

Les widgets apparaissent dans le menu déroulant de gauche à droite.

Attributs des onglets persistants

Pour que les onglets des pages personnalisées et des widgets personnalisés soient permanents, saisissez les attributs de md-tabs dans la mise en page personnalisée.

Exemple : définir les onglets comme persistants

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

Lorsque vous configurez md-tabs pour qu'il soit persistant (persist-selection : true), il Agent Desktop conserve la sélection des onglets même si un agent passe d'une page ou d'un widget à l'autre sur le bureau.

La liste déroulante Plus d'onglets apparaît automatiquement lorsque le volet Informations auxiliaires contient plusieurs onglets.

Vous devez ajouter une info-bulle personnalisée pour plus de lisibilité et d'accessibilité. Pour ajouter une info-bulle à un onglet personnalisé, insérez md-tooltip sur le composant. Entrez les informations de l'info-bulle dans la propriété du message et appliquez les valeurs des propriétés de style, comme indiqué dans l'exemple suivant.

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

Pour activer la fonction glisser-déposer dans l'onglet personnalisé, ajoutez la propriété suivante dans les attributs :

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

• draggable : définissez la valeur de la propriété déplaçable sur true.

• comp-unique-id : entrez une valeur unique pour identifier le composant.

  Exemple :

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

Si vous activez le glisser-déposer pour un onglet personnalisé, l'agent peut faire glisser l'onglet vers la position requise dans le volet Informations auxiliaires. Pour rétablir l'ordre de tabulation par défaut des onglets, ajoutez la propriété suivante :

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

• agentx-wc-more-actions-widget : Entrez le composant qui s'affiche sous forme d'icône Plus d'actions () dans le volet Informations auxiliaires.

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Les agents peuvent rétablir l'ordre par défaut des onglets du volet Informations auxiliaires en cliquant sur > Réinitialiser l'ordre des onglets.

• tabs-unique-id : entrez la même valeur unique que celle définie pour la propriété comp-unique-id afin de mapper et de réinitialiser les composants md-tabs.

L'exemple de code suivant utilise les fonctions Plus d'actions et Réinitialiser l'ordre des tabulations.

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

}

La liste déroulante Plus d'actions peut être étendue pour ajouter des composants ou des widgets personnalisés après l'option Réinitialiser l'ordre des onglets. Voici un exemple de jeu de valeurs de propriétés de style qui peuvent être appliquées à des composants supplémentaires.

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

• Configurer et accéder au widget de mesures de gestion de l'expérience client depuis la barre de navigation

• Utilisation des onglets sur la page personnalisée

• Volet d'informations auxiliaires par défaut avec historique des contacts et écran contextuel

• Volet d'information auxiliaire avec widget Customer Experience Journey

Configurer et accéder au widget de mesures de gestion de l'expérience client depuis la barre de navigation

Exemple :

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

Utilisation des onglets sur la page personnalisée

Exemple :

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

Volet d'informations auxiliaires par défaut avec historique des contacts et écran contextuel

Exemple :

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

Volet d'information auxiliaire avec widget Customer Experience Journey

Exemple :

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