- 主页
- /
- 文章
感谢您的反馈。
创建自定义桌面布局
在此文章中
反馈？本文通过编辑 JSON 文件来帮助创建自定义布局，并提供示例用例来帮助您开始使用客户体验管理指标小组件和客户体验之旅小组件等小组件。 要有效地使用自定义桌面布局，您应该对 HTML 结构、浏览器中的文档树模型和 JSON 格式有深入的了解。
概述
桌面布局功能允许您根据业务要求配置 Webex 联系人中心桌面。 您可以自定义徽标、标题和 Widget 等元素。 您可以创建桌面布局并将其分配给团队。 此布局可为作为该团队成员登录的所有代理生成桌面上的代理体验。
有两种类型的布局：
-
全局布局：此布局是系统生成的布局，默认情况下会在创建团队时分配。 有关详细信息，请参阅 管理团队。 创建团队时，“全局布局”会自动设置为团队的桌面布局。 您无法删除该布局。
-
自定义布局：提供自定义桌面体验的布局。 您可以为一个或多个团队创建自定义布局。
如果您在代理登录时分配了新的桌面布局，则代理必须重新加载页面才能看到新布局。
Webex 联系人中心桌面支持三种角色：
-
座席
-
主管
-
主管和代理
JSON 布局文件为每个角色提供了单独的部分。 管理员应在 JSON 布局文件的相应部分中配置每个角色的设置。 有关示例 JSON 布局文件的详细信息，请参阅 JSON 布局顶级属性。
当 Cisco 向桌面布局添加新功能时，未修改的布局会自动更新为新功能。 更新后的桌面布局将自动有空给使用未修改桌面布局的现有团队。 使用未修改桌面布局的桌面用户在登录或重新加载浏览器时会收到新的基于布局的功能。
如果您使用的是未作任何修改的默认 桌面 Layout.json 文件，则将其视为未修改的布局。 但是，如果您下载 缺省桌面 Layout.json 文件并再次上传，即使文件内容或文件名未被修改，该文件也被视为已修改的布局。
在桌面中，有两种类型的 widget - 基于 iframe 的和基于 Web 组件的。 页眉、导航（自定义页面）、持久区域、无头区域和辅助面板是桌面中的可自定义区域。 这些不是小部件。
以下列表详细说明了您可以配置的空间。 下图说明了桌面的布局：
-
职位和徽标区域：此空间在屏幕左上角显示 Webex 联系人中心徽标和名称（默认）。
-
水平标题 区域：此空间有一个可配置的区域，其中填充了自定义小部件。 例如，这些 Widget 可以显示内联信息和下拉菜单。 由于此标题的高度仅为 64 像素，因此构件的高度不能超过标题高度。
-
工作区 ：此空间会根据导航栏上的选择或代理与客户交互时而变化。 当代理在呼叫时，此区域显示交互控制和辅助信息窗格（包括自定义小组件和持久小组件）。 当代理通过电子邮件、聊天或社交渠道进行交互时，该区域将显示工作区和辅助信息窗格（包括永久性小组件区域）。
自定义页面 显示在工作区窗格的桌面界面上。 您可以通过导航栏上的图标访问自定义页面。 每个自定义页面可以包含一个或多个自定义小组件。
自定义小组件 是在 JSON 布局中配置的第三方应用程序。 您可以将自定义 Widget 放置在自定义页面、自定义标签页（“辅助信息”窗格）或桌面的水平标题上。
-
导航栏 区域：使用此空间添加导航项以访问自定义页面。
JSON 布局顶级属性
角色
默认 JSON 布局具有以下三个角色。
-
代理 - 设置在代理登录 Webex 联系人中心桌面以处理代理活动时显示的桌面布局。
-
主管 - 设置在主管登录 Webex 联系人中心桌面时显示的桌面布局，以仅处理主管功能。
当主管登录到桌面时，将应用为主团队指定的桌面布局。 如果未提供主团队，则应用全局布局。 默认情况下，APS 报告处于禁用状态。
-
主管代理 - 设置在主管登录 Webex 联系人中心桌面以处理主管功能和代理活动时显示的桌面布局。
您可以在相关 JSON 布局文件的相应角色中添加或修改每个角色的小组件。
以下是基于角色的 JSON 布局的顶级属性：
{“代理”：{“版本”：“0.1.0”，“appTitle”：“Webex Contact Center”，“徽标”：“”，“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”：{ ... }，“面板”：{ ... }，“导航”：{ ... }，“持久”：{ ... }，“无头”：{ ... } }，}，“主管”：{“版本”：“0.1.0”，“appTitle”：“Webex Contact Center”，“徽标”：“”，“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”：{ ... }，“面板”：{ ... }，“导航”：{ ... }，“持久”：{ ... }，“无头”：{ ... }，“主页”：{ ... } }，}“supervisorAgent”：{“version”：“0.1.0”，“appTitle”：“Webex Contact Center”，“logo”：“”，“taskPageIllustration”：“https://www.abc.com/image/logo.jpg”，“stopNavigateOnAcceptTask”：false，“dragDropEnabled”：false，“notificationTimer”：8，“maxumNotificationCount”：3，“browserNotificationTimer”：8，“wxmConfigured”：false，“desktopChatApp”：{“webexConfigured”：false，}“headerActions”：[“outdial”，“notification”]，“area”：{“advancedHeader”：{ ... }，“面板”：{ ... }，“导航”：{ ... }，“持久”：{ ... }，“无头”：{ ... } }, } },- 对 JSON 布局属性所做的更改将在刷新桌面浏览器时生效。
- 如果在 JSON 布局上启用的功能在桌面上未有空，请联系 Cisco 支持以启用该功能。
- JSON 布局中的所有属性都区分大小写。
应用标题
在桌面的水平标题上指定标题。 缺省标题为 Webex 联系人中心”。
示例：
“appTitle”：“Webex 联系人中心”默认 appTitle 从联系人中心桌面 更改为 Webex 联系人中心。 使用旧的默认 appTitle（联系人中心桌面）的现有自定义布局没有影响。 要使用新的 appTitle，必须修改自定义布局。 但是，新的全局布局使用默认的 appTitle 作为 Webex 联系人中心。
标题可以是文本、图像或空字符串。 标题文本分两行显示。 如果文本超出第二行，则会显示省略号图标，并且工具提示将显示完整的标题。 样式不能应用于字幕。
您可以使用数据 URI（统一资源标识符）或在内容分发网络（CDN）、Amazon Web Services（AWS）简单存储服务（S3）存储桶或类似的托管服务上托管自定义标题图像，然后指定托管映像的 URL。 支持的标题图像格式为 PNG、JPG、JPEG、GIF、SVG 和 WebP。 支持的标题图像大小为 184 x 32 像素（宽 x 高）。
logo
指定公司徽标的 URL。 如果您不提供 URL，则缺省情况下会显示 Webex 联系人中心徽标。
示例：
“徽标”：“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 高）。
| 条件 | 示例 | 应用标题 | logo |
|---|---|---|---|
| 如果未配置 appTitle 和徽标 |
|
无标题 | 缺省徽标 |
| 如果配置了应用标题和徽标 |
|
配置的文本 | 配置的徽标 |
| 如果配置了 appTitle 但未配置徽标 |
|
配置的文本 | 缺省徽标 |
|
如果未配置 appTitle 并且配置了徽标
|
|
无标题 | 配置的徽标 |
| 如果配置了 appTitle 并且徽标不是首选 |
|
配置的文本 | 无徽标 |
|
如果未配置 appTitle 且徽标不是首选
|
|
无标题 | 无徽标 |
| 如果将 appTitle 添加为图像并配置了徽标 |
|
配置的映像 | 配置的徽标 |
|
如果将 appTitle 添加为图像并且未配置徽标
|
|
配置的映像 | 缺省徽标 |
|
如果将 appTitle 添加为图像，并且徽标不是首选
|
|
配置的映像 | 无徽标 |
- 自定义图像大小根据纵横比进行调整。 之前配置的自定义标题文本现在可能在桌面上分两行显示。 为避免这种情况，您可以修改自定义标题文本。
- 如果未在桌面的水平标题中配置标题和徽标，则标题 Widget 会使用该空间。 必须正确配置页眉构件才能使用标题和徽标空间。
- 标题和徽标之和不能超过 304 像素（包括填充）的最大宽度。 如果徽标宽度小于 96 像素，则可将剩余宽度用于标题。
- 如果自定义图片大小高于支持的大小，则会根据水平标题中的纵横比调整图像大小。 如果自定义图像大小小于支持的大小，则实际图像大小将保留在水平标题中。
任务页面插图
根据组织首选项和品牌一致性为任务页面指定自定义插图。 当代理登录时，任务页面将配置的插图显示为背景。 缺省情况下，任务页面不显示插图。
示例：
“taskPageIllustration”：“https://www.abc.com/image/logo.jpg”，您可以使用数据 URI 或在内容分发网络（CDN）、Amazon Web Services（AWS）简单存储服务（S3）存储桶或类似的托管服务上托管自定义插图，然后指定托管插图的 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 的自定义布局。
如果未在 JSON 布局中输入 stopNavigateOnAcceptTask 属性值，桌面会将焦点转移到新接受的任务上。 该行为类似于 stopNavigateOnAcceptTask 属性值设置为 false 时 的行为。
- 该设置适用于在桌面上执行的所有任务（如接受任务、会议、咨询或转接），以及外拨呼叫、出站营销活动呼叫、自动话后总结等。
- 如果桌面用户位于主页上，而“任务列表”窗格中没有活动任务，则该设置不适用。 在这种情况下，当接受新任务时，焦点将从主页转移到新接受的任务。
拖放启用
要启用自定义页面上小组件的拖放和大小调整，请将值设置为 true。 缺省值为 false。
示例：
“dragDropEnabled”：假有关为“辅助信息”窗格中的选项卡启用拖放功能的更多信息，请参阅 “辅助信息”窗格。
通知计时器
设置桌面上的桌面通知自动关闭的持续时间（秒）。 通知显示在桌面的右上角。 默认超时值为 8 秒。 超时值的有效范围是 1-10 秒。 要使超时更改生效，必须在进行更改后刷新浏览器。
示例：
“通知计时器”：8最大通知计数
设置一次在桌面上显示的桌面通知数量。 默认值为 3。桌面通知的范围是 1 到 10。 桌面通知堆叠在一起。 如果通知很多，它们会稍有延迟，具体取决于 notificationTimer 设置。
示例：
“maxumNotificationCount”：3浏览器通知计时器
设置桌面上的浏览器烤面包机通知自动关闭的持续时间（秒）。 Toaster 是本机浏览器通知，仅当桌面不是活动的浏览器窗口或选项卡时才会显示该通知。 在以下情况下，桌面浏览器窗口或标签页处于非活动状态
-
您正在使用其他浏览器窗口或选项卡。
-
您正在处理其他应用程序。
-
您已最小化桌面浏览器窗口。
通知显示在桌面的右上角。 默认超时值为 8 秒。 超时值的建议范围是 5-15 秒。 要使超时更改生效，必须在进行更改后刷新浏览器。
示例：
“browserNotificationTimer”：8配置的浏览器通知超时时间取决于作系统和浏览器设置。 在 Windows OS、Chrome OS 和 macOS 版 Chrome 浏览器中，都会遵循超时值。 不过，其他支持的浏览器未必总是遵循配置的通知超时值。
wxm 已配置
（可选）要配置 Webex Experience Management，请将值设置为 true。 缺省值为 false。
示例：
“wxm 已配置”：true桌面聊天应用程序
配置多个 Cisco 提供的聊天应用程序，例如 Webex 应用程序。
webex 已配置
可以在桌面中配置 Webex 应用程序及其消息传递和会议功能。 此配置允许代理与其组织中的其他代理、主管和主题专家（SME）协作，而无需离开桌面。
- 站点管理员管理 Webex 会议用户，并且仅在用户拥有企业版时分配 Webex 权限。 有关详细信息，请参阅 在 Cisco Webex Control Hub 中管理 Webex Meetings 用户。
- 主管和中小企业必须在其系统（个人设备）上下载 Webex 客户端 Webex 或使用网页版应用程序（ https://web.webex.com/）访问 Webex 应用程序。 有关详细信息，请参阅 下载应用程序。
- 您可以在 Agent Desktop 内访问 Webex 应用程序，以便与组织中的其他代理、主管和主题专家（SME）协作，而无需离开 Agent Desktop。 呼叫控制功能未有空。 要接听和拨打电话，您需要外部的非嵌入式 Webex 应用程序。 有关详细信息，请参阅呼叫应用。
要在桌面中配置 Webex 应用程序：
-
在 Cisco Webex Control Hub 中，为用户添加服务时，选中 高级消息传递 复选框（传递）。 有关详细信息，请参阅 在“Cisco Webex 站点管理”中管理用户帐户。
-
在自定义桌面布局中，将 webexConfigured
属性值设置为true。示例：
“desktopChatApp”：{“webexConfigured”：true }，webexConfigured
属性的缺省值为false。仅当您为代理、主管和主管代理角色设置 WebexConfigured
属性值为 true时Webex 该应用程序才会为这些角色有空。 代理、主管或主管代理无法注销 Webex 应用程序。要显示
（Webex）图标，在 headerActions 属性中输入值webex。 有关更多信息，请参阅 标头作。要为特定团队启用 Webex 应用程序，请选择 webexConfigured
属性值设置为true的自定义布局。 有关详细信息，请参阅 创建团队。
您还可以在“辅助信息”窗格、自定义页面和自定义小组件中配置 Webex 应用程序。 有关详细信息，请参阅 辅助信息窗格。
Webex 应用程序通知
使用 通知计时器的通知计时器和 浏览器通知计时器 属性指定的值适用于 Webex 应用程序。 这些属性的默认超时值为 8 秒。 有关更多信息，请参阅 notificationTimer 和 browserNotificationTimer。
headerActions
更改桌面水平标题上图标的顺序。 默认顺序如下：
-
（Webex）
-
（外拨电话） -
（通知中心）
将 headerActions 属性的值设置如下：
|
图标名称 |
headerActions 属性值 |
|---|---|
|
Webex 应用 |
webex |
|
外拨呼叫 |
外拨 |
|
通知中心 |
通知 |
示例：
"headerActions": ["webex", "外拨", "通知"],
headerActions 属性值区分大小写。
要更改图标的默认顺序，请输入 headerActions 属性以及自定义布局中的相应值。
示例：
"headerActions": ["通知", "外拨", "webex"],
- 如果您未在自定义布局中输入
headerActions属性和值，则图标将按默认顺序显示。 - 要从桌面删除标题图标和相关功能，请将
headerActions属性设置为空值 ("headerActions": [])。 但是，如果您已将 Webex 应用程序添加到辅助信息窗格或自定义页面，或作为自定义小部件，则代理仍然可以访问 Webex 应用程序，尽管 Webex 应用程序不是桌面水平标题中的有空。 - 如果将
webexConfigured属性值设置为false，则即使在 headerActions 属性中添加了webex值，Webex App图标也不会显示在桌面的水平标题上。 欲了解更多信息，请参阅 webexConfigured。
区域
area 属性是桌面布局的核心部分。 您可以根据区域定义布局。
“区域”：{“标题”：{... },“advancedHeader：{ {“comp”：“widget-1”，“attributes”：{... }，“脚本”：.... } }，“控制板”：{ ... }，“导航”：{ ... }，“执着的”：{ ... },“无头”：{... } },您可以配置以下 区域 对象：
-
面板：表示辅助信息窗格中的第二个面板或最右边的面板。
-
导航：代表自定义页面及其与页面相关的导航元素。
-
持久：表示持久的并显示在桌面所有页面上的页面级小部件。
-
Headless：表示没有可视化界面，而是在后台执行逻辑的 widget。
如果配置了 advancedHeader 属性，则必须删除 header 和 headerActions 属性。
高级标题
自定义可见性并更改桌面水平标题上图标的顺序。 默认顺序如下：
-
（Webex）
-
（外拨电话）
-
（通知中心）
-
（代理状态选择器）
将 advancedHeader 属性的值设置如下：
|
图标名称 |
headerActions 属性值 |
|---|---|
|
Webex 应用 |
agentx-webex |
|
外拨呼叫 |
agentx- 外拨 |
|
通知中心 |
AgentX 通知 |
|
代理状态选择器 |
Agentx 状态选择器 |
示例：
“advancedHeader”：[{“comp”：“agentx-webex”}，{“comp”：“agentx-outdial”}，{“comp”：“agentx-notification”}，{“comp”：“agentx-state-selector”} {“comp”：“widget-1”，“attributes”：{... }，“脚本”：.... } ] advancedHeader 属性值区分大小写。
要更改图标的默认顺序，请输入 advancedHeader 属性以及自定义布局中的相应值。
小部件从左到右流入下拉菜单。
-
如果未在自定义布局中输入
advancedHeader属性，则会显示默认页眉。 -
当启用高级标题时，您应该按照示例将小部件从现有标题移动到高级标题。
-
当启用高级标题时，旧标题将不会显示。
-
每个小部件图标都有一个通过 CSS 定义的默认填充和边距，并且无法通过桌面进行自定义。
-
徽标、标题和个人资料图标的位置是固定的，无法自定义。
-
要从桌面删除标题图标和相关功能，请在
advancedHeader属性 ("advancedHeader": []) 中为相关组件设置一个空值。如果您已将 Webex 应用程序添加到辅助信息窗格或自定义页面，或作为自定义小部件，则代理仍然可以访问 Webex 应用程序，尽管 Webex 应用程序不是有空桌面的水平标题中。
-
如果添加带有长标签的小部件，则会根据空格有空显示截断的标签名称。
您可以使用属性
textContent向小部件添加标签。示例：
{ "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "当前班次的倒计时器", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }标签“当前班次的倒计时器”将被截断并根据空间有空显示。
-
避免添加带有长标签的小部件。
-
当小部件流到下拉菜单时，只有小部件图标可点击。
-
-
如果
webex 已配置属性值设置为错误的，这 Webex 应用程序 图标不会显示在桌面的水平标题上，即使Webex价值被添加到高级标题财产。 有关详细信息，请参阅 webex 已配置。
主页
当您登录桌面时，您将进入主页。
主页仅适用于主管和主管代理角色。
您可以在主页上查看以下小部件。 默认提供分析器小部件，但管理员也可以配置持久和自定义小部件。 有关详细信息，请参阅 JSON 布局顶级属性。
分析器小部件
默认情况下，分析器小部件显示在桌面主页上。
主页布局配置
您可以配置桌面主页以显示基于您的组织偏好和品牌一致性的布局。 编辑 主页 字段来配置主页。 您可以配置以下组件，以便在用户登录桌面时显示在主页中：
-
欢迎信息
-
这 任务 导航栏上的图标导航至任务窗格。 这 任务 对于启用了呼叫监控功能的主管和主管及代理角色，将显示图标。 任务窗格显示传入的客户请求、当前和过去的客户交互以及当前的监控请求。
-
过滤部分如 队列名称， 渠道类型，和 管理团队。
下表描述了配置主页所需的 页面 属性：
|
财产 |
描述和代码 |
|---|---|
|
页面 > useFlexLayout |
Flex 布局是一个新的 Web 组件。 它不会改变现有的小部件。 新的弹性布局以简化的方式使用相同的布局配置格式。 它向后兼容并且不会影响现有的小部件。 您需要配置 JSON 布局。 要配置 JSON 布局，请提供小部件的高度和宽度。 小部件按照 JSON 布局中配置的相同顺序呈现。 小部件的默认边距为 8 像素。 JSON 布局基于小部件的尺寸（宽度 x 高度）和坐标（X、Y 和 Z）。 灵活的布局支持单个小部件调整大小、最大化小部件等功能。 单个小部件的高度以像素为单位。 1 个高度单位 = 40 像素。 小部件的宽度取决于容器中的列数以及根据容器宽度变化的列数。 小部件从左到右显示。 先进的布局引擎使用自定义逻辑来应用小部件的水平和垂直空间调整。 最初，布局水平加载。 水平加载后，小部件垂直加载并确保空间利用率达到最佳。 根据屏幕尺寸配置小部件。 您可以根据屏幕尺寸增加或减少小部件的宽度。 这使得小部件更加可读和可用。 Flex 布局提供了大、中、小、超小等标准断点。
这些像素可能根据操作系统和浏览器的不同而变化。 |
|
页面 > 内容 |
确保您提供唯一的自定义组件。 |
|
页面 > 页眉 |
确保指定一个可以是静态的、动态的或两者兼有的标题字符串。
|
|
页面 > pageSubHeader |
确保添加在桌面上显示的子标题。 用户可以在子标题中添加 转到分析器 。
|
导航（自定义页面）
在此部分中，您可以添加出现在左侧导航栏上的页面。 您指定一个导航图标和一个唯一的 URL，以便小部件显示在导航栏上。 我们建议对 URL 使用特定的前缀以避免冲突。 有关更多详细信息，请参阅 nav 属性 部分。
您还可以拥有可在此页面上显示的一系列小部件。 该页面可以包含出现在屏幕上的单个小部件或网格中的一组小部件。 有关网格排列的更多详细信息，请参阅 布局属性 部分。
您不需要向小部件树添加动态区域包装器。 这意味着当您启用此选项时，您可以在自定义页面上拖放和调整小部件的大小。
示例：
{“nav”：{“label”：“自定义页面”，“icon”：“stored-info”，“iconType”：“momentum”，“navigateTo”：“dynamic-tabs”，“align”：“top”，“isDefaultLandingPage”：true }，“page”：{“id”：“my-custom-page”，“useFlexLayout”：true，“widgets”：{“comp1”：{“comp”：“md-tabs”，“children”：[{“comp”：“md-tab”，“textContent”：“Shift Timer”，“attributes”：{“slot”：“tab”} }，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”}，“children”：[{“comp”：“my-custom-timer”，“source”：http：//my-cdn.com/my-custom-timer.js“wrapper”：{“title”：“Shift Timer”，“maximizeAreaName”：“app-maximize-area”} }] }, { "comp": "md-tab", "textContent": "股市", "responsive": "false" "attributes": { "slot": "tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "股市", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel", "textContent": "三个内容", "attributes": {“slot”：“面板”} } ] },“comp2”：{“comp”：“我的 - 谷歌 - 地图 - 组件”，“source”：“https://my-cdn.com/my-google.maps.js“wrapper”：{“title”：“谷歌地图”，“maximizeAreaName”：“app-maximize-area”} } },“layout”：{“areas”：[ [“left”,“right”] ],“size”：{“cols”：[1, 1],“rows”：[1] } } } },下表描述了 导航 和 页 属性及其子属性：
|
财产 |
描述和代码 |
|---|---|
|
导航 > 标签 |
该属性表示页面导航标识符。 屏幕阅读器读取此属性并将其显示在工具提示中。 这些参数对于在导航栏上显示您的自定义页面是必需的。 这 |
|
导航 > 图标类型 |
此属性表示自定义页面导航栏中显示的图标类型。 以下类型的图标是有空：
|
|
导航 > 图标 |
此属性代表 Momentum 库中的图标名称或 CDN URL。 |
|
导航 > 对齐 |
此属性可帮助您将图标对齐到导航栏的顶部或底部。 目前，该属性仅允许顶部对齐。 |
|
导航 > isDefaultLandingPage | 此属性指定 Agent Desktop 中代理的默认登陆页面。 将此属性设置为 true 以使导航栏页面成为代理登录 Agent Desktop 后显示的默认登录页面。 如果多个导航栏页面将此属性设置为 true，则系统会将第一个导航栏页面视为默认登陆页面。 如果没有导航栏页面将此属性设置为 true，则主页将作为默认登录页面。 您不能将“代理绩效统计”报告设置为默认登录页面。 |
|
导航 > navigateTo |
此属性指定自定义页面的名称。 当代理导航时，此名称会出现在地址栏中。 navigateTo 不能包含以下值：images、fonts、css、build_info、help、app、i18n、icons、images-mfe-wc 和 sounds。 |
|
财产 |
描述和代码 |
|---|---|
|
页面 > id |
于 该 |
|
页面 > useFlexLayout |
Flex 布局是一个新的 Web 组件。 它不会改变现有的小部件。 新的弹性布局以简化的方式使用相同的布局配置格式。 它向后兼容并且不会影响现有的小部件。 您需要配置 JSON 布局。 要配置 JSON 布局，请提供小部件的高度和宽度。 小部件按照 JSON 布局中配置的相同顺序呈现。 小部件的默认边距为 8 像素。 JSON 布局基于小部件的尺寸（宽度 x 高度）和坐标（X、Y 和 Z）。 灵活的布局支持单个小部件调整大小、最大化小部件等功能。 单个小部件的高度以像素为单位。 1 个高度单位 = 40 像素。 小部件的宽度取决于容器中的列数以及根据容器宽度变化的列数。 小部件从左到右显示。 先进的布局引擎使用自定义逻辑来应用小部件的水平和垂直空间调整。 最初，布局水平加载。 水平加载后，小部件垂直加载并确保空间利用率达到最佳。 根据屏幕尺寸配置小部件。 您可以根据屏幕尺寸增加或减少小部件的宽度。 这使得小部件更加可读和可用。 Flex 布局提供了大、中、小、超小等标准断点。
这些像素可能根据操作系统和浏览器的不同而变化。 |
|
页面 > 小部件 页面 > comp |
帮助您定义自定义小部件。 要放置多个小部件，请按顺序指定小部件选项。 确保为每个小部件赋予唯一的区域名称。稍后在布局部分中使用它。 此属性代表自定义 HTML 元素的名称（称为 Web 组件或任何其他元素 - 如果您想将其用作包装器）。 有关详细信息，请参阅 示例用例示例。 在此处输入您的自定义元素名称，不带尖括号（“<”或“>”）。 例如，“my-custom-element”。 小部件部分下的每个条目都支持以下格式： |
|
页 > 脚本 |
（可选）仅当您从远程位置（例如 CDN）加载小部件或组件时才需要此属性。 不要更改同一组件的脚本 URL。 如果需要更改同一组件的脚本 URL，请执行以下操作之一：
|
|
页 > 特性 |
您可以指定必须为 Web 组件传递的属性。 |
|
页 > 响应式 |
确定是否在自定义布局中添加了 Web 组件或基于 iFrame 的小部件 使用下列值之一配置此属性：
无响应的小部件无法确保最佳的用户体验，并且不会显示在较小的视图中。 代理必须增加浏览器窗口的大小才能查看配置为无响应的任何小部件。 |
|
页面 > 属性 |
您可以在此部分指定 Web 组件属性。 |
|
页面 > 可见性 |
指定在 思科提供的小部件包括联系历史记录、Cisco Webex Experience Management, IVR 成绩单、预览活动呼叫指南和屏幕弹出。
|
|
页 > 儿童 |
此属性是布局的核心部分。 在 要了解如何将 STORE 值作为属性传递，请参阅 从桌面共享数据到小部件。 “子”数组部分的优点是您可以在布局规范中使用现有的 Web 组件，它已经是桌面包的一部分。 桌面捆绑包中的一些 Web 组件包括：
有关持久选项卡属性的更多信息，请参阅 持久选项卡的属性。 |
|
页面 > 文本内容 |
帮助您添加文本内容。 |
|
页面 > 样式 |
帮助您为组件分配特定的 CSS 样式。 |
|
页面 > 包装器 |
小部件包装器允许您在小部件顶部添加工具栏。 工具栏可以包含标题和 确保使用默认值“app-maximize-area”。 目前，只有默认值是有空。 |
|
页面 > 包装器> id |
（可选）Web 组件小部件包装器允许您使用唯一标识符更新动态小部件标题。 输入小部件包装器的 确保对 JavaScript CustomEvent 使用相同的唯一标识符。 有关详细信息，请参阅 异步事件 部分 代理联系模块 章节 Cisco Webex Contact Center 桌面开发人员。 要更新基于 iFrame 的小部件标题，请使用来自同一域的 iFrame 内容。 以下是一个示例： |
|
页 > agentx-wc-iframe |
允许您将网页嵌入到在桌面上显示为小部件的 iFrame 中。 您可以使用名为“agentx-wc-iframe”的 iFrame 小部件。 |
|
页 > 布局 | 允许您在页面上排列小组件。 以下格式表示网格布局： 您可以在此处使用您在微件 部分中定义的 区域名称定义网格。 下面的示例演示如何指定三行三列的布局：  在大小部分中，数字表示 Widget 相对于其他 Widget 可以占用的空间比例。 所有三列占用的空间等于 1 的分数。 以 100%作为有空宽度，每个小部件占据 33.33%的水平空间。  另一个用例示例，如果您设置为“cols”：[1，2，2]，则表示总空间除以 5（1+2+2），第一个小部件占据水平空间的 20%。 第二个和第三个小部件各占 40%。 有关详细信息，请参阅 网格布局的基本概念。  |
|
页 > 根 |
布局嵌套称为子布局。 如果布局配置中有嵌套布局，则必须将单个“ROOT”对象作为子布局的父对象。 否则，如果不需要嵌套，则布局配置可以是扁平的。 此子布局提供了对布局大小调整行为的更多控制。 页面 布局 属性的类型必须是记录<字符串、布局>。 布局属性允许您在页面上排列小组件。 此设置会在 ROOT 布局中创建一个网格，其中包含两个可以独立调整大小的子网格。  调整组件大小会影响该子布局中的组件。  请注意以下情况： 无限循环：如果将 ROOT 布局包含为 ROOT 的子布局，则会导致“超出调用堆栈”错误并运行无限循环。  相同的子布局（N）次：如果您多次使用相同的名称将子布局包含在网格中，并且如果您调整其中一个子布局的大小，则所有子布局都会自动调整大小。 如果这不是所需的行为，请使用唯一的名称重命名每个子布局。  |
（永久选项卡的属性
要将自定义页面和自定义小部件中的标签页设置为永久性标签页，请在自定义布局中输入 md 标签 页的属性 。
示例：将制表符设置为永久性
{“comp”：“md-tabs”，“attributes”：{“persist-selection”：true，“tabs-id”：“容器中所有选项卡的唯一 id”}，}|
财产 |
说明 |
|---|---|
|
保留选择 |
将 md 选项卡 |
|
标签页标识 |
容器中所有选项卡的唯一标识。 |
当您将 md-tabs 设置为 永久性（persist-selection：true）时，即使代理在桌面的页面或 widget 之间切换，Agent Desktop 也会保留选项卡选择。
-
持久选择属性不适用于“辅助信息”窗格和“代理性能统计”报告页面中的选项卡，因为已在桌面中设置了持久选项卡行为。 - 当您从桌面注销、重新加载/刷新浏览器或清除浏览器缓存时，标签页选择将重置为缺省标签页。
持久小组件配置
您可以将任何自定义小组件配置为持久性。 永久性 Widget 显示在桌面的所有页面上。 仅当您有活动的联系人请求或对话时，永久性 Widget 才会在“辅助信息”窗格中显示为新标签页。 例如， 示例持久 小部件。
永久性小部件在主页上的显示方式与其他页面上的显示方式不同。 但是，如果您有活动的交互，则永久性微件将作为辅助信息窗格的一部分显示在主页中。 例如，当您应答呼叫时，将显示“交互控制”窗格， 而“示例持久 小组件”将显示为“辅助信息”窗格的一部分。
示例：
“area”：{“persistent”：[{“comp”：“md-tab”，“attributes”：{“slot”：“tab”}，“children”：[{“comp”：“md-icon”，“attributes”：{“name”：“emoticons_16”} }，{“comp”：“span”，“textContent”：“Custom Page Widget”} ] }，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”}，“children”：[{“comp”：“dynamic-area”，“properties”：{“area”：{“id”：“dw-panel-two”，“widgets”：{“comp1”：{“comp”：“agentx-wc-iframe”，“attributes”：{“src”：“https://blog.logrocket.com/the-ultimate-guide-to-iframes/”}，“wrapper”：{“title”：“AgentX iFrame”，“maximizeAreaName”：“app-maximize-area”} }，“comp2”：{“comp”：“uuip-widget-two”，“script”：“./dynamic-widgets/widget-two.js”，“attributes”：{“title”：“WIDGET 2 content”}，“wrapper”：{“title”：“Widget 2 title”，“maximizeAreaName”：“app-maximize-area”} }，“layout”：{“areas”：[ [“comp1”，“comp2”] ]，“size”：{“cols”：[1，1]，“rows”：[1] } }] } ] }自定义 Widget 时，您可以选择以下任一选项：
-
在可嵌入 iframe 中的网页上托管应用程序。
-
构建自定义小组件。
技术小部件要求在桌面小部件开发文档中 描述。 作为布局编辑器，请确保您具有以下详细信息：
-
自定义 HTML 元素（称为 Web 组件）的名称是什么？
-
托管 JavaScript 捆绑包的内容分发网络（CDN）源的 URL 是什么？
页眉 Widget
标题用于显示内联信息、添加下拉菜单等。 由于标题容器的垂直空间有限，因此整体标题高度仅为 64 像素。 有关布局对齐的详细信息，请参阅 布局属性 部分。
示例：
“header”：{“id”：“header”，“widgets”：{“head1”：{“comp”：“header-widget-one”，“script”：“https://my-cdn.com/dynamic-widgets/header-widget-one.js”，}，“head2”：{“comp”：“header-widget-two”，“script”：“https://my-cdn.com/dynamic-widgets/header-widget-two.js”，} }，“layout”：{“areas”：[[“head1”，“head2”]]，“size”：{“cols”：[1，1]，“rows”：[1] } } }
要为标题小部件添加工具提示，请使用 md 工具提示包装 组件。 在消息 属性中 输入工具提示信息。
示例：
“header”：{“id”：“dw-header”，“widgets”：{“head1”：{“comp”：“md-tooltip”，“attributes”：{“message”：“Netlify”}，“children”：[{“comp”：“agentx-wc-iframe”，“attributes”：{“src”：“https://keen-jackson-8d352f.netlify.app”} }] }，}，}必须添加样式属性 、显示 和 高度 ，才能通过页眉中可自定义微件区域中的 iFrame 配置任何微件。 高度 属性的最佳 拟合值为 64 像素。
确保将样式属性添加到现有页眉小组件，以便它们在 iFrame 中按预期加载。
示例：
“head1”：{“comp”：“agentx-wc-iframe”，“attributes”：{“src”：“https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm”，“style”：“height：64px;display：flex;“}},我们建议您仅对标题使用包含多列的单行，因为标题高度仅为 64 像素。 有关对齐方式的详细信息，请参阅 布局属性 部分。
辅助信息窗格
桌面的“辅助信息”窗格显示包含 Cisco 提供的（缺省）小组件和自定义小组件的标签页。 以下 Cisco 提供的小组件显示在预定义的标签页中：
-
联系人历史记录
-
IVR 脚本
-
客户体验之旅
-
屏幕提示
您可以使用“辅助信息”窗格执行以下作：
-
添加标签页
-
更改 Tab 键顺序
-
删除预定义选项卡
-
将自定义选项卡标记为可拖动
-
向自定义标签页添加工具提示
-
添加“ 重置 Tab 键顺序 ”选项
示例：
“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”}，“children”：[{“comp”：“md-icon”，“attributes”：{“name”：“pop-out_16”} }，{“comp”：“span”，“textContent”：“Screen Pop”} ]，“visibility”：“SCREEN_POP”}，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”，“class”：“widget-pane”}，“children”：[{“comp”：“#SCREEN_POP”}]，}，{“comp”：“md-tab”，“attributes”：{“slot”：“tab”}，“children”：[{“comp”：“md-icon”，“attributes”：{“name”：“emoticons_16”}，{“comp”：“span”，“textContent”：“Custom widget”} ] }，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”}，“children”：[{“comp”：“dynamic-area”，“properties”：{“area”：{“id”：“dw-panel-two”，“widgets”：{“comp1”：{“comp”：“agentx-wc-iframe”，“attributes”：{“src”：“https://blog.logrocket.com/the-ultimate-guide-to-iframes/”}，“wrapper”：{“title”：“AgentX iFrame”，“maximizeAreaName”：“app-maximize-area”} }，“comp2”：{“comp”：“widget-one”，“script”：“https://my-cdn.com/dynamic-widgets/widget-one.js”，“wrapper”：{“title”：“Widget title”，“maximizeAreaName”：“app-maximize-area”} }，“layout”：{“areas”：[ [“comp1”]，[“comp2”] ]，“size”：{“cols”：[1]，“rows”：[1，1] } }] } ] }，在管理门户上启用客户体验管理指标后，您可以配置客户体验之旅 Widget。
在“辅助信息”窗格中，添加新标签页以放置自定义微件。 此处没有特殊规则，组件嵌套符合子部分 的 预期和描述。 有关详细信息，请参阅 页的 Children 属性。
以下是自定义选项卡标题的特定示例：
在 child 属性中放置图标和标签的示例
{“comp”：“md-tab”，“attributes”：{“slot”：“tab”，“class”：“widget-pane-tab”}，“children”：[{“comp”：“md-icon”，“attributes”：{“name”：“transcript_16”} }，{“comp”：“span”，“textContent”：“My Widget Tab”} ]，}，在子属性中放置图像（使用 CSS）和标签的示例
{“comp”：“md-tab”，“attributes”：{“slot”：“tab”}，“children”：[{“comp”：“span”，“attributes”：{“style”：“align-items：center;display：flex;“}，”children“：[{”comp“：”img“，”attributes“：{”src“：”http：//my-cdn.com/icon.svg“，”width“：16，”height“：16，”style“：”margin-right：0.5rem;“} }，{”comp“：”span“，”textContent“：”My Widget Tab“} ] }]，}，当“辅助信息”窗格包含多个选项卡时，将自动显示更多选项卡 下拉列表。
您必须添加自定义选项卡工具提示以提高可读性和辅助功能。 要为自定义选项卡添加工具提示，请使用 md 工具提示 包装组件。 在消息属性中 输入工具提示信息，并应用 样式 属性值，如以下示例 所示。
“comp”：“md-tooltip”，“attributes”：{“class”：“widget-tabs”，“message”：“Sample Tab 1”，“style”：“最大宽度：252px;最小宽度：110px;溢出：隐藏；文本溢出：省略号；空格：无换行；显示：内联块；底部边距：-10px;“}，对于自定义标签页，我们建议最大宽度为 252 像素，最小宽度为 110 像素。
要在自定义选项卡中启用拖放功能，请在属性 中添加以下属性：
“comp”：“md-tabs”，“attributes”：{“class”：“widget-tabs”，“draggable”：true，“comp-unique-id”：“sample-dynamic-custom-tabs”}，-
可拖动：将可拖动属性值设置为 true。 -
comp-unique-id：输入唯一值以标识组件。示例：
“comp-unique-id”：“sample-dynamic-custom-tabs”
如果为自定义标签页启用拖放，代理可以将该标签页拖放到辅助信息窗格中的所需位置。 若要将选项卡重置为默认 Tab 键顺序，请添加以下属性：
“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”：输入组件内在“更多作 ” 下拉列表中显示为“重置 Tab 键顺序 ”选项的属性 。 代理可以将“辅助信息”窗格中的标签页重置为缺省顺序，方法是单击 > 重置 Tab 键顺序。 -
tabs-unique-id：输入为comp-unique-id属性定义的相同唯一值，以映射和重置md-tabs组件。
下面的示例代码使用 “更多作” 和 “重置 Tab 顺序 ”函数。
“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”} ] }]，}
默认情况下，定义预定义选项卡的工具提示、省略号图标和 Tab 键顺序重置。
可以扩展“ 更多作 ”下拉列表，以在“ 重置 Tab 顺序 ”选项之后添加其他自定义组件或小部件。 下面是可应用于其他组件的样式 属性值示例 集。
“comp”：“md-tooltip”，“attributes”：{“class”：“widget-tabs”，“message”：“Sample Element”，“style”：“max-width：252px;最小宽度：110px;溢出：隐藏；文本溢出：省略号；空格：无换行；显示：内联块；底部边距：-10px;“}，
添加到“更多作 ” 下拉列表中的其他自定义组件或小部件不支持拖放功能。
无头小部件
在无头部分中，您可以添加隐藏且不显示在 Agent Desktop 上的小部件。 这些小组件用于在后台执行逻辑。 此部分可用于触发桌面上发生的事件并执行特定于小组件的逻辑。 例如，在 SMS 到达时打开自定义 CRM 屏幕弹出。
示例：
“headless”：{“id”：“headless”，“widgets”：{“comp1”：{“comp”：“headless-widget-one”，“script”：“https://my-cdn.com/dynamic-widgets/headless-widget-one.js”，}，“comp2”：{“comp”：“headless-widget-two”，“script”：“https://my-cdn.com/dynamic-widgets/headless-widget-two.js”，} }，“layout”：{“areas”：[[“comp1”，comp2“]]，”size“：{”cols“：[1，1]，”rows“：[1] } }
将数据从桌面共享到 Widget
要通过自定义小组件中的属性或属性接收实时数据，请在布局 JSON 配置中分配适当的 STORE 值。
此外，要通过 JavaScript SDK 订阅者访问数据，您还可以通过属性或属性传递数据。 如果组件是为响应属性或属性更改而构建的，则可以从 Agent Desktop（称为数据提供程序）获取实时数据更新。
目前，我们在密钥存储下有一个数据提供程序。 有关详细信息，请参阅 《Cisco Webex Contact Center 桌面开发人员指南 》中的数据 提供程序 - Widget 属性和属性部分。
预览活动电话
管理员创建市场活动，配置拨号模式（预览版），并将市场活动分配给团队。 如果代理是分配到活动的团队的一部分，则该代理可以进行出站预览市场活动调用。 有关详细信息，请参阅 在 Webex 联系人中心配置语音呼出活动模式。
管理员在自定义布局中配置以下内容，以启用代理的预览活动联系人。
活动联系人
管理员将“市场活动联系人”Widget 添加到自定义布局的页眉容器中。 市场活动联系人基于定义的属性显示客户的联系信息。 有关布局对齐的详细信息，请参阅 页面属性详细信息 表的 布局属性 行。
示例：
“advancedHeader”：[ {“comp”：“agentx-preview-campaign”，“properties”：{“isCampaignManagementEnabled”：“$STORE.agent.isCampaignManagementEnabled”，“agentDbId”：“$STORE.agent.acqueonAgentId”，“lcmUrl”：“$STORE.agent.lcmUrl”，“isCallInProgress”：“$STORE.agentContact.isActiveCall”，“outdialEntryPointId”：“$STORE.agent.outDialEp”，“teamId”：“$STORE.agent.getAcqueonTeamId”，“campaignManagerAdditionalInfo”：“$STORE.agent.campaignManagerAdditionalInfo”，“orgId”：“$STORE.agent.orgId“，”dialerProxyHost“：”$STORE.envVariables.serviceUrls.dialerProxyHost“，”isProgressiveCampaignEnabled“：”$STORE.app.featuresFlags.isProgressiveCampaignEnabled“} }，{”comp“：”agentx-webex“}，{”comp“：”agentx-outdial“}，{”comp“：”agentx-notification“}，{”comp“：”agentx-state-selector“} ] 呼叫指南
“ 呼叫指南 ”小组件显示在桌面上的“辅助信息”窗格中。 呼叫指南在广告系列一级显示问题和答案。 系统提示代理通读呼叫指南中的一组问题并提交答复。
示例：
“panel”：{“comp”：“md-tabs”，“attributes”：{“class”：“widget-tabs”}，“children”：[ {“comp”：“md-tab”，“attributes”：{“slot”：“tab”，“class”：“widget-pane-tab”}，“children”：[ {“comp”：“md-icon”，“attributes”：{“name”：“icon-note_16”} }，{“comp”：“span”，“textContent”：“Call Guide”} ]，“visibility”：“CALL_GUIDE”}，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”，“class”：“widget-pane”}，“children”：[ {“comp”：“acqueon-call-guide”，“script”：“http://localhost:5555//index.js”，// 在此处包含 CDN 链接”wrapper“：{”title“：”Call Guide“，”maximizeAreaName“：”app-maximize-area“}，”properties“：{”lcmKey“：”$STORE.agentContact.getCallGuideProps.LCMKey“，”agentDbId“：”$STORE.agent.acqueonAgentId“，”lcmUrl“：”$STORE.agent.lcmUrl“，”campaignManagerAdditionalInfo“：”$STORE.agent.campaignManagerAdditionalInfo“”orgId“：”$STORE.agent.orgId“，”dialerProxyHost“：”$STORE.envVaribles.serviceUrls.dialerProxyHost“，”isProgressiveCampaignEnabled“：”$STORE.app.featureFlags.isProgressiveCampaignEnabled“} } ]，”visibility“：”CALL_GUIDE“} ] }- 以下
合成属性引用已更改。属性值中的 agentx将替换为acqueon：agentx-preview-campaign更名为acqueon-preview-campaignagentx-call-guide更名为acqueon-call-guide
- 您必须在 CDN 上托管列表和市场活动管理器（LCM），然后在脚本
属性中指定 URL。
屏幕提示
在桌面布局中，您可以通过以下方式之一配置屏幕弹出：
-
作为自定义页面
-
作为自定义页面中的小组件之一
-
作为“辅助信息”窗格中的选项卡
屏幕弹出在桌面上显示基于以下因素：
对于语音频道：
-
在桌面布局中定义的配置
-
流设计器中定义的屏幕弹出活动
对于新的数字渠道：
-
在桌面布局中定义的配置
-
在 Connect Flow Builder 中定义的 Screen Pop 节点
有关配置屏幕弹出的详细信息，请参阅 屏幕弹出。
在导航栏中配置屏幕弹出
您可以将 Screen Pop 配置为自定义页面或自定义页面中的某个小组件。 要访问“屏幕弹出”自定义页面，请单击导航栏上的“屏幕弹出 ” 图标。 要访问自定义页面中的 Screen Pop Widget，请单击导航栏上的自定义图标。 有关 导航 属性的详细信息，请参阅 导航（自定义页面）。
示例：作为自定义页面弹出屏幕
{“nav”：{“label”：“Screen Pop”，“icon”：“pop-out”，“iconType”：“momentum”，“navigateTo”：“/screenpop”，“align”：“top”}，“page”：{“id”：“agentx-wc-screen-pop”，“widgets”：{“comp1”：{“comp”：“agentx-wc-screen-pop”，“properties”：{“screenPopUrl”：“$STORE.session.screenpop.screenPopSelector”} }，“layout”：{“areas”：[ [“comp1”] ]，“size”：{“cols”：[1]，“rows”：[1] } }，“visibility”：“SCREEN_POP”}示例：在自定义页面中作为小组件弹出屏幕
“comp1”：{“comp”：“agentx-wc-screen-pop”，“properties”：{“screenPopUrl”：“$STORE.session.screenpop.screenPopSelector”}如果未在流设计器中配置屏幕弹出，则自定义页面将显示空白。 有关在流设计器中配置屏幕弹出的详细信息，请参阅 屏幕弹出。
在辅助信息窗格中配置屏幕弹出
您可以将“屏幕弹出”配置为在“辅助信息”窗格中显示为标签页。
默认情况下，如果在流设计器中将屏幕弹出配置为显示为桌面内部 ，则屏幕弹出 在辅助信息窗格的屏幕弹出 选项卡中显示为新的子选项卡 。
在 面板 部分添加以下属性，以将弹出屏幕作为标签页包含在辅助信息窗格中。 有关面板 详细信息的详细信息，请参阅 辅助信息窗格。
示例：“辅助信息”窗格中的标签页形式弹出屏幕
{“comp”：“md-tab”，“attributes”：{“slot”：“tab”，“class”：“widget-pane-tab”}，“children”：[ {“comp”：“md-icon”，“attributes”：{“name”：“pop-out_16”}}，{“comp”：“span”，“textContent”：“Screen Pop”}]，“visibility”：“SCREEN_POP”}，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”，“class”：“widget-pane”}，“children”：[{“comp”：“#SCREEN_POP”} ]，}流设计器中定义的“屏幕弹出”显示选项优先于桌面布局中定义的配置。
例如，假设您已配置以下屏幕弹出设置：
- 流设计器 - 将设置显示为 新浏览器标签页
- 桌面布局 - 作为辅助信息窗格中的标签页
当为其配置屏幕弹出的事件发生时，屏幕弹出将显示在桌面外部 - 即新的浏览器选项卡中。
示例用例示例
从导航栏配置和访问“客户体验管理指标”小组件
示例：
{“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] } } }，要获取 spaceId 和 metricsId，请参阅 Webex Experience Management 文档。
使用自定义页面上的标签页
示例：
{“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”，“textTab”content“：”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”}“可见性”：“SCREEN_POP”}，}，本地化
支持的语言如下：
保加利亚语、加泰罗尼亚语、中文（中国大陆）、中文（中国台湾）、克罗地亚语、捷克语、丹麦语、荷兰语、英语（英国）、英语（美国）、芬兰语、法语、德语、匈牙利语、意大利语、日语、韩语、挪威语、波兰语、葡萄牙语（巴西）、葡萄牙语（葡萄牙）、罗马尼亚语、俄语、塞尔维亚语、斯洛伐克语、斯洛文尼亚语、西班牙语、瑞典语和土耳其语。
桌面 UI 语言基于浏览器上的语言首选项设置。 例如，假设您在 Firefox 浏览器中选择的首选语言为法语。 在 Firefox 浏览器中启动桌面时，桌面用户界面以法语显示。 但是，桌面布局中添加的水平标题、导航栏和其他组件不会根据浏览器上的语言首选项设置进行本地化。
本地化桌面组件
要本地化桌面组件，
-
使用 app.json
文件中设置的现有本地化密钥。 如果未设置本地化密钥，将使用缺省语言英语（美国）。 您可以向 Cisco 支持部门提交服务请求，以便向app.json文件添加本地化密钥。示例：本地化键
{“common”：{“buttonTitle”：“Stop Timer”} } -
在桌面布局 JSON 文件中输入以下区分大小写的属性以本地化组件：
“文本内容”：“$I 18N.<key>“，其中 <key> 是指 app.json
文件中对应的本地化密钥。
示例：本地化标题组件
“header”：{“id”：“header”，“widgets”：{“head1”：{“comp”：“md-button”，“attributes”：{“slot”：“menu-trigger”，“style”：“height：64px”}，“children”：[{“comp”：“span”，“textContent”：“$I 18N.common.buttonTitle”，} }，}，}示例：本地化辅助信息窗格中的选项卡组件
“panel”：{“comp”：“md-tab”，“attributes”：{“slot”：“tab”}，“children”：[{“comp”：“span”，“textContent”：“$I 18N.panelTwo.screenPopTitle”}] }
