- 主页
- /
- 文章
感谢您的反馈。
创建自定义桌面布局
在此文章中
反馈？本文通过编辑 JSON 文件来帮助创建自定义布局，并提供示例用例来帮助您开始使用客户体验管理指标小组件和客户体验之旅小组件等小组件。 要有效地使用自定义桌面布局，您应该对 HTML 结构、浏览器中的文档树模型和 JSON 格式有深入的了解。
概述
桌面布局功能允许您根据业务需求配置 Webex Contact Center 桌面。 您可以自定义徽标、标题和 Widget 等元素。 您可以创建桌面布局并将其分配给团队。 此布局可为作为该团队成员登录的所有代理生成桌面上的代理体验。
有两种类型的布局：
-
全局布局：此布局是系统生成的布局，默认情况下会在创建团队时分配。 有关详细信息，请参阅 管理团队。 创建团队时，“全局布局”会自动设置为团队的桌面布局。 您无法删除该布局。
-
自定义布局：提供自定义桌面体验的布局。 您可以为一个或多个团队创建自定义布局。
如果您在代理登录时分配了新的桌面布局，则代理必须重新加载页面才能看到新布局。
Webex Contact Center 桌面支持三种角色：
-
座席
-
主管
-
主管和代理
JSON 布局文件为每个角色提供了单独的部分。 管理员应在 JSON 布局文件的相应部分中配置每个角色的设置。 有关示例 JSON 布局文件的详细信息，请参阅 JSON 布局顶级属性。
当 Cisco 向桌面布局添加新功能时，未修改的布局会自动更新为新功能。 更新后的桌面布局将自动有空给使用未修改桌面布局的现有团队。 使用未修改桌面布局的桌面用户在登录或重新加载浏览器时会收到新的基于布局的功能。
如果您使用的是未作任何修改的默认 桌面 Layout.json 文件，则将其视为未修改的布局。 但是，如果您下载 缺省桌面 Layout.json 文件并再次上传，即使文件内容或文件名未被修改，该文件也被视为已修改的布局。
对于使用自定义桌面布局的团队，管理员必须定期更新布局定义以合并新功能。 当管理员查看未修改的布局或使用未修改布局的团队时，将显示一条消息，指示将自动应用新的桌面功能。
在桌面中，有两种类型的 widget - 基于 iframe 的和基于 Web 组件的。 页眉、导航（自定义页面）、持久区域、无头区域和辅助面板是桌面中的可自定义区域。 这些不是小部件。
以下列表详细说明了您可以配置的空间。 下图说明了桌面的布局：
-
标题和徽标区域：此空间在屏幕的左上角显示 Webex Contact Center 徽标和名称（默认）。
-
水平标题 区域：此空间有一个可配置的区域，其中填充了自定义小部件。 例如，这些 Widget 可以显示内联信息和下拉菜单。 由于此标题的高度仅为 64 像素，因此构件的高度不能超过标题高度。
-
工作区 ：此空间会根据导航栏上的选择或代理与客户交互时而变化。 当代理在呼叫时，此区域显示交互控制和辅助信息窗格（包括自定义小组件和持久小组件）。 当代理通过电子邮件、聊天或社交渠道进行交互时，该区域将显示工作区和辅助信息窗格（包括永久性小组件区域）。
自定义页面 显示在工作区窗格的桌面界面上。 您可以通过导航栏上的图标访问自定义页面。 每个自定义页面可以包含一个或多个自定义小组件。
自定义小组件 是在 JSON 布局中配置的第三方应用程序。 您可以将自定义 Widget 放置在自定义页面、自定义 Tab（辅助信息窗格）或桌面的水平标题上。
-
导航栏 区域：使用此空间添加导航项以访问自定义页面。
JSON 布局顶级属性
角色
默认 JSON 布局具有以下三个角色。
-
代理 - 设置当代理登录到 Webex Contact Center 桌面以处理代理活动时显示的桌面布局。
-
主管 - 设置主管登录 Webex Contact Center 桌面时显示的桌面布局，以仅处理主管功能。
当主管登录到桌面时，将应用为主团队指定的桌面布局。 如果未提供主团队，则应用全局布局。 默认情况下，APS 报告处于禁用状态。
-
supervisorAgent - 设置主管登录 Webex Contact Center 桌面以处理主管功能和代理活动时显示的桌面布局。
您可以在相关 JSON 布局文件的相应角色中添加或修改每个角色的小组件。
以下是基于角色的 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，“maxumNotificationCount”：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，“maximumNotificationCount”：3，“browserNotificationTimer”：8，“wxmConfigured”：false，“desktopChatApp”：{“webexConfigured”：false，}“headerActions”：[“outdial”，“notification”]，“area”：{“advancedHeader”：{ ... }，“面板”：{ ... }，“导航”：{ ... }，“持久”：{ ... }，“无头”：{ ... } }, } },- 对 JSON 布局属性所做的更改将在刷新桌面浏览器时生效。
- 如果在 JSON 布局上启用的功能在桌面上未有空，请联系 Cisco 支持以启用该功能。
- JSON 布局中的所有属性都区分大小写。
应用标题
在桌面的水平标题上指定标题。 缺省标题为 Webex Contact Center。
示例：
“appTitle”：“Webex Contact Center”默认应用标题从联系人中心桌面 更改为 Webex Contact Center。 使用旧的默认 appTitle（联系人中心桌面）的现有自定义布局没有影响。 要使用新的 appTitle，必须修改自定义布局。 但是，新的全局布局使用默认的 appTitle 作为 Webex Contact Center。
标题可以是文本、图像或空字符串。 标题文本分两行显示。 如果文本超出第二行，则会显示省略号图标，并且工具提示将显示完整的标题。 样式不能应用于字幕。
您可以使用数据 URI（统一资源标识符）或在内容分发网络（CDN）、Amazon Web Services（AWS）简单存储服务（S3）存储桶或类似的托管服务上托管自定义标题图像，然后指定托管映像的 URL。 支持的标题图像格式为 PNG、JPG、JPEG、GIF、SVG 和 WebP。 支持的标题图像大小为 184 x 32 像素（宽 x 高）。
logo
指定公司徽标的 URL。 如果不提供 URL，则缺省情况下将显示 Webex Contact Center 徽标。
示例：
“徽标”：“https://my-cdn.com/logo.png”您可以在 CDN、Amazon Web Services（AWS）Simple Storage Service（S3）存储桶或类似的托管服务上托管自定义徽标图像，然后指定托管图像的 URL。 支持的徽标图像格式为 PNG、JPG、JPEG、GIF、SVG 和 WebP。 支持的徽标图像大小为 96 x 32 像素（宽 x 高）。
| 条件 | 示例 | 应用标题 | 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 时的行为。
- 该设置适用于在桌面上执行的所有任务（如接受任务、会议、咨询或转接），以及外拨呼叫、出站营销活动呼叫、自动话后总结等。
- 如果桌面用户位于 Home 页面上，且“任务列表”窗格中没有活动任务，则该设置不适用。 在这种情况下，当接受新任务时，焦点将从 Home 页面转移到新接受的任务。
拖放启用
要启用自定义页面上小组件的拖放和大小调整，请将值设置为 true。 缺省值为 false。
示例：
“dragDropEnabled”：假有关为“辅助信息”窗格中的选项卡启用拖放功能的更多信息，请参阅 “辅助信息”窗格。
通知计时器
设置桌面上的桌面通知自动关闭的持续时间（秒）。 通知显示在桌面的右上角。 默认超时值为 8 秒。 超时值的有效范围是 1-10 秒。 要使超时更改生效，必须在进行更改后刷新浏览器。
示例：
“通知计时器”：8最大通知计数
设置一次在桌面上显示的桌面通知数量。 默认值为 3。桌面通知的范围是 1 到 10。 桌面通知堆叠在一起。 如果通知很多，它们会稍有延迟，具体取决于 notificationTimer 设置。
示例：
“maxumNotificationCount”：3浏览器通知计时器
设置桌面上的浏览器烤面包机通知自动关闭的持续时间（秒）。 Toaster 是一种本机浏览器通知，仅当桌面不是活动浏览器窗口或 Tab 时才会出现。 桌面浏览器窗口或 Tab 在以下情况下处于非活动状态
-
您正在使用其他浏览器窗口或选项卡。
-
您正在处理其他应用程序。
-
您已最小化桌面浏览器窗口。
通知显示在桌面的右上角。 默认超时值为 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 用户。
- 主管和 SME 必须在其系统（个人设备）上下载 Webex 客户端或使用 Webex Web 版应用程序（ 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。Webex 仅当您为代理、主管和主管代理角色设置 WebexConfigured
属性值为 true时，才会为这些角色有空应用程序。 代理、主管或主管代理无法注销 Webex 应用程序。要显示
（Webex）图标，在 headerActions 属性中输入值Webex。 有关更多信息，请参阅 标头作。要为特定团队启用 Webex 应用程序，请选择 webexConfigured
属性值设置为true的自定义布局。 有关详细信息，请参阅 创建团队。
您还可以在辅助信息窗格、自定义页面和自定义小组件中配置 Webex 应用程序。 有关详细信息，请参阅 辅助信息窗格。
Webex 应用通知
使用通知计时器的通知 计时器和 浏览器通知计时器 属性指定的 值适用于 Webex 应用程序。 这些属性的默认超时值为 8 秒。 有关更多信息，请参阅 notificationTimer 和 browserNotificationTimer。
标头作
更改桌面水平标题上的图标顺序。 默认顺序如下：
-
（Webex）
-
（外拨呼叫） -
（通知中心）
按如下所示设置 headerActions 属性的值 ：
|
图标名称 |
headerActions 属性值 |
|---|---|
|
Webex 应用 |
webex |
|
外拨呼叫 |
外拨 |
|
通知中心 |
通知 |
示例：
“headerActions”：[“Webex”，“outdial”，“notification”]，
属性 值区分 大小写。
要更改图标的默认顺序，请在自定义布局中输入 headerActions 属性和相应的值。
示例：
“headerActions”：[“notification”，“outdial”，“Webex”]，
- 如果未在自定义布局中输入
headerActions属性和值，图标将按缺省顺序显示。 - 要从桌面删除标题图标和相关功能，请为 headerActions
属性（“headerActions”：[]）设置一个空值。 但是，如果您已将 Webex 应用程序添加到“辅助信息”窗格或自定义页面，或作为自定义 Widget 添加，即使桌面的水平标题中未有空 Webex 应用程序，代理仍可以访问 Webex 应用程序。 -
如果 webexConfigured属性值设置为false， 则 Webex 应用程序 图标不会显示在桌面的水平标题上，即使 Webex值已添加到 headerActions属性中也是如此。 有关更多信息，请参阅 webex 已配置。
面积
区域 属性是桌面布局的核心部分。 您可以根据区域定义布局。
“区域”：{“标题”：{ ... }，“advancedHeader：{ {”comp“：”widget-1“，”attributes“：{ ... }，“脚本”：.... } }，“面板”：{ ... }，“导航”：{ ... }，“持久”：{ ... }，“无头”：{ ... } },您可以配置以下 区域 对象：
-
面板：代表“辅助信息”窗格中的第二个面板或最右侧的面板。
-
导航：表示自定义页面及其与页面相关的导航元素。
-
持久：表示持久且显示在桌面的所有页面上的页面级小组件。
-
无头：表示没有可视界面但在后台执行逻辑的小组件。
如果配置了 advancedHeader 属性，则必须删除标头和标头作属性。
高级标题
自定义桌面水平标题上的可见性并更改图标的顺序。 默认顺序如下：
-
（Webex）
-
（外拨呼叫）
-
（通知中心）
-
（代理状态选择器）
按如下所示设置 advancedHeader 属性的值 ：
|
图标名称 |
headerActions 属性值 |
|---|---|
|
Webex 应用 |
agentx-webex |
|
外拨呼叫 |
Agentx 外拨 |
|
通知中心 |
代理 X 通知 |
|
代理状态选择器 |
agentx-state-selector |
示例：
“advancedHeader”：[ {“comp”：“agentx-webex”}，{“comp”：“agentx-outdial”}，{“comp”：“agentx-notification”}，{“comp”：“agentx-state-selector”} {“comp”：“widget-1”，“attributes”：{ ... }，“脚本”：.... } ]属性 值区分 大小写。
要更改图标的默认顺序，请在自定义布局中输入 advancedHeader 属性和相应的值。
小组件从左到右流入下拉菜单。
-
如果未在自定义布局中输入
advancedHeader属性，则会显示缺省标题。 -
启用高级标题后，应按照示例将小部件从现有标题移动到高级标题。
-
启用高级标头后，将不会显示旧标头。
-
每个小部件图标都有一个默认的填充和边距，该填充和边距是通过 CSS 定义的，无法通过桌面进行自定义。
-
徽标、标题和档案图标的位置是固定的，无法自定义。
-
要从桌面删除标题图标和相关功能，请在 advancedHeader
属性（“advancedHeader”：[]）中为关联的组件设置一个空值。如果您已将 Webex 应用程序添加到“辅助信息”窗格或自定义页面，或作为自定义 Widget，即使桌面的水平标题中未有空 Webex 应用程序，代理仍可以访问 Webex 应用程序。
-
如果添加带有长标签的 Widget，则根据有空空格显示截断的标签名称。
您可以使用属性
textContent向微件添加标签。示例：
{“comp”：“timer-widget”，“attributes”：{“duration”：“08：00：00”}，“textContent”：“Current Shift 的倒计时计时器”，“script”：“https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js”}标签“当前班次倒数计时器”将根据空格有空进行截断和显示。
-
避免添加带有长标签的小部件。
-
当小组件流向下拉列表时，只有小组件图标是可点击的。
-
-
如果 webexConfigured属性值设置为false， 则 Webex 应用程序 图标不会显示在桌面的水平标题上，即使 advancedHeader属性中添加了 Webex值也是如此。 有关更多信息，请参阅 webex 已配置。
Home 页面
当您登录到桌面时，您将登录到 Home 页面。
Home 页面仅适用于主管和主管代理角色。
您可以在 Home 页面上查看以下 Widget。 缺省情况下会提供分析器小组件，但管理员也可以配置持久小组件和自定义小组件。 有关更多信息，请参阅 JSON 布局顶级属性。
分析器小组件
缺省情况下，分析器小组件显示在桌面 Home 页面上。
Home 页面布局配置
您可以将桌面的 Home 页面配置为显示基于组织首选项和品牌一致性的布局。 编辑主页 字段以配置 Home 页面。 您可以将以下组件配置为在用户登录桌面时显示在 Home 页面中：
-
欢迎消息
-
导航栏上的“ 任务 ”图标，用于导航至“任务”窗格。 在启用呼叫监控功能的情况下，将显示主管和主管和代理角色的任务图标。 任务窗格显示传入的客户请求、活动和过去的客户交互以及活动的监视请求。
-
筛选“队列名称”、“ 频道类型 ”和“托管团队” 等部分。
下表描述了 配置 Home 页面所需的页面 属性：
|
财产 |
描述和代码 |
|---|---|
|
页面>使用 FlexLayout |
Flex 布局是一个新的 Web 组件。 它不会更改现有的小部件。 新的 flex 布局以简化的方式使用相同的布局配置格式。 它向后兼容，不会影响现有的小部件。 您需要配置 JSON 布局。 要配置 JSON 布局，请提供微件的高度和宽度。 小组件的呈现顺序与其在 JSON 布局中配置的顺序相同。 小部件的默认边距为 8 px。 JSON 布局基于微件的尺寸（宽 x 高）和坐标（X、Y 和 Z）。 灵活的布局支持单个小组件大小调整大小、最大化小组件等功能。 各个微件的高度以像素为单位。 1 个高度单位 = 40 像素。 构件的宽度取决于容器中的列数以及根据容器宽度而变化的列数。 Widget 从左到右显示。 高级布局引擎使用自定义逻辑来应用微件的水平和垂直空间调整。 最初，布局水平加载。 水平加载后，小部件垂直加载并确保空间利用率最佳。 根据屏幕尺寸配置微件。 您可以根据屏幕大小增加或减少 Widget 的宽度。 这使小部件更具可读性和可用性。 Flex 布局提供标准断点，例如大、中、小和超小。
这些像素可能因作系统和浏览器而异。 |
|
页面>比较 |
确保提供唯一的自定义组件。 |
|
页>页眉 |
确保指定可以是静态、动态或两者的标题字符串。
|
|
页面 > 页面副标题 |
确保添加显示在桌面上的子标题。 用户可以 在子标题中添加“转到分析器 ”。
|
导航（自定义页面）
在此部分中，您可以添加显示在左侧导航栏上的页面。 您可以指定要在导航栏上显示的小组件的导航图标和唯一 URL。 我们建议为 URL 使用特定的前缀以避免冲突。 有关更多详细信息，请参阅 nav 属性 部分。
您还可以拥有可在此页面上显示的 Widget 集合。 页面可以具有显示在屏幕上的单个小组件，也可以是网格中的小组件集合。 有关网格排列的更多详细信息，请参阅 布局属性 部分。
您不需要向小部件树添加动态区域包装器。 这意味着当您启用此选项时，您可以在自定义页面上拖放小部件并调整其大小。
示例：
{“nav”：{“label”：“Custom Page”，“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”：“Stock Market”，“响应式”：“false”“attributes”：{“slot”：“Tab”}，}，{“comp”：“md-tab-panel”，“attributes”：{“slot”：“panel”}，“children”：[{“comp”：“agentx-wc-iframe”，“response”：“false”“attributes”：{“src”：“https://widget-kad.s3.amazonaws.com/Trading.htm”}，“wrapper”：{“title”：“Stock Market”，“maximizeAreaName”：“app-maximize-area”} }]，}，{“comp”：“md-tab”，“textContent”：“Widget3”，“attributes”：{“slot”：“Tab”} }，{“comp”：“md-tab-panel”，“textContent”：“Three Content”，“attributes”：{“slot”：“panel”} } ] }，“comp2”：{“comp”：“my - google - maps - component”，“source”：“https://my-cdn.com/my-google.maps.js”wrapper“：{”title“：”Google Map“，”maximizeAreaName“：”app-maximize-area“} }，”layout“：{”areas“：[ [”left“，”right“] ]，”size“：{”cols“：[1，1]，”rows“：[1] } } }，下表描述了 导航 和 页面 属性及其子属性：
|
财产 |
描述和代码 |
|---|---|
|
导航 > 标签 |
此属性指示页面导航标识符。 屏幕阅读器会读取此属性，它将显示在工具提示中。 这些参数是在导航栏上显示自定义页面所必需的。 |
|
导航 > 图标类型 |
此属性表示在自定义页面的导航栏中显示的图标的类型。 有空以下类型的图标：
|
|
导航 > 图标 |
此属性表示动量库或 CDN URL 中的图标名称。 |
|
导航 > 对齐 |
此属性可帮助您将图标与导航栏的顶部或底部对齐。 目前，该属性仅允许顶部对齐。 |
|
nav > isDefaultLandingPage | 此属性指定 Agent Desktop 中代理的默认目标页面。 将此属性设置为 true 可使导航栏页面成为代理在登录到 Agent Desktop 后向代理显示的缺省登录页面。 如果多个导航栏页面将此属性设置为 true，则系统会将第一个导航栏页面视为默认的 Landing 页面。 如果没有导航栏页面将此属性设置为 true，则 Home 页面将充当默认的 Landing 页面。 您不能将“代理绩效统计信息”报告设置为默认登录页面。 |
|
nav > navigateTo |
此属性指定自定义页面的名称。 代理导航时，此名称将显示在地址栏中。 navigateTo 不能包含以下值：图像、字体、css、build_info、帮助、应用程序、i18n、图标、图像 -mfe-wc 和声音。 |
|
财产 |
描述和代码 |
|---|---|
|
页面 > 标识 |
于 该 |
|
页面 > useFlexLayout |
Flex 布局是一个新的 Web 组件。 它不会更改现有的小部件。 新的 flex 布局以简化的方式使用相同的布局配置格式。 它向后兼容，不会影响现有的小部件。 您需要配置 JSON 布局。 要配置 JSON 布局，请提供微件的高度和宽度。 小组件的呈现顺序与其在 JSON 布局中配置的顺序相同。 小部件的默认边距为 8 px。 JSON 布局基于微件的尺寸（宽 x 高）和坐标（X、Y 和 Z）。 灵活的布局支持单个小组件大小调整大小、最大化小组件等功能。 各个微件的高度以像素为单位。 1 个高度单位 = 40 像素。 构件的宽度取决于容器中的列数以及根据容器宽度而变化的列数。 Widget 从左到右显示。 高级布局引擎使用自定义逻辑来应用微件的水平和垂直空间调整。 最初，布局水平加载。 水平加载后，小部件垂直加载并确保空间利用率最佳。 根据屏幕尺寸配置微件。 您可以根据屏幕大小增加或减少 Widget 的宽度。 这使小部件更具可读性和可用性。 Flex 布局提供标准断点，例如大、中、小和超小。
这些像素可能因作系统和浏览器而异。 |
|
页面 > widget 页面 > 比较 |
帮助您定义自定义小组件。 要放置多个 Widget，请按顺序指定 Widget 选项。 确保为每个 Widget 指定唯一的区域名称。稍后在布局部分中使用它。 此属性表示自定义 HTML 元素（如果要将其用作包装器，则称为 Web 组件或任何其他元素）的名称。 有关更多信息，请参阅 示例用例示例。 在此处输入不带尖括号的自定义元素名称（“<”或“>”）。 例如，“my-custom-element”。 Widgets 部分下的每个条目都支持以下格式： |
|
页面 > 脚本 |
（可选）仅当从远程位置（如 CDN）加载小组件或组件时，才需要此属性。 不要更改同一组件的脚本 URL。 如果需要更改同一组件的脚本 URL，请执行以下作之一：
|
|
页面 > 属性 |
您可以指定必须为 Web 组件传递的属性。 |
|
页面 响应> |
确定在页面 使用以下值之一配置此属性：
无响应的 Widget 无法确保最佳用户体验，并且不会显示在较小的视图中。 代理必须增加浏览器窗口的大小，才能查看任何配置为无响应的小组件。 |
|
页面 > 属性 |
您可以在此部分中指定 Web 组件属性。 |
|
页面 > 可见性 |
指定在自定义布局 Cisco 提供的小组件包括“联系人历史记录”、“Cisco Webex Experience Management, IVR 副本”、“预览活动呼叫指南”和“屏幕弹出”。
|
|
页面 > 儿童 |
此属性是布局的核心部分。 在 要了解如何将数据作为属性传递，请参阅 将数据从桌面共享到小组件。 “子”数组部分的优点是您可以在布局规范中使用现有的 Web 组件，这已经是桌面捆绑包的一部分。 一些桌面捆绑包 Web 组件包括：
有关持久 Tab 的属性的更多信息，请参阅 持久选项卡的属性。 |
|
页面 > 文本内容 |
帮助您添加文本内容。 |
|
页面 > 样式 |
帮助您为组件分配特定的 CSS 样式。 |
|
页面 > 封装包 |
Widget 包装器允许您在 Widget 顶部添加工具栏。 工具栏可以包含标题和 确保将默认值用作“应用最大化区域”。 目前只有默认值为有空。 |
|
页面 > 包装器>标识 |
（可选）Web 组件 widget 封装器允许您使用唯一标识符更新动态 widget 标题。 输入小组件包装器 确保对 JavaScript CustomEvent 使用相同的唯一标识符。 有关详细信息，请参阅 Cisco Webex Contact Center 桌面开发人员 的“代理联系人模块” 一章 中的 异步事件部分。 要更新基于 iFrame 的 Widget 标题，请使用来自同一域的 iFrame 内容。 下面是一个示例示例： |
|
page > agentx-wc-iframe |
允许您在 iFrame 中嵌入在桌面上显示为小组件的网页。 您可以使用名为“agentx-wc-iframe”的 iFrame widget。 |
|
页面 > 布局 | 允许您在页面上排列小组件。 以下格式表示网格布局： 您可以在此处使用您在微件 部分中定义的 区域名称定义网格。 下面的示例演示如何指定三行三列的布局：  在大小部分中，数字表示 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）时，Agent Desktop 会保留 Tab 选择，即使代理在桌面的页面或 widget 之间切换也是如此。
-
持久选择属性不适用于“辅助信息”窗格和“代理性能统计”报告页面中的选项卡，因为已在桌面中设置了持久 Tab 行为。 - 当您从桌面注销、重新加载/刷新浏览器或清除浏览器缓存时，Tab 选择将重置为缺省 Tab。
持久小组件配置
您可以将任何自定义小组件配置为持久性。 永久性 Widget 显示在桌面的所有页面上。 仅当您有活动的联系人请求或对话时，永久性小组件才会在“辅助信息”窗格中显示为新的 Tab。 例如， 示例持久 小部件。
持久性小部件在 Home 页面上的显示方式与其他页面上的显示方式不同。 但是，如果您有活动的交互，则永久性小组件将作为“辅助信息”窗格的一部分显示在 Home 页面中。 例如，当您应答呼叫时，将显示“交互控制”窗格， 而“示例持久 小组件”将显示为“辅助信息”窗格的一部分。
示例：
“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 属性。
以下是自定义 Tab 标头的特定示例：
在 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“} ] }]，}，当“辅助信息”窗格包含多个选项卡时，将自动显示更多选项卡 下拉列表。
您必须添加自定义 Tab 工具提示以提高可读性和可访问性。 要为自定义 Tab 添加工具提示，请使用 md 工具提示 包装组件。 在消息属性中 输入工具提示信息，并应用 样式 属性值，如以下示例 所示。
“comp”：“md-tooltip”，“attributes”：{“class”：“widget-tabs”，“message”：“Sample Tab 1”，“style”：“最大宽度：252px;最小宽度：110px;溢出：隐藏；文本溢出：省略号；空格：无换行；显示：内联块；底部边距：-10px;“}，对于自定义 Tab，我们建议最大宽度为 252 像素，最小宽度为 110 像素。
要在自定义 Tab 中启用拖放功能，请在属性 中添加以下属性：
“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 启用拖放，代理可以将 Tab 拖放到“辅助信息”窗格中的所需位置。 若要将选项卡重置为默认的 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 Contact Center 中配置语音出站活动模式。
管理员在自定义布局中配置以下内容，以启用代理的预览活动联系人。
活动联系人
管理员将“市场活动联系人”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.envVaribles.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。
屏幕提示
在桌面布局中，您可以通过以下方式之一配置屏幕弹出：
-
作为自定义页面
-
作为自定义页面中的小组件之一
-
作为“辅助信息”窗格中的 Tab
屏幕弹出在桌面上显示基于以下因素：
对于语音频道：
-
在桌面布局中定义的配置
-
流设计器中定义的屏幕弹出活动
对于新的数字渠道：
-
在桌面布局中定义的配置
-
在 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”}如果未在流设计器中配置屏幕弹出，则自定义页面将显示空白。 有关在流设计器中配置屏幕弹出的详细信息，请参阅 屏幕弹出。
在辅助信息窗格中配置屏幕弹出
您可以将“屏幕弹出”配置为在“辅助信息”窗格中显示为 Tab。
默认情况下，如果将屏幕弹出配置为在流设计器中显示为 桌面内部 ，则屏幕弹出在辅助信息窗格的屏幕 弹出 Tab 中显示为新的子 Tab。
在 面板 部分添加以下属性，以将屏幕弹出作为 Tab 包含在“辅助信息”窗格中。 有关面板 详细信息的详细信息，请参阅 辅助信息窗格。
示例：在辅助信息窗格中以 Tab 形式弹出屏幕
{“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”} ]，}流设计器中定义的“屏幕弹出”显示选项优先于桌面布局中定义的配置。
例如，假设您已配置以下屏幕弹出设置：
- 流设计器 - 在新的浏览器中将设置显示为 Tab
- 桌面布局 - 作为“辅助信息”窗格中的 Tab
当配置屏幕弹出的事件发生时，屏幕弹出将显示在桌面外部 - 即在新的浏览器 Tab 中。
示例用例示例
从导航栏配置和访问“客户体验管理指标”小组件
示例：
{“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”，“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”：{“名称”：“SCREEN_POP”} }]，“可见性”：“SCREEN_POP”}“可见性”：“SCREEN_POP”}，}，本地化
支持的语言如下：
保加利亚语、加泰罗尼亚语、中文（中国大陆）、中文（中国台湾）、克罗地亚语、捷克语、丹麦语、荷兰语、英语（英国）、英语（美国）、芬兰语、法语、德语、匈牙利语、意大利语、日语、韩语、挪威语、波兰语、葡萄牙语（巴西）、葡萄牙语（葡萄牙）、罗马尼亚语、俄语、塞尔维亚语、斯洛伐克语、斯洛文尼亚语、西班牙语、瑞典语和土耳其语。
桌面 UI 语言基于浏览器上的语言首选项设置。 例如，假设您在 Firefox 浏览器中选择的首选语言为法语。 在 Firefox 浏览器中启动桌面时，桌面用户界面以法语显示。 但是，桌面布局中添加的水平标题、导航栏和其他组件不会根据浏览器上的语言首选项设置进行本地化。
本地化桌面组件
要本地化桌面组件，
-
使用 app.json
文件中设置的现有本地化密钥。 如果未设置本地化密钥，将使用缺省语言英语（美国）。 您可以向 Cisco Support 提交服务请求，以向 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”，} }，}，}示例：本地化“辅助信息”窗格中的 Tab 组件
“panel”：{“comp”：“md-tab”，“attributes”：{“slot”：“Tab”}，“children”：[{“comp”：“span”，“textContent”：“$I 18N.panelTwo.screenPopTitle”}] }
