- 首頁
- /
- 文章
感謝您的意見回饋。
建立自訂桌面配置
在此文章中
意見回饋？本文有助於通過編輯 JSON 檔案來創建自定義佈局，並提供範例用例來説明您開始使用客戶體驗管理指標小組件和客戶體驗旅程小組件等小組件。 為了有效地使用自定義桌面佈局，您應該對 HTML 結構、瀏覽器中的文件樹模型和 JSON 格式有深入的瞭解。
概覽
桌面配置功能可讓您根據業務需求設定 Webex Contact Center Desktop。 您可以自訂徽標、標題和小部件等元素。 您可以建立桌面配置並將其指定給團隊。 此配置會在桌面上為作為該小組一部分登入的所有代理生成代理體驗。
有兩種類型的配置：
-
全域佈局：此佈局是系統生成的佈局，預設情況下會在您創建團隊時分配。 有關詳細資訊，請參閱 管理團隊。 創建團隊時，全域佈局會自動設置為團隊的桌面佈局。 您無法刪除此佈局。
-
自訂佈局：提供自訂桌面體驗的佈局。 您可以為一個或多個團隊創建自訂佈局。
若在代理登入時指派新的桌面版面配置，則客服需重新載入頁面才可看到新的版面配置。
Webex Contact Center Desktop 支援三種角色：
-
客服
-
監督員
-
監督員與代理
JSON 佈局檔為每個角色提供單獨的部分。 管理員應在 JSON 佈局檔的相應部分中為每個角色配置設置。 有關範例 JSON 佈局檔的詳細資訊，請參閱 JSON 佈局頂級屬性。
當 Cisco 新增功能至桌面版面配置時，未修改的配置會自動更新為新功能。 更新後的桌面佈局會自動提供給使用未修改桌面佈局的現有團隊。 使用未修改的桌面佈局的桌面使用者在登入或重新載入瀏覽器時會收到新的基於佈局的功能。
若您未經任何修改而 使用預設桌面 Layout.json 檔案，則該檔案被視為未修改的配置。 但是，如果您下載 預設桌面 Layout.json 檔並重新上傳，則即使檔案內容或檔名未修改，它也會被視為修改後的佈局。
在桌面中，有兩種類型的小部件 - 基於 iframe 和基於 Web 元件。 頁眉、導航 (自定義頁面)、持久區域、無頭區域和輔助面板是桌面中的可自定義區域。 這些都不是小部件。
以下清單詳細說明瞭您可以配置的空間。 這些影像說明瞭桌面的佈局：
-
標題和徽標區域：此空間在螢幕的左上角顯示 Webex Contact Center 徽標和名稱 (預設)。
-
水平標題 區域：此空間具有填充自訂小工具的可配置區域。 例如，這些小部件可以顯示內聯資訊和下拉功能表。 由於此標題的高度僅為 64 像素，因此小組件高度不能超過標題高度。
-
工作區 區域：此空間根據導航欄上的選擇或代理與客戶交互時而變化。 代理在通話時，此區域會顯示互動控制和輔助資訊窗格 (包括自訂小工具和持續性小工具)。 當代理透過電子郵件、聊天或社交管道進行互動時，此區域會顯示工作區區域和輔助資訊窗格 (包括持續性小組件區域)。
自訂頁面 顯示在桌面介面的工作空間窗格中。 您可以透過導覽列上的圖示存取自訂頁面。 每個自訂頁面可包含一個或多個自訂小工具。
自訂小組件 是在 JSON 佈局中配置的第三方應用程式。 您可以將自訂小工具置於自訂頁面、自訂標籤 (「輔助資訊」窗格) 或桌面水平頁首上。
-
導航欄 區域：使用此空間添加導航項以訪問自定義頁面。
JSON 佈局頂級屬性
角色
預設 JSON 佈局具有以下三個角色。
-
座席 - 設定當座席登入 Webex Contact Center Desktop 以處理座席活動時所顯示的桌面版面配置。
-
監督員—設定當監督員登入 Webex Contact Center Desktop 以便只處理監督員功能時所顯示的桌面版面配置。
當監督員登入桌面時，將套用為主要小組指定的桌面配置。 如果未提供主要團隊，則應用全域佈局。 預設停用 APS 報告。
-
supervisorAgent—設定當監督員登入 Webex Contact Center Desktop 以處理監督員功能及代理活動時所顯示的桌面版面配置。
您可以在相關 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，“maximumNotificationCount”：3，“browserNotificationTimer”：8，“wxmConfigured”：false，“desktopChatApp”：{“webexConfigured”：false，}“headerActions”：[“outdial”，“notification”]，“area”：{“advancedHeader”：{ ... }，“panel”：{ ... }，“導航”：{ ... }，“持久”：{ ... }，“無頭”：{ ... } }，}，“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”：{ ... }，“導航”：{ ... }，“持久”：{ ... }，“無頭”：{ ... }，“主頁”：{ ... } }，}“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”：{ ... }，“導航”：{ ... }，“持久”：{ ... }，“無頭”：{ ... } }, } },- 對 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 高)。
標誌
指定公司標誌的 URL。 如果您不提供 URL，則預設顯示 Webex 聯絡中心徽標。
範例:
“logo”：“https://my-cdn.com/logo.png”您可以在 CDN、Amazon Web Services (AWS) 簡單儲存服務 (S3) 儲存桶或類似的託管服務上託管自訂標誌影像，然後指定託管圖片的 URL。 支援的標誌圖像格式為 PNG、JPG、JPEG、GIF、SVG 和 WebP。 支援的標誌圖像尺寸為 96 x 32 像素 (寬 x 高)。
| 狀況 | 範例 | 應用程式標題 | 標誌 |
|---|---|---|---|
| 如果沒有設定 appTitle 和 logo |
|
無標題 | 預設標誌 |
| 如果配置了 appTitle 和 logo |
|
配置文字 | 配置徽標 |
| 如果配置了 appTitle，沒有設定 logo |
|
配置文字 | 預設標誌 |
|
如果未配置 appTitle，且配置了 logo
|
|
無標題 | 配置徽標 |
| 如果已設定 appTitle 且不首選 logo |
|
配置文字 | 無標誌 |
|
如果未配置 appTitle 且不偏好 logo
|
|
無標題 | 無標誌 |
| 如果將 appTitle 新增為圖像並且配置了徽標 |
|
配置影像 | 配置徽標 |
|
如果將 appTitle 新增為圖像且未配置徽標
|
|
配置影像 | 預設標誌 |
|
如果將 appTitle 新增為映像且不建議使用 logo
|
|
配置影像 | 無標誌 |
- 自訂影像尺寸根據縱橫比進行調整。 先前配置的自訂標題文字現在可能會在桌面上出現在兩行中。 為了避免這種情況，您可以修改自訂標題文字。
- 如果桌面的水平標題中未配置標題和徽標，則標題小工具將使用該空間。 必須正確配置標題小工具才能使用標題和徽標空間。
- 標題和徽標的最大寬度不得超過 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”：假如果值設定為 真的，當使用者在桌面上接受新任務時，焦點仍保留在前一個任務上，而不會轉移到新接受的任務。 此設定可防止使用者在接受新請求時遺失任何資料。
例如，假設代理 1 正在與客戶 1 聊天，同時與客戶 2 進行語音通話。在語音通話期間，代理程式 1 正在互動控制窗格中更新客戶 2 的詳細資訊。 目前，代理程式 1 在任務清單窗格中有兩個活動任務，並且焦點位於互動控制窗格上。 當代理 1 接受來自客戶 3 的新聊天請求時，焦點仍然在與客戶 2 的互動控制面板上，而不會轉移到新接受的聊天請求。
為了將焦點保留在上一個任務上，而不是轉移到新接受的任務，請選擇帶有 停止導航接受任務 屬性值設定為 真的。
如果未在 JSON 佈局中輸入 stopNavigateOnAcceptTask 屬性值，則桌面會將焦點轉移到新接受的任務。 此行為與 stopNavigateOnAcceptTask 屬性值設定為 false 時的行為類似。
- 此設定適用於在桌面上執行的所有任務 (語音和數位頻道)，例如接受任務、會議、諮詢或轉接，以及外撥電話、外撥活動呼叫、自動結束等。
- 如果桌面使用者位於首頁，且任務清單窗格中沒有活動任務，則該設定不適用。 在這種情況下，當接受新任務時，焦點將從主頁轉移到新接受的任務。
拖放已啟用
若要在自訂頁面上啟用小工具的拖曳和調整大小，請將值設為 true。 預設值為 false。
範例:
“dragDropEnabled”：false有關為輔助資訊窗格中的選項卡啟用拖放功能的更多信息，請參閱 輔助資訊窗格。
通知定時器
設定桌面上的桌面通知自動關閉的持續時間 (以秒為單位)。 通知出現在桌面的右上角。 預設超時值為 8 秒。 超時值的有效範圍是 1-10 秒。 為了使逾時變更生效，必須在變更後刷新瀏覽器。
範例:
「通知計時器」：8最大通知數量
設定桌面上一次顯示的桌面通知數量。 預設值為 3。桌面通知的範圍是 1-10。 桌面通知堆積如山。 如果通知較多，則通知會依據 notificationTimer 設定稍微延遲顯示。
範例:
「最大通知數量」：3瀏覽器通知定時器
設定桌面上的瀏覽器通知自動關閉的持續時間 (以秒為單位)。 Toaster 是一種本機瀏覽器通知，只有在桌面不是活動瀏覽器視窗或標籤時才會出現。 桌面瀏覽器視窗或標籤在下列情況下為非活動狀態：
-
您正在其他瀏覽器視窗或標籤上工作。
-
您正在處理其他應用程式。
-
您已最小化桌面瀏覽器視窗。
通知出現在桌面的右上角。 預設超時值為 8 秒。 建議的超時值範圍為 5-15 秒。 為了使逾時變更生效，必須在變更後刷新瀏覽器。
範例:
「瀏覽器通知計時器」：8瀏覽器通知的配置逾時取決於作業系統和瀏覽器設定。 Chrome 瀏覽器在 Windows 作業系統、Chrome 作業系統和 macOS 上均遵守逾時值。 但是，其他受支援的瀏覽器並不一致地遵守配置的通知逾時值。
wxmConfigured
（可選）要配置 Webex，請將值設為 true。 預設值為 false。
範例:
"wxmConfigured": true桌面聊天應用程式
配置多個思科提供的聊天應用程序，例如 Webex 應用程式。
webex 已配置
Webex 應用程式及其訊息傳遞和會議功能可以在桌面內配置。 此配置允許代理商與其組織內的其他代理商、主管和主題專家 (SME) 進行協作，而無需離開桌面。
- 網站管理員管理 Webex 會議用戶，並且僅當用戶擁有 Webex 企業版時才分配權限。 欲了解更多信息，請參閱 在 Cisco Webex Control Hub 中管理 Webex Meetings 用戶。
- 主管人員和 SME 必須在其係統 (個人裝置) 上下載 Webex 用戶端或使用 Webex Web 應用程式 ( https://web.webex.com/) 存取 #dnstafjgbezjez 應用程式。 欲了解更多信息，請參閱 下載應用程式。
- 您可以在 Agent Desktop 中訪問 Webex 應用程序，以便與您組織的其他代理、主管和主題專家 (SME) 合作，而無需離開 Agent Desktop。 呼叫控制功能不可用。 要接聽和撥打電話，您需要外部、非嵌入式的 Webex 應用程式。 如需了解更多信息，請參閱 調用應用程式。
要在桌面內配置 Webex 應用程式：
-
在 Cisco Webex Control Hub 中，為使用者新增服務時，選取 進階訊息傳遞 複選框 ()。 有關詳細信息，請參閱 Cisco Webex 網站管理中的「管理使用者帳戶」。
-
在自訂桌面佈局中，將
webexConfigured屬性值設為true。範例:
「desktopChatApp」：{「webexConfigured」：true}，的預設值
webex 已配置財產是錯誤的。Webex 僅當您設定了
webex 已配置財產價值真的對於每個角色 代理、主管或主管代理無法退出 Webex 應用程式。要顯示
( Webex) 圖標，輸入值 Webex在headerActions財產。 有關詳細信息，請參閱 headerActions。若要為特定團隊啟用 Webex 應用程序，請選擇帶有
webex 已配置屬性值設定為真的。 有關詳細信息，請參閱 創建團隊。
您也可以在輔助資訊窗格、自訂頁面和自訂小工具中設定 Webex 應用程式。 有關詳細信息，請參閱 輔助資訊窗格。
Webex 應用程式通知
使用通知計時器的 notificationTimer 和 browserNotificationTimer 屬性指定的值適用於 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”，“widget-1”，“... }，“腳本”：.... } ] advancedHeader 屬性值區分大小寫。
若要變更圖示的預設順序，請輸入 advancedHeader 屬性以及自訂佈局中的對應值。
小部件從左到右流入下拉式選單。
-
如果未在自訂版面中輸入
advancedHeader屬性，則會顯示預設標題。 -
啟用進階標題時，您應該按照範例將小工具從現有標題移至進階標題。
-
啟用進階標題時，舊標題將不會顯示。
-
每個小部件圖示都有一個透過 CSS 定義的預設填充和邊距，並且無法透過桌面進行自訂。
-
徽標、標題和個人資料圖示的位置是固定的，無法自訂。
-
若要從桌面移除標題圖示和相關功能，請在
advancedHeader屬性 ("advancedHeader": []) 中為關聯元件設定空值。如果您已將 Webex 應用程式新增至輔助資訊窗格或自訂頁面，或作為自訂小工具，則代理程式仍然可以存取 Webex 應用程序，儘管 Webex 應用程式在桌面的水平標題中不可用。
-
如果您新增帶有長標籤的小部件，則會根據可用空間顯示截斷的標籤名稱。
您可以使用屬性
文字內容為小部件新增標籤。範例:
{ "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 佈局頂級屬性。
分析器小工具
預設情況下，分析器小工具顯示在桌面主頁上。
主頁佈局配置
您可以配置桌面主頁以顯示基於您的組織偏好和品牌一致性的佈局。 編輯 首頁 欄位來配置主頁。 您可以配置以下元件，以便在使用者登入桌面時顯示在主頁中：
-
歡迎訊息
-
這 任務 導覽列上的圖示導覽至任務窗格。 為主管和主管 & 顯示 任務 圖示啟用了呼叫監控功能的代理角色。 任務窗格顯示傳入的客戶請求、目前和過去的客戶互動以及目前的監控請求。
-
過濾部分，例如 佇列名稱、 頻道類型和 管理團隊。
下表介紹了配置主頁所需的 頁面 屬性：
|
財產 |
描述和代碼 |
|---|---|
|
頁面 >使用 FlexLayout |
Flex 佈局是一個新的 Web 元件。 它不會改變現有的小部件。 新的彈性佈局以簡化的方式使用相同的佈局配置格式。 它向後相容並且不會影響現有的小部件。 您需要設定 JSON 佈局。 若要設定 JSON 佈局，請提供小工具的高度和寬度。 小部件按照 JSON 佈局中配置的相同順序呈現。 小部件的預設邊距為 8 像素。 JSON 佈局基於小部件的尺寸 (寬度 x 高度) 和座標 (X、Y 和 Z)。 靈活的佈局支援單一小部件調整大小、最大化小部件等功能。 單一小部件的高度以像素為單位。 1 個高度單位 = 40 像素。 小部件的寬度取決於容器中的列數以及根據容器寬度變化的列數。 小部件從左到右顯示。 先進的佈局引擎使用自訂邏輯來應用小部件的水平和垂直空間調整。 最初，佈局水平載入。 水平加載後，小部件垂直加載並確保空間利用率達到最佳。 根據螢幕尺寸配置小工具。 您可以根據螢幕尺寸增加或減少小部件的寬度。 這使得小部件更加可讀和可用。 Flex 佈局提供了大、中、小、超小等標準斷點。
這些像素可能會根據作業系統和瀏覽器的不同而變化。 |
|
頁面 >公司 |
確保您提供唯一的自訂元件。 |
|
頁面 >頁眉 |
確保指定一個可以是靜態的、動態的或兩者兼有的標題字串。
|
|
頁面 >頁面子標題 |
確保添加在桌面上顯示的子標題。 使用者可以在子標題中新增 前往分析器 。
|
導航 (自訂頁面)
在此部分中，您可以新增出現在左側導覽列上的頁面。 您指定一個導覽圖示和一個唯一的 URL，以便小工具顯示在導覽列上。 我們建議對 URL 使用特定的前綴以避免衝突。 有關更多詳細信息，請參閱 nav 屬性 部分。
您還可以擁有一系列可在此頁面上顯示的小工具。 此頁面可以包含出現在螢幕上的單一小工具或網格中的一組小工具。 有關網格排列的更多詳細信息，請參閱 佈局屬性 部分。
您不需要在小部件樹中新增動態區域包裝器。 這表示當您啟用此選項時，您可以在自訂頁面上拖放和調整小工具的大小。
範例：
{“nav”：{“label”：“自訂頁面”，“icon”：“stored-info”，“iconType”：“momentum”，“navigateTo”：“dynamic-tabs”，“align”：“top”，“isDefaultLandingPage”：true }，“page”：{Lenets"""lex")，"Fir>"Fyge"Page"："F5"""：{lex"""""lex""""""""""""Hay"Hay""Hpay"H""""下來吧，「片」“comp1”：{“comp”：“md-tabs”，“children”：[{“comp”：“md-tab”，“textContent”：“Shift Timer”，“attributes”：{“slot”：“tab”} }，{“comp”：“md-tab-panel”，“[attributes”：{attrilot:”“comp”：“my-custom-timer”，“source”：http：//my-cdn.com/my-custom-timer.js“wrapper”：{“title”：“Shift Timer”，“maximizeAreaName”：“app-maximize-area”} }] }, { "comp": "md-tab" "slot": "tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes: {wrti; "股市", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "attributes": { "slot": "tab" } }, { "comp": "md-tab-tab-pel": { "slot": "tab" } }, { "comp": "md-tab-tab-elel", }s }"")"e }s }"「「」面板」3:(plot)」s }: "plot")」）：「頁」s }s }"“comp2”：{“comp”：“我的 - 谷歌 - 地圖 - 組件”，“source”：“https://my-cdn.com/my-google.maps.js“wrapper”：{“title”：“谷歌地圖”，“maximizeAreaName”：“app-maximize-area”} } },“cols”：{“”“rows”：[1] } } } },下表描述了 導航 和 頁 屬性及其子屬性：
|
財產 |
描述和代碼 |
|---|---|
|
導航 > 標籤 |
該屬性表示頁面導航標識符。 螢幕閱讀器讀取此屬性並將其顯示在工具提示中。 這些參數對於在導覽列上顯示您的自訂頁面是必需的。 這 |
|
導航 > 圖示類型 |
此屬性表示自訂頁面導覽列中顯示的圖示類型。 有以下類型的圖示可用：
|
|
導航 > 圖標 |
此屬性代表 Momentum 庫中的圖示名稱或 CDN URL。 |
|
導航 > 對齊 |
此屬性可協助您將圖示對齊到導覽列的頂部或底部。 目前，該屬性僅允許頂部對齊。 |
|
導航 > isDefaultLandingPage | 此屬性指定 Agent Desktop 中代理程式的預設登入頁面。 將此屬性設為 true 以使導覽列頁面成為代理登入 Agent Desktop 後顯示的預設登入頁面。 如果多個導覽列頁面將此屬性設為 true，則系統會將第一個導覽列頁面視為預設登陸頁面。 如果沒有導覽列頁面將此屬性設為 true，則主頁將作為預設登入頁面。 您不能將「代理績效統計」報告設定為預設登入頁面。 |
|
nav > 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 佈局提供了大、中、小、超小等標準斷點。
這些像素可能會根據作業系統和瀏覽器的不同而變化。 |
|
頁 > 小部件 頁 > 公司 |
幫助您定義自訂小工具。 若要放置多個小部件，請依序指定小部件選項。 確保為每個小部件賦予一個唯一的區域名稱。稍後在佈局部分使用它。 此屬性代表自訂 HTML 元素的名稱 (稱為 Web 元件或任何其他元素 - 如果您想將其用作包裝器)。 有關詳細信息，請參閱 範例用例範例。 在此輸入您的自訂元素名稱，不含尖括號 (“<”或“>”)。 例如，「my-custom-element」。 小部件部分下的每個條目都支援以下格式： |
|
頁 > 腳本 |
（可選）僅當您從遠端位置 (例如 CDN) 載入小部件或元件時才需要此屬性。 不要更改同一組件的腳本 URL。 如果需要變更相同元件的腳本 URL，請執行下列其中一項操作：
|
|
頁 > 特性 |
您可以指定必須為 Web 元件傳遞的屬性。 |
|
頁 > 回應式 |
確定在 使用下列值之一配置此屬性：
無回應的小工具無法確保最佳的使用者體驗，並且不會顯示在較小的視圖中。 代理必須增加瀏覽器視窗的大小才能查看配置為無回應的任何小工具。 |
|
頁 > 屬性 |
您可以在此部分指定 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 小工具。 |
|
頁面 > 佈局 | 允許您在頁面上排列小工具。 以下格式代表網格佈局： 您可以在此處使用在 小部件 部分中定義的區域名稱來定義網格。 下面的例子展示如何指定三行三列的佈局：  在尺寸部分，數字表示小部件相對於其他小部件可以佔用的空間比例。 所有三列均佔據相等的 1 分之空間。 當可用寬度為 100% 時，每個小部件佔用 33.33% 的水平空間。  另一個用例範例，如果設定為「cols」：[1, 2, 2]，則表示整體空間除以 5 (1+2+2)，第一個小部件佔用 20% 的水平空間。 第二和第三個小部件各佔 40%。 如需了解更多信息，請參閱 網格佈局的基本概念。  |
|
頁 > ROOT |
佈局的嵌套稱為子佈局。 如果您的佈局配置中有巢狀佈局，則必須有一個「ROOT」物件作為子佈局的父級。 否則，如果不需要嵌套，您的佈局配置可以是平的。 此子佈局提供了對佈局調整大小行為的更多控制。 頁面佈局 屬性必須是 Record<string, Layout> 類型。 佈局屬性可讓您在頁面上排列小工具。 此設定在 ROOT 佈局中建立一個網格，其中包含兩個可以獨立調整大小的子網格。  調整元件的大小會影響該子佈局內的元件。  請注意以下情況： 無限循環：如果將 ROOT 佈局作為 ROOT 的子佈局包含在內，則會導致「呼叫堆疊超出」錯誤並陷入無限循環。  相同的子佈局 (N) 次：如果您使用相同的名稱將子佈局多次包含到網格中，並且如果您調整其中一個子佈局的大小，則所有子佈局都會自動調整大小。 如果這不是所需的行為，請使用唯一名稱重新命名每個子佈局。  |
（永久選項卡的屬性
若要將自訂頁面和自訂小工具中的選項卡設定為持久性選項卡，請在自訂佈局中輸入 md-tabs 的屬性。
範例：將標籤設定為持久
{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "容器中所有標籤的唯一 ID" }, }|
財產 |
描述 |
|---|---|
|
持續選擇 |
將 |
|
tabs-id |
容器中所有選項卡的唯一識別。 |
當您將 md-tabs 設為持久性 (persist-selection: true) 時，即使代理程式在桌面上的頁面或小部件之間切換，Agent Desktop 也會保留選項卡選擇。
-
persist-selection屬性不適用於「輔助資訊」窗格和「代理效能統計」報告頁面中的選項卡，因為持久性選項卡行為已在桌面中設定。 - 當您退出桌面、重新載入/刷新瀏覽器或清除瀏覽器快取時，選項卡選擇將重設為預設標籤。
持久小工具配置
您可以將任何自訂小工具配置為持久性的。 持久小工具顯示在桌面的所有頁面上。 只有當您有活動的聯絡要求或對話時，持久小工具才會在輔助資訊窗格中顯示為新選項卡。 例如， 範例持久 小工具。
持久小工具在主頁上的顯示方式與在其他頁面上的顯示方式不同。 但是，如果您有一個主動交互，持久小工具將作為輔助資訊窗格的一部分顯示在主頁中。 例如，當您接聽電話時，將顯示互動控制面板，並且 樣本持久性 小工具顯示為輔助資訊窗格的一部分。
範例：
“area”：{“persistent”：[{“comp”：“md-tab”，“attributes”：{“persistent”：[{“comp”：“md-tab”，“attributes”：{“name”：“tab”}，“children”：[{“comp”：“md-icon”，“attributes”：{“name”：“emoticons_16”} }，{“小部件”}“小部件”]}，{“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”：{tletletle""", 2", 2", 2";“maximizeAreaName”：“app-maximize-area”} } },“layout”：{“areas”：[ [“comp1”，“comp2”] ],“size”：{“cols”：[1, 1],“rows”：[1] } } } } }] } ] }自訂小工具時，您可以選擇以下選項之一：
-
在網頁上託管可嵌入 iframe 內的應用程式。
-
建立自訂小部件。
技術部件要求在 桌面小工具開發文檔。 作為佈局編輯者，請確保您掌握以下詳細資訊：
-
自訂 HTML 元素 (稱為 Web 元件) 的名稱是什麼？
-
託管 JavaScript 套件的內容傳遞網路 (CDN) 來源的 URL 是什麼？
標題小工具
標題用於顯示內聯資訊、新增下拉式選單等。 由於標題容器的垂直空間有限，因此整體標題高度只有 64 像素。 有關佈局對齊方式的更多資訊，請參閱 layout 屬性 部分。
範例：
“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] } } }
要為標題 Widget 添加工具提示，請使用 md-tooltip 包裝元件。 在 message 屬性中 輸入工具提示資訊。
範例：
“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”} }] }，}，}您必須添加樣式屬性 display 和 height ，才能通過標題的可自定義 Widget 區域中的 iFrame 配置任何 Widget。 height 屬性的最佳 擬合值為 64 圖元。
確保將 style 屬性添加到現有標題 Widget，以便它們在 iFrame 中按預期載入。
範例：
“head1”：{“comp”：“agentx-wc-iframe”，“attributes”：{“src”：“https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm”，“style”：“height：64px;display：flex;“}},我們建議您只使用包含多列的單行作為標題，因為標題高度僅為 64 圖元。 有關對齊方式的更多資訊，請參閱 layout 屬性 部分。
Auxiliary Information 窗格
桌面的 Auxiliary Information 窗格顯示選項卡，其中包括 Cisco 提供的 (預設) 視窗小部件和自定義視窗小部件。 以下 Cisco 提供的小組件顯示在預定義的選項卡中：
-
聯繫歷史
-
IVR 文字記錄
-
客戶體驗歷程
-
屏幕彈出
您可以使用 Auxiliary Information 窗格來：
-
添加標籤頁
-
更改 Tab 鍵順序
-
刪除預定義選項卡
-
將自訂選項卡標記為可拖動
-
將工具提示添加到自訂選項卡
-
添加 Reset Tab Order 選項
範例：
“面板”：{“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”：“螢幕彈出”} ]，“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”：“自定義小部件”} ] }，{“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”：“小部件標題”，“maximizeAreaName”：“app-maximize-area”} } }，“layout”：{“areas”：[ [“comp1”]，[“comp2”] ]，“size”：{“cols”：[1]，“rows”：[1，1] } } } } } } ] } ] }，在 Management Portal 上啟用 Customer Experience Management Metrics 後，您可以配置 Customer Experience Journey 小組件。
在 Auxiliary Information (輔助資訊) 窗格中，添加新選項卡以放置自定義 Widget。 這裡沒有特殊規則適用，元件嵌套符合預期，並在 children 部分中進行了描述 。 有關詳細資訊，請參閱 頁面的 Children 屬性。
以下是自訂選項卡標題的具體範例：
在 children 屬性中放置圖示和標籤的範例
{“comp”：“md-tab”，“attributes”：{“slot”：“tab”，“class”：“widget-pane-tab”}，“children”：[{“comp”：“md-icon”，“attributes”：{“name”：“transcript_16”} }，{“comp”：“span”，“textContent”：“我的小部件選項卡”} ]，}，在 children 屬性中放置圖像 (使用 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“：”我的小部件選項卡“} ] }]，}，}，當 Auxiliary Information 窗格包含多個選項卡時，會自動顯示 More Tabs 下拉清單。
您必須添加自定義選項卡工具提示，以提高可讀性和可訪問性。 要為自定義選項卡添加工具提示，請使用 md-tooltip 包裝元件。 在 message 屬性中 輸入工具提示資訊，並應用 style 屬性值，如以下示例 所示。
“comp”：“md-tooltip”，“attributes”：{“class”：“widget-tabs”，“message”：“示例選項卡 1”，“style”：“max-width：252px;最小寬度：110px;溢出：隱藏;文本溢出：省略號;空格：nowrap;display：inline-block;margin-bottom：-10px;“}，對於自定義選項卡，我們建議最大寬度為 252 圖元，最小寬度為 110 圖元。
要在自訂選項卡中啟用拖放功能，請在屬性 中添加以下屬性：
“comp”：“md-tabs”，“attributes”：{“class”：“widget-tabs”，“draggable”：true，“comp-unique-id”：“sample-dynamic-custom-tabs”}，-
draggable：將 draggable屬性值設置為true。 -
comp-unique-id：輸入唯一值以標識元件。範例：
“comp-unique-id”：“樣本動態自定義標籤”
如果為自定義選項卡啟用拖放功能，則代理可以將選項卡拖放到「輔助資訊」窗格中的所需位置。 要將 Tab 鍵重置為預設 Tab 鍵順序，請添加以下屬性：
“comp”：“agentx-wc-more-actions-widget”，“attributes”：{“slot”：“設置”，“class”：“widget-pane”，“tabs-unique-id”：“sample-dynamic-custom-tabs”}，-
agentx-wc-more-actions-widget：輸入顯示為 More Actions （
）圖示。 -
slot=“settings”：在元件中輸入一個屬性，該屬性在 More Actions 下拉列表中 顯示為 Reset Tab Order 選項。 代理可以通過按兩下 >重置 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 上的小部件。 這些小部件用於在後台執行邏輯。 本節對於觸發桌面上發生的事件和執行特定於 widget 的邏輯非常有用。 例如，在 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 (稱為數據提供程式) 獲取實時數據更新。
目前，我們在密鑰 STORE 下有一個數據提供程式。 有關詳細資訊，請參閱 Cisco Webex Contact Center 桌面開發人員指南 》中的 “數據提供程式 - 小組件屬性和屬性”部分。
預覽活動通話
管理員建立活動，設定撥號模式 (預覽)，並將活動分配給團隊。 若代理是活動指派所屬的團隊，則該代理可以撥打外傳預覽活動通話。 有關更多資訊，請參閱 在 Webex Contact Center中配置語音輸出活動模式。
管理員在自訂版面配置中設定下列項目，以便為代理啟用預覽活動聯絡。
活動聯絡人
管理員將活動聯絡人小工具新增到自訂版面配置的標題容器中。 市場活動聯繫人根據定義的屬性顯示客戶的聯繫資訊。 有關佈局對齊方式的詳細資訊，請參閱 頁面「屬性詳細資訊 」表的 佈局屬性 行。
範例：
“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”} ]，“可見性”：“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“} } ]，”可見性“：”CALL_GUIDE“} ] }- 以下
comp屬性引用已更改。屬性值中的 agentx將取代為Acqueon：AgentX-Preview-Campaign更名為Acqueon-Preview-CampaignAgentX-Call-Guide更名為Acqueon-Call-Guide
- 必須在 CDN 上託管清單和活動管理員 (LCM)，然後在腳本
屬性中指定 URL。
螢幕彈出
在桌面版面配置中，您可以透過下列其中一種方式設定畫面彈出：
-
作為自訂頁面
-
作為自訂頁面中的小組件之一
-
作為「輔助資訊」窗格中的標籤
螢幕彈出根據以下因素顯示在桌面上：
對於語音通道：
-
桌面配置中定義的設定
-
Flow Designer 中定義的 Screen Pop 活動
對於新的數位通道：
-
桌面配置中定義的設定
-
在 Connect Flow Builder 中定義的「螢幕彈出」節點
有關配置螢幕彈出的詳細資訊，請參閱 螢幕彈出。
設定導覽列中的畫面彈出
您可以將畫面彈出配置為自訂頁面，或配置為自定義頁面中的小工具之一。 若要存取畫面彈出自訂頁面，按一下 導覽列上的畫面彈出 圖示。 若要存取自訂頁面中的畫面彈出小工具，請按一下導覽列上的自訂圖示。 有關 導航 屬性的詳細資訊，請參閱 導航 (自定義頁面)。
範例：螢幕彈出作為自訂頁面
{ "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" }Example: Screen Pop as a Widget in the Custom Page
"comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" }If the Screen Pop is not configured in the Flow Designer, the custom page appears blank. For more information on configuring Screen Pop in the Flow Designer, see Screen Pop.
Configuring Screen Pop in the Auxiliary Information Pane
You can configure Screen Pop to appear as a tab in the Auxiliary Information pane.
By default, Screen Pop appears as a new sub tab in the Screen Pop tab of the Auxiliary Information pane if Screen Pop is configured to be displayed as Inside Desktop in the Flow Designer.
Add the following attribute in the panel section to include Screen Pop as a tab in the Auxiliary Information pane. For more information on panel details, see Auxiliary Information Pane.
Example: Screen Pop as a tab in the Auxiliary Information Pane
{ "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" } ], }The Screen Pop display option defined in the Flow Designer takes precedence over the configuration defined in the Desktop Layout.
For example, consider you have configured the following Screen Pop settings:
- Flow Designer—Display settings as In the new browser tab
- Desktop Layout—As a tab in the Auxiliary Information pane
When the event for which screen pop is configured occurs, the Screen Pop is displayed outside the Desktop - that is, in a new browser tab.
Sample Use Case Examples
-
Configure and Access Customer Experience Management Metrics Widget From the Navigation Bar
-
Default Auxiliary Information Pane with Contact History, and Screen Pop
-
Auxiliary Information Pane with Customer Experience Journey Widget
Configure and Access Customer Experience Management Metrics Widget From the Navigation Bar
範例：
{ "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] } } } },To get the spaceId and metricsId, see the Webex Experience Management documentation.
Using Tabs on the Custom Page
範例：
{ "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] } } } }Default Auxiliary Information Pane with Contact History and Screen Pop
範例：
"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" } },Auxiliary Information Pane with Customer Experience Journey Widget
範例：
"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" }, },本地化
The following are the supported languages:
Bulgarian, Catalan, Chinese (China), Chinese (Taiwan), Croatian, Czech, Danish, Dutch, English (UK), English (US), Finnish, French, German, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, and Turkish.
The Desktop UI language is based on the language preference settings on your browser. For example, let us consider that you have selected the preferred language as French on the Firefox browser. When you launch the Desktop in the Firefox browser, the Desktop UI appears in Français (French). 但是，在桌面佈局中添加的水平標頭、導航欄和其他元件不會根據瀏覽器上的語言首選項設置進行當地語系化。
本地化桌面元件
要本地化桌面元件，
-
使用 app.json
檔中設置的現有當地語系化金鑰。 如果未設置本地化金鑰，則使用預設語言英語 (美國)。 您可以向 Cisco 支援部門提交服務請求，以將本地化金鑰新增至 app.json檔案中。範例：本地化金鑰
{“通用”：{“按鈕標題”：“停止計時器”} } -
在桌面佈局 JSON 檔案中輸入以下區分大小寫的屬性以本地化元件：
“文本內容”：“$I 18N。<鍵>“，其中 <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”}] }
