- ホーム
- /
- 投稿記事
コメントありがとうございます。
カスタムデスクトップレイアウトを作成
この記事の内容
フィードバックがある場合この記事では、JSON ファイルを編集してカスタム レイアウトを作成する方法を説明し、カスタマー エクスペリエンス管理メトリック ウィジェットやカスタマー エクスペリエンス ジャーニー ウィジェットなどのウィジェットを使い始めるためのサンプル使用例を紹介します。 カスタムデスクトップレイアウトを効果的に操作するには、HTML 構造、ブラウザのドキュメントツリーモデル、および JSON 形式について十分に理解している必要があります。
概要
デスクトップ レイアウト機能を使えば、ビジネス要件に合わせて Webex コンタクト センターのデスクトップを設定できます。 ロゴ、タイトル、ウィジェットなどの要素をカスタマイズできます。 デスクトップレイアウトを作成してチームに割り当てることができます。 このレイアウトでは、チームの一部としてログインするすべてのエージェントに対し、デスクトップ上にエージェント エクスペリエンスが生成されます。
レイアウトには 2 つのタイプがあります。
-
グローバルレイアウト:このレイアウトはシステムによって生成されたレイアウトで、チームを作成するとデフォルトで割り当てられます。 詳細については、次を参照してください。 チームの管理。 チームを作成すると、グローバルレイアウトがチームのデスクトップレイアウトとして自動的に設定されます。 このレイアウトを削除することはできません。
-
カスタムレイアウト: カスタマイズされたデスクトップ体験を提供するレイアウトです。 1 つまたは複数のチーム用にカスタムレイアウトを作成することができます。
エージェントがログインしているときに新しいデスクトップレイアウトを指定した場合、エージェントは新しいレイアウトを表示するためにページをリロードする必要があります。
Webex コンタクト センター デスクトップは 3 つのペルソナをサポートしています。
-
エージェント（Agent）
-
スーパーバイザ（Supervisor）
-
Supervisor および Agent
JSON レイアウト ファイルには、ペルソナごとに個別のセクションがあります。 管理者は JSON レイアウト ファイルの対応するセクションで各ペルソナの設定を構成する必要があります。 サンプルの JSON レイアウトファイルの詳細については、 JSON レイアウトの最上位プロパティ。
Cisco がデスクトップレイアウトに新しい機能を追加すると、変更されていないレイアウトが新機能で自動的に更新されます。 変更されていないデスクトップ レイアウトを使用する既存のチームは、更新されたデスクトップ レイアウトを自動的に利用できるようになります。 変更されていないデスクトップ レイアウトを使用する Desktop ユーザは、ログイン時またはブラウザの再読み込み時に、新しいレイアウトベースの機能を受け取ります。
を使用している場合、 既定のデスクトップ レイアウト.JSON ファイルが変更されていない場合、変更されていないレイアウトと見なされます。 ただし、 既定のデスクトップ レイアウト.JSON ファイルを削除して再度アップロードすると、ファイルのコンテンツまたはファイル名が変更されていない場合でも、変更されたレイアウトと見なされます。
デスクトップには、iframe ベースとウェブ コンポーネント ベースの 2 種類のウィジェットがあります。 ヘッダー、ナビゲーション (カスタムページ)、永続領域、ヘッドレス領域、および補助パネルは、デスクトップでカスタマイズ可能な領域です。 これらはウィジェットではありません。
以下のリストは、設定できるスペースの詳細です。 画像はデスクトップのレイアウトを示しています。
-
タイトルとロゴ エリア: このスペースには、画面の左上角にある Webex コンタクト センターのロゴと名前 (デフォルト) が表示されます。
-
横型ヘッダー エリア: このスペースには、カスタム ウィジェットが配置された設定可能なエリアがあります。 これらのウィジェットは、例えば、インライン情報およびドロップダウンメニューを表示することができます。 このヘッダーの高さは 64 ピクセルしかないため、ウィジェットの高さはヘッダーの高さを超えることはできません。
-
ワークスペース 領域: このスペースは、ナビゲーション バーでの選択内容に応じて、またはエージェントが顧客と対話しているときに変化します。 エージェントが通話中である場合、この領域にはインタラクション コントロールと補助情報ペイン (カスタム ウィジェットと永続ウィジェットを含む) が表示されます。 エージェントがメール、チャット、またはソーシャル チャネルで対話している間、この領域にワークスペース領域と補助情報ペイン (固定ウィジェット領域を含む) が表示されます。
カスタムページ がワークスペースペインのデスクトップインターフェイス上に表示されます。 ナビゲーションバーのアイコンからカスタムページにアクセスできます。 各カスタムページには、1 つ以上のカスタムウィジェットを含めることができます。
カスタムウィジェット は、JSON レイアウトで構成されたサードパーティ アプリケーションです。 カスタムウィジェットは、カスタムページ、カスタムタブ (補助情報ペイン)、またはデスクトップの水平ヘッダーに配置できます。
-
ナビゲーションバー エリア: このスペースを使用して、カスタム ページにアクセスするためのナビゲーション アイテムを追加します。
JSON レイアウトの最上位プロパティ
[ロール（Roles）]
デフォルトの JSON レイアウトには次の 3 つのロールがあります。
-
エージェント—エージェントのアクティビティを処理するために、エージェントが Webex コンタクトセンターデスクトップにサインインしたときに表示されるデスクトップレイアウトを設定します。
-
スーパーバイザー: スーパーバイザーが Webex コンタクト センター デスクトップにサインインしたときに表示されるデスクトップ レイアウトを設定し、スーパーバイザーの機能のみを処理します。
スーパーバイザーがデスクトップにサインインすると、プライマリ チームに指定されているデスクトップ レイアウトが適用されます。 プライマリ チームを指定しない場合、グローバル レイアウトが適用されます。 デフォルトでは、APS レポートは無効になっています。
-
SupervisorAgent—スーパーバイザーの機能とエージェント アクティビティの両方を処理するために、スーパーバイザーが Webex コンタクト センター デスクトップにサインインしたときに表示されるデスクトップ レイアウトを設定します。
関連する JSON レイアウト ファイルの対応するペルソナで、各ロールのウィジェットを追加または変更できます。
以下は、ロールに基づく JSON レイアウトの最上位プロパティです。
{ "エージェント": { "バージョン": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "タスクページイラスト": "https://www.abc.com/image/logo.jpg", "stop NavigatorOnAcceptTask": false, "ドラッグドロップ有効": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "Area": { "advancedHeader": { ... }, "パネル": { ... }, "ナビゲーション": { ... }, "持続的": { ... }, "ヘッドレス": { ... } }, }, "supervisor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "タスクページイラスト": "https://www.abc.com/image/logo.jpg", "stop NavigatorOnAcceptTask" : false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": [ "outdial", "notification"], "Area": { "advancedHeader": { ... }, "パネル": { ... }, "ナビゲーション": { ... }, "持続的": { ... }, "ヘッドレス": { ... }, "homePage": { ... } }, } "supervisorAgent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "タスクページイラスト": "https://www.abc.com/image/logo.jpg", "stop NavigatorOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": [" ", "notification"], "Area": { "advancedHeader": { ... }, "パネル": { ... }, "ナビゲーション": { ... }, "持続的": { ... }, "ヘッドレス": { ... } }, } },- JSON レイアウトのプロパティに対する変更は、デスクトップ ブラウザーが更新されたときに有効になります。
- JSON レイアウトで有効にした機能がデスクトップで利用できない場合、Cisco サポートに連絡して機能を有効にしてください。
- JSON レイアウトのすべてのプロパティでは大文字と小文字が区別されます。
アプリタイトル
デスクトップの横方向のヘッダーにタイトルを指定します。 既定のタイトルは Webex コンタクト センター。
例：
"appTitle": "Webex コンタクトセンター"既定の appTitle は、 コンタクトセンターのデスクトップ に Webex コンタクト センター。 古いデフォルトの appTitle (コンタクトセンターのデスクトップ) を参照してください。 新しい appTitle を使用するには、カスタム レイアウトを変更する必要があります。 ただし、新しいグローバル レイアウトは、デフォルトの appTitle を Webex コンタクト センター。
タイトルには、テキスト、画像、または空の文字列を指定できます。 タイトルテキストは 2 行で表示されます。 テキストが 2 行目を超える場合は、省略記号アイコンが表示され、ツールチップに完全なタイトルが表示されます。 タイトルにスタイルを適用することはできません。
データ URI (Uniform Resource Identifier) を使用するか、コンテンツ配信ネットワーク (CDN)、Amazon Web Services (AWS) Simple Storage Service (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) Simple Storage Service (S3) バケット、または同様のホスティングサービスでカスタムロゴ画像をホストし、ホストされる画像の URL を指定することができます。 サポートされているロゴ画像形式は、PNG、JPG、JPEG、GIF、SVG、WebP です。 サポートされているロゴ画像のサイズは 96 x 32 ピクセル (幅 x 高さ) です。
| 条件 | 例 | アプリタイトル | ロゴ |
|---|---|---|---|
| appTitle およびロゴが構成されていない場合 |
|
タイトルなし | 既定のロゴ |
| appTitle およびロゴが構成されている場合 |
|
設定済みテキスト | 設定済みロゴ |
| appTitle が構成され、ロゴが構成されていない場合 |
|
設定済みテキスト | 既定のロゴ |
|
appTitle が構成されておらず、ロゴが構成されている場合
|
|
タイトルなし | 設定済みロゴ |
| appTitle が構成され、ロゴが優先されない場合 |
|
設定済みテキスト | ロゴなし |
|
appTitle が構成されておらず、ロゴが優先されない場合
|
|
タイトルなし | ロゴなし |
| appTitle が画像として追加され、ロゴが設定されている場合 |
|
設定済みの画像 | 設定済みロゴ |
|
appTitle が画像として追加され、ロゴが構成されていない場合
|
|
設定済みの画像 | 既定のロゴ |
|
appTitle が画像として追加され、ロゴが優先されない場合
|
|
設定済みの画像 | ロゴなし |
- カスタム画像サイズはアスペクト比に基づいて調整されます。 以前に構成されたカスタムタイトルテキストは、デスクトップで 2 行に表示される場合があります。 これを避けるために、カスタムタイトルテキストを変更することができます。
- タイトルとロゴがデスクトップの水平ヘッダーで構成されていない場合、そのスペースはヘッダー ウィジェットによって使用されます。 ヘッダー ウィジェットは、タイトルとロゴ スペースを使用するために正しく構成されている必要があります。
- タイトルとロゴの合計が、幅の最大 304 ピクセル (パディングを含む) を超えることはできません。 ロゴの幅が 96 ピクセル未満の場合、残りの幅をタイトルに使用できます。
- カスタム画像サイズがサポートされているサイズより大きい場合、画像サイズはヘッダーの横方向のアスペクト比に基づいて調整されます。 カスタム画像サイズがサポートされているサイズより小さい場合、ヘッダーの横長は実際の画像サイズが維持されます。
taskPage イラスト
組織の基本設定とブランドとの整合性に基づいて、タスクページ用のカスタムイラストを指定します。 エージェントがサインインすると、タスクページの背景として設定済みのイラストが表示されます。 既定では、作業ページはイラストなしで表示されます。
例：
"タスクページイラスト": "https://www.abc.com/image/logo.jpg",データ URI を使用するか、コンテンツ配信ネットワーク (CDN)、Amazon Web Services (AWS) Simple Storage Service (S3) バケツ、または類似のホスティングサービスでカスタム イラストレーションをホストしてから、ホストされている イラストレーションへの URL を指定することができます。 イラストレーションは、レイアウト定義に基づいて、グローバル レベルまたはチーム レベルで設定できます。 壊れた画像がデスクトップに表示されないように、URL を正しく設定してください。
サポートされているタスクページのイラスト形式は、PNG、JPG、JPEG、GIF、SVG、WebP です。 推奨されるイラスト サイズは 400 x 400 ピクセル (幅 x 高さ) です。 自作のイラストが推奨サイズより大きい場合、イラストのサイズは作業ページのアスペクト比に合わせて調整されます。 カスタム イラストレーション サイズが推奨サイズより小さい場合、作業ページでは実際のイラストレーション サイズが保持されます。
停止ナビゲート OnAcceptTask
前のタスクで作業している間にエージェントが新しいタスクを承諾した場合、新しく承諾したタスクにフォーカスを移すかどうかを判断する。 既定値は次のとおりです。 false。
例：
"stop NavigatorOnAcceptTask": false値が trueを使用している場合、ユーザがデスクトップで新しいタスクを承認すると、フォーカスは前のタスクに保持され、新しく承認されたタスクに移動しません。 この設定により、ユーザが新しいリクエストを承認する際にデータが失われることを防ぎます。
たとえば、エージェント 1 が顧客 1 とチャットしながら、同時に顧客 2 と音声コールを行っているとします。音声コールの間、エージェント 1 は [インタラクション コントロール] ペインで顧客 2 の詳細を更新しています。 現在、エージェント 1 には [タスクリスト] ペインに 2 つのアクティブなタスクがあり、[インタラクションコントロール] ペインにフォーカスがあります。 エージェント 1 が顧客 3 からの新しいチャット要求を承認すると、フォーカスは顧客 2 とのインタラクション コントロール ペインに残り、新しく承認されたチャット要求に移動しません。
新しく承諾したタスクに移動しないように、前のタスクにフォーカスを保持するには、 停止ナビゲート OnAcceptTask プロパティ値の設定: true。
次の場合、 停止ナビゲート OnAcceptTask プロパティ値が JSON レイアウトに入力されなかった場合、デスクトップはフォーカスを新しく承認されたタスクにシフトします。 この動作は、 stopNavigateOnAcceptTask プロパティ値が false に設定されている場合と同様です。
- この設定は、タスクの承諾、会議、相談、転送、アウトダイヤル コール、アウトバウンド キャンペーン コール、自動ラップアップなど、デスクトップで実行されるすべてのタスク (音声およびデジタル チャネル) に適用されます。
- デスクトップ ユーザがホーム ページにいて、タスク リスト ウィンドウにアクティブなタスクがない場合、この設定は適用されません。 このような場合、新しいタスクが承認されると、フォーカスはホーム ページから新しく承認されたタスクに移動します。
ドラッグドロップ有効
カスタム ページでウィジェットのドラッグ アンド ドロップとサイズ変更を有効にするには、値を true に設定します。 デフォルト値は falseです。
例：
"ドラッグドロップ有効": false補助情報ペインのタブでドラッグ アンド ドロップ機能を有効にする方法の詳細については、「 補助情報ペイン」を参照してください。
通知タイマー
デスクトップ上のデスクトップ通知が自動的に閉じられるまでの期間 (秒単位) を設定します。 通知はデスクトップの右上隅に表示されます。 デフォルトのタイムアウト値は 8 秒です。 タイムアウト値の有効な範囲は 1 ～ 10 秒です。 タイムアウトの変更を有効にするには、変更後にブラウザを更新する必要があります。
例：
「通知タイマー」: 8最大通知数
デスクトップに一度に表示されるデスクトップ通知の数を設定します。 デフォルト値は 3 です。デスクトップ通知の範囲は 1 ～ 10 です。 デスクトップ通知が積み重ねられています。 通知が多い場合は、 notificationTimer 設定に応じて、通知が若干遅れて表示されます。
例：
「最大通知数」: 3ブラウザ通知タイマー
デスクトップ上のブラウザ トースター通知が自動的に閉じられるまでの期間 (秒単位) を設定します。 トースターは、デスクトップがアクティブなブラウザ ウィンドウまたはタブではない場合にのみ表示されるネイティブ ブラウザ通知です。 デスクトップブラウザのウィンドウまたはタブが非アクティブの場合、
-
他のブラウザウィンドウまたはタブで作業しています。
-
他のアプリケーションで作業しています。
-
デスクトップ ブラウザ ウィンドウを最小化しました。
通知はデスクトップの右上隅に表示されます。 デフォルトのタイムアウト値は 8 秒です。 タイムアウト値の推奨範囲は 5 ～ 15 秒です。 タイムアウトの変更を有効にするには、変更後にブラウザを更新する必要があります。
例：
「ブラウザ通知タイマー」: 8ブラウザ通知に設定されたタイムアウトは、オペレーティング システムとブラウザの設定によって異なります。 タイムアウト値は、Windows OS、Chrome OS、および macOS の Chrome ブラウザで適用されます。 ただし、サポートされている他のブラウザは、構成された通知タイムアウト値を一貫して尊重しません。
wxmConfigured
(オプション) Webex Experience Management を構成するには、値を true に設定します。 デフォルト値は falseです。
例：
"wxmConfigured": trueデスクトップチャットアプリ
Webex アプリなどのシスコが提供する複数のチャット アプリケーションを設定します。
webex 構成済み
Webex アプリは、メッセージング機能や会議機能とともにデスクトップ内で構成できます。 この構成により、エージェントはデスクトップから移動することなく、組織内の他のエージェント、スーパーバイザー、および主題専門家 (SME) と共同作業を行うことができます。
- サイト管理者は、Webex Meeting ユーザを管理し、ユーザが Webex Enterprise Edition を持っている場合にのみ権限を割り当てます。 詳細については、「Cisco Webex Control Hub での Webex Meetings ユーザーの管理」を参照してください。
- 監督者および SME は、システム (個人用デバイス) に Webex クライアントをダウンロードするか、Web 用 Webex アプリ ( https://web.webex.com/) を使用して Webex アプリにアクセスする必要があります。 詳細については、 アプリをダウンロードをご覧ください。
- Agent Desktop 内の Webex アプリにアクセスして、Agent Desktop から移動せずに、組織内の他のエージェント、スーパーバイザー、および主題専門家 (SME) と共同作業を行うことができます。 通話制御機能は利用できません。 通話の受信と発信を行うには、外部の非埋め込み型 Webex アプリが必要です。 詳細については、「Calling Apps」を参照してください。
デスクトップ内で Webex アプリを構成するには:
-
Cisco Webex Control Hub で、ユーザにサービスを追加するときに、 高度なメッセージング チェックボックスをオンにします ()。 詳細については、 「Cisco Webex サイト管理のユーザ アカウントの管理」 を参照してください。
-
カスタム デスクトップ レイアウトで、
webexConfiguredプロパティの値をtrueに設定します。例：
「デスクトップチャットアプリ」: {「webexConfigured」: true },webexConfiguredプロパティのデフォルト値はfalseです。Webex アプリは、エージェント、スーパーバイザー、およびスーパーバイザーエージェントの各ロールに対して、
webexConfiguredプロパティ値をtrueに設定している場合にのみ使用できます。 エージェント、スーパーバイザー、またはスーパーバイザーエージェントは、Webex アプリからサインアウトできません。表示するには
(Webex) デスクトップの水平ヘッダーにあるアイコンをクリックし、 webexheaderActionsプロパティに値を入力します。 詳細については、 ヘッダーアクション。特定のチームで Webex アプリを有効にするには、カスタムレイアウトを選択して
webex 構成済みプロパティ値が設定されている真実。 詳細については、 チームを作成する。
Webex アプリは、補助情報ペイン、カスタム ページ、カスタム ウィジェットでも構成できます。 詳細については、 補助情報パネル。
Webex アプリ通知
指定された値は 通知タイマー そして ブラウザ通知タイマー 通知タイマーのプロパティは、Webex アプリに適用できます。 これらのプロパティのデフォルトのタイムアウト値は 8 秒です。 詳細については、 通知タイマー そして ブラウザ通知タイマー。
ヘッダーアクション
デスクトップの水平ヘッダー上のアイコンの順序を変更します。 デフォルトの順序は次のとおりです。
-
（Webex）
-
（外線通話） -
（通知センター）
headerActions プロパティの値を次のように設定します。
|
アイコン名 |
headerActions プロパティ値 |
|---|---|
|
Webex アプリ |
webex |
|
アウトダイヤルコール |
アウトダイヤル |
|
通知センター |
通知 |
例：
"headerActions": ["Webex", "アウトダイヤル", "通知"],
headerActions プロパティ値では大文字と小文字が区別されます。
アイコンのデフォルトの順序を変更するには、カスタム レイアウトに headerActions プロパティと値を入力します。
例：
"headerActions": ["通知", "発信", "WebEx"],
- カスタム レイアウトに
headerActionsプロパティと値を入力しない場合は、アイコンはデフォルトの順序で表示されます。 - デスクトップからヘッダー アイコンと関連機能を削除するには、
headerActionsプロパティ ("headerActions": []) に空の値を設定します。 ただし、Webex アプリを補助情報ペインまたはカスタム ページに追加した場合、あるいはカスタム ウィジェットとして追加した場合、Webex アプリはデスクトップの水平ヘッダーで使用できませんが、エージェントは引き続き Webex アプリにアクセスできます。 -
webexConfiguredプロパティ値がfalseに設定されている場合、 webex 値がheaderActionsプロパティに追加されていても、Webex Appアイコンはデスクトップの水平ヘッダーに表示されません。 詳細については、「 webexConfigured」を参照してください。
エリア
area プロパティは、デスクトップ レイアウトのコア セクションです。 エリアに応じてレイアウトを定義できます。
「エリア」: {「ヘッダー」: { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "スクリプト": .... } }, "パネル": {... }, "ナビゲーション": {... }、"持続的"：{ ... }, "ヘッドレス": {... } },次の エリア オブジェクトを設定できます。
-
パネル: 補助情報ペインの 2 番目のパネルまたは右端のパネルを表します。
-
ナビゲーション: カスタム ページと、そのページに関連するナビゲーション要素を表します。
-
永続的: 永続的でデスクトップのすべてのページに表示されるページ レベルのウィジェットを表します。
-
ヘッドレス: 視覚的なインターフェースを持たず、バックグラウンドでロジックを実行するウィジェットを表します。
advancedHeader プロパティが設定されている場合は、header プロパティと headerActions プロパティを削除する必要があります。
高度なヘッダー
デスクトップの水平ヘッダー上のアイコンの表示をカスタマイズし、順序を変更します。 デフォルトの順序は次のとおりです。
-
（Webex）
-
（外線通話）
-
（通知センター）
-
（エージェント状態セレクター）
advancedHeader プロパティの値を次のように設定します。
|
アイコン名 |
headerActions プロパティ値 |
|---|---|
|
Webex アプリ |
エージェント X-Webex |
|
アウトダイヤルコール |
エージェント x アウトダイヤル |
|
通知センター |
エージェント x 通知 |
|
エージェント状態セレクター |
エージェント X 状態セレクター |
例：
"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 構成済み。
ホームページ
デスクトップにログインすると、ホームページが表示されます。
ホーム ページは、スーパーバイザーとスーパーバイザー エージェント ペルソナにのみ適用されます。
ホーム ページで次のウィジェットを表示できます。 アナライザー ウィジェットはデフォルトで提供されますが、管理者は永続ウィジェットとカスタム ウィジェットを構成することもできます。 詳細については、 JSON レイアウトのトップレベルプロパティ。
アナライザーウィジェット
デフォルトでは、アナライザー ウィジェットはデスクトップのホームページに表示されます。
ホームページレイアウト構成
組織の設定とブランドの調整に基づいたレイアウトを表示するようにデスクトップのホームページを構成できます。 編集する ホームページ ホームページを構成するフィールド。 ユーザがデスクトップにサインインしたときに、ホームページに表示される次のコンポーネントを構成できます。
-
ようこそメッセージ
-
その タスク ナビゲーション バーのアイコンをクリックして、タスク ウィンドウに移動します。 その タスク コール モニタリング機能が有効になっているスーパーバイザーおよびスーパーバイザー & エージェントのロールにはアイコンが表示されます。 タスク ペインには、受信した顧客リクエスト、アクティブおよび過去の顧客とのやり取り、アクティブな監視リクエストが表示されます。
-
フィルターセクション キュー名、 チャンネルタイプ、そして 管理対象チーム。
次の表は、 ページ ホームページを構成するために必要なプロパティ:
|
財産 |
説明とコード |
|---|---|
|
ページ > useFlexLayout |
Flex レイアウトは新しい Web コンポーネントです。 既存のウィジェットは変更されません。 新しいフレックス レイアウトでは、同じレイアウト構成形式が簡略化された方法で使用されます。 下位互換性があり、既存のウィジェットに影響を与えません。 JSON レイアウトを構成する必要があります。 JSON レイアウトを構成するには、ウィジェットの高さと幅を指定します。 ウィジェットは、JSON レイアウト内で構成されているのと同じ順序でレンダリングされます。 ウィジェットのデフォルトのマージンは 8 ピクセルです。 JSON レイアウトは、ウィジェットの寸法 (幅 x 高さ) と座標 (X、Y、Z) に基づいています。 柔軟なレイアウトは、個々のウィジェットのサイズ変更、ウィジェットの最大化などの機能をサポートします。 個々のウィジェットの高さはピクセル単位で測定されます。 高さ 1 単位 = 40 ピクセル。 ウィジェットの幅は、コンテナ内の列数と、コンテナの幅に基づいて変化する列数によって決まります。 ウィジェットは左から右に表示されます。 高度なレイアウト エンジンは、カスタム ロジックを使用して、ウィジェットの水平方向と垂直方向の両方のスペース調整を適用します。 最初、レイアウトは水平に読み込まれます。 ウィジェットは水平方向に読み込まれた後、垂直方向に読み込まれ、スペースの使用が最適になることが保証されます。 画面サイズに基づいてウィジェットを構成します。 画面サイズに応じてウィジェットの幅を拡大または縮小することができます。 これにより、ウィジェットの読みやすさと使いやすさが向上します。 フレックス レイアウトでは、大、中、小、極小などの標準ブレークポイントが提供されます。
これらのピクセルは、オペレーティング システムとブラウザによって異なる場合があります。 |
|
ページ > comp |
必ず一意のカスタム コンポーネントを提供してください。 |
|
ページ > ページヘッダー |
静的、動的、またはその両方が可能なタイトル文字列を指定してください。
|
|
ページ > ページサブヘッダー |
デスクトップに表示されるサブヘッダーを必ず追加してください。 ユーザはサブヘッダーに「 アナライザーに移動 」を追加できます。
|
ナビゲーション（カスタムページ）
このセクションでは、左側のナビゲーション バーに表示されるページを追加できます。 ナビゲーション バーに表示されるウィジェットのナビゲーション アイコンと一意の 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": "シフトタイマー", "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": "シフトタイマー", "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": "3 つのコンテンツ", "attributes": { "slot": "panel" } } ] }, "comp2": { "comp": "my - google - map - components", "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] } } } },次の表は、 ナビ そして ページ プロパティとその子プロパティ:
|
財産 |
説明とコード |
|---|---|
|
ナビ > ラベル |
このプロパティは、ページ ナビゲーション識別子を示します。 スクリーン リーダーはこのプロパティを読み取り、ツールヒントに表示されます。 これらのパラメータは、ナビゲーション バーにカスタム ページを表示するために必要です。 その |
|
ナビ > アイコンタイプ |
このプロパティは、カスタム ページのナビゲーション バーに表示されるアイコンの種類を表します。 使用できるアイコンの種類は次のとおりです。
|
|
nav > アイコン |
このプロパティは、Momentum ライブラリまたは CDN URL のアイコンの名前を表します。 |
|
nav > 揃える |
このプロパティにより、アイコンをナビゲーションバーの上または下に揃えることができます。 現在、このプロパティでは上揃えのみが許可されています。 |
|
nav > isDefaultLandingPage | このプロパティでは、Agent Desktop に指定されたエージェント用のデフォルトのランディングページを指定します。 このプロパティを true に設定して、エージェントが Agent Desktop にログインした後に表示されるデフォルトのランディングページをナビゲーションバーページにします。 複数のナビゲーションバーページでこのプロパティが true に設定されている場合、システムは最初のナビゲーションバーページがデフォルトのランディングページになると見なします。 このプロパティが true に設定されているナビゲーションバーページがない場合、ホームページがデフォルトのランディングページとして機能します。 エージェントのパフォーマンス統計レポートをデフォルトのランディングページとして設定することはできません。 |
|
nav > navigateTo |
このプロパティはカスタムページの名前を指定します。 この名前は、エージェントが移動するときにアドレスバーに表示されます。 NavigatorTo には、images、fonts、css、build_info、help、app、i18n、icons、images-mfe-wc、および sounds の値を含めないでください。 |
|
プロパティ |
説明とコード |
|---|---|
|
ページ > ID |
イン その |
|
> useFlexLayout |
Flex レイアウトは新しいウェブコンポーネントです。 既存のウィジェットは変更されません。 新しいフレックス レイアウトは同じレイアウト構成形式を簡単に使用します。 後方互換性があり、既存のウィジェットには影響しません。 JSON レイアウトを構成する必要があります。 JSON レイアウトを構成するには、ウィジェットの高さと幅を指定します。 ウィジェットは、JSON レイアウト内で構成されたのと同じシーケンスでレンダリングされます。 ウィジェットのデフォルトのマージンは 8 px です。 JSON レイアウトは、ウィジェットの寸法 (幅 x 高さ) と座標 (X、Y、Z) に基づいています。 フレキシブル レイアウトは、個々のウィジェットのサイズ変更、ウィジェットの最大化などの機能をサポートします。 個々のウィジェットの高さはピクセル単位で測定されます。 1 単位の高さ = 40 ピクセル。 ウィジェットの幅は、コンテナー内の列の数と、コンテナーの幅に基づいて変化する列の数によって異なります。 ウィジェットは左から右に表示されます。 高度なレイアウト エンジンは、カスタム ロジックを使用して、ウィジェットの水平および垂直の両方のスペース調整を適用します。 最初、レイアウトは横方向に読み込まれます。 ウィジェットは水平方向にロードした後、垂直方向にロードし、スペースの利用が最適化されるようにします。 画面サイズに基づいてウィジェットを設定します。 画面サイズに基づいて、ウィジェットの幅を拡大または縮小できます。 これにより、ウィジェットがより読みやすく、使いやすくなります。 Flex レイアウトは、大、中、小、極小などの標準的なブレークポイントを提供します。
これらのピクセルは、オペレーティング システムとブラウザーに基づいて異なる場合があります。 |
|
ページ > ウィジェット ページ > コンプ |
カスタム ウィジェットを定義するのに役立ちます。 複数のウィジェットを配置するには、ウィジェットオプションを順番に指定します。 各ウィジェットに固有のエリア名を付けてください。後でレイアウト セクションで使用します。 このプロパティは、カスタム HTML 要素 (ウェブコンポーネントまたはラッパーとして使用する他の要素と呼ばれます) の名前を示します。 詳細は サンプル使用例を参照してください。 ここにカスタム要素名を入力します ("<" または ">")。 例、"my-custom-element" ウィジェット セクションの各エントリは、次の形式をサポートしています。 |
|
ページ > スクリプト |
(オプション) このプロパティは、CDN などのリモートの場所からウィジェットまたはコンポーネントを読み込む場合にのみ必要です。 同じコンポーネントのスクリプト URL は変更しないでください。 同じコンポーネントのスクリプト URL を変更する必要がある場合は、次のいずれかを実行します。
|
|
ページ > プロパティ |
ウェブコンポーネントに渡す必要があるプロパティを指定することができます。 |
|
ページ > レスポンシブ |
カスタム レイアウトで追加されたウェブ コンポーネントまたは iFrame ベース ウィジェットのどちらを 以下のいずれかの値を使用して、このプロパティを構成します。
レスポンシブでないウィジェットでは、最高のユーザ エクスペリエンスを確保できず、小さいビューには表示されません。 エージェントは、応答なしとして設定されているウィジェットを表示するには、ブラウザ ウィンドウのサイズを大きくする必要があります。 |
|
ページ > 属性 |
このセクションでは Web コンポーネントの属性を指定できます。 |
|
ページ > 可視性 |
Cisco が提供するウィジェットは、連絡先履歴、Cisco Webex Experience Management, IVR トランスクリプト、キャンペーン コール ガイドのプレビュー、スクリーン ポップです。
|
|
ページ > 子供 |
このプロパティはレイアウトの中核部分です。 の中で STORE 値をプロパティとして渡す方法については、「 デスクトップからウィジェットにデータを共有する」を参照してください。 「children」配列セクションの利点は、既にデスクトップ バンドルの一部となっている既存の Web コンポーネントをレイアウト仕様で使用できることです。 デスクトップ バンドルの Web コンポーネントには次のものが含まれます。
永続タブの属性の詳細については、「 永続タブの属性」を参照してください。 |
|
ページ > テキストコンテンツ |
テキスト コンテンツを追加するのに役立ちます。 |
|
ページ > スタイル |
コンポーネントに特定の CSS スタイルを割り当てるのに役立ちます。 |
|
ページ > ラッパー |
ウィジェット ラッパーを使用すると、ウィジェットの上にツールバーを追加できます。 ツールバーにはタイトルと デフォルト値「app-maximize-area」を使用するようにしてください。 現在はデフォルト値のみが利用可能です。 |
|
ページ > ラッパー> ID |
(オプション) Web コンポーネント ウィジェット ラッパーを使用すると、一意の識別子を使用して動的なウィジェット タイトルを更新できます。 ウィジェット ラッパーの iFrame ベースのウィジェットのタイトルを更新するには、同じドメインの iFrame コンテンツを使用します。 以下にサンプル例を示します。 |
|
ページ > エージェント x-WC-iframe |
デスクトップ上のウィジェットとして表示される iFrame に Web ページを埋め込むことができます。 「agentx-wc-iframe」という iFrame ウィジェットを使用できます。 |
|
ページ > レイアウト | ページ上のウィジェットを配置できます。 次の形式はグリッド レイアウトを表します。 ここでは、 ウィジェット セクションで定義したエリア名を使用してグリッドを定義できます。 次の例は、3 行 3 列のレイアウトを指定する方法を示しています。  サイズ セクションでは、数字はウィジェットが占めることができるスペースの割合を他のウィジェットと比較して表します。 3 つの列はすべて、均等に 1 つのスペースを占めます。 使用可能な幅が 100% の場合、各ウィジェットは水平方向のスペースの 33.33% を占めます。  別の使用例として、"cols": [1, 2, 2] と設定すると、全体のスペースが 5 (1+2+2) で分割され、最初のウィジェットが水平スペースの 20% を占めることを意味します。 2 番目と 3 番目のウィジェットはそれぞれ 40% を占めます。 詳細については、 「グリッド レイアウトの基本概念」を参照してください。  |
|
ページ > ルート |
レイアウトのネストはサブレイアウトと呼ばれます。 レイアウト構成にネストされたレイアウトがある場合は、サブレイアウトの親として単一の「ROOT」オブジェクトが必要です。 それ以外の場合、ネストが必要ない場合は、レイアウト構成をフラットにすることができます。 このサブレイアウトは、レイアウトのサイズ変更の動作をより詳細に制御できます。 ページ レイアウト プロパティは、Record<string, Layout> 型である必要があります。 レイアウト プロパティを使用すると、ページ上のウィジェットを配置できます。 この設定により、ROOT レイアウトに、個別にサイズを変更できる 2 つのサブグリッドを含むグリッドが作成されます。  コンポーネントのサイズを変更すると、そのサブレイアウト内のコンポーネントに影響します。  以下のケースに注意してください。 無限ループ: ROOT レイアウトを ROOT のサブレイアウトとして含めると、「呼び出しスタックの超過」エラーが発生し、無限ループが発生します。  同じサブレイアウト (N) 回: 同じ名前のサブレイアウトをグリッドに複数回含め、そのうちの 1 つのサイズを変更すると、すべてのサブレイアウトのサイズが自動的に変更されます。 これが望ましい動作でない場合は、各サブレイアウトの名前を一意の名前に変更します。  |
ウィジェットの上部にある (永続タブの属性
カスタム ページとカスタム ウィジェット内のタブを永続的に設定するには、カスタム レイアウトで md-tabs の属性を入力します。
例: タブを永続的に設定
{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "コンテナ内のすべてのタブの一意の ID" }, }|
財産 |
説明 |
|---|---|
|
選択を持続する |
|
|
タブ ID |
コンテナー内のすべてのタブの一意の識別子。 |
md-tabs を永続的 (persist-selection: true) に設定すると、エージェントがデスクトップ内のページまたはウィジェットを切り替えても、Agent Desktop はタブ選択を保持します。
-
persist-selectionプロパティは、補助情報ペインとエージェント パフォーマンス統計レポート ページのタブには適用されません。これは、永続的なタブの動作がすでにデスクトップで設定されているためです。 - デスクトップからサインアウトしたり、ブラウザを再読み込み/更新したり、ブラウザのキャッシュをクリアしたりすると、タブの選択はデフォルトのタブにリセットされます。
永続ウィジェットの設定
任意のカスタム ウィジェットを永続的に設定できます。 永続ウィジェットはデスクトップのすべてのページに表示されます。 永続的なウィジェットは、アクティブな連絡先リクエストまたは会話がある場合にのみ、補助情報ペインに新しいタブとして表示されます。 たとえば、 サンプル永続 ウィジェット。
永続ウィジェットは、他のページに表示されるのと同じようにはホーム ページには表示されません。 ただし、アクティブなインタラクションがある場合は、永続的なウィジェットがホーム ページの補助情報ペインの一部として表示されます。 たとえば、通話に応答すると、インタラクションコントロールペインが表示され、 サンプル永続 ウィジェットは補助情報ペインの一部として表示されます。
例：
"area": { "persistent": [{ "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": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "ウィジェット 2 のコンテンツ" }, "wrapper": { "title": "ウィジェット 2 のタイトル", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } } }] } ] }ウィジェットをカスタマイズするときは、次のいずれかのオプションを選択できます。
-
Iframe 内に埋め込むことができる Web ページ上でアプリケーションをホストします。
-
カスタム ウィジェットを構築します。
技術的なウィジェットの要件については、 デスクトップウィジェット開発ドキュメント。 レイアウト エディターとして、次の詳細があることを確認してください。
-
カスタム HTML 要素 (Web コンポーネントとも呼ばれます) の名前は何ですか?
-
JavaScript バンドルをホストするコンテンツ配信ネットワーク (CDN) ソースへの URL は何ですか?
ヘッダーウィジェット
ヘッダーは、インライン情報を表示したり、ドロップダウン メニューを追加したりするために使用されます。 ヘッダー コンテナーの垂直方向のスペースは限られているため、ヘッダー全体の高さは 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-tooltip コンポーネントをラップします。 [ メッセージ ] プロパティにツールチップ情報を入力します。
例：
"header": { "id": "dw-header", "Widgets": { "head1": { "Comp": "md-tooltip", "attribute": { "message": "Netlify" }, "子ども": [{ "COMP": "Agentx-wc-iframe", "属性": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }スタイル属性 display および height を追加して、ヘッダーを表示します。 height 属性の最適値は 64 ピクセルです。
既存のヘッダーウィジェットにスタイル属性を追加して、iFrame 内で期待どおりにロードされるようにしてください。
例：
"head1": { "Comp": "Agentx-wc-iframe", "attribute": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "height:64px;display:flex;" } },ヘッダーの高さは 64 ピクセルしかないため、ヘッダーには単一の行と複数の列を使用することをお勧めします。 配置の詳細は、 レイアウトプロパティの セクションを参照してください。
補助情報ペイン
デスクトップの [補助情報] ペインは、Cisco が提供するデフォルトのウィジェットおよびカスタムウィジェットを含むタブを表示します。 以下の Cisco 提供のウィジェットが、定義済みのタブに表示されます。
-
問い合わせの履歴
-
IVR トランスクリプト
-
カスタマー エクスペリエンスのジャーニー
-
スクリーンポップアップ
[補助情報] ペインを使用して、次のことができます。
-
タブを追加する
-
タブオーダーを変更する
-
定義済みのタブを削除する
-
カスタムタブをドラッグ可能としてマークする
-
カスタム タブにツールチップを追加する
-
タブの順序をリセット オプションを追加
例：
"パネル": { "Comp": "md-tabs", "attribute": { "クラス": "ウィジェットタブ" }, "子供": [{ "Comp": "md-tab", "属性" : { "スロット": "タブ", "クラス": "ウィジェットペインタブ" }, "子供": [{ "計算": "スロット", "属性": { "名前": "CONTACT_HISTORY_TAB" } }] }, { "Comp": "md-tab-panel", "attribute": { "slot": "パネル", "class": "ウィジェットペイン" }, "子供": [{ "Comp" : "slot", "attribute": { "name": "CONTACT_HISTORY" } }] }, { "Comp": "md-tab", "attribute": { "slot": "tab", "class": "ウィジェットペインタブ" }, "子供": [{ "COMP": "md-icon", "属性": { "名前": "pop-out_16" } }, { "COMP": "span", "textContent": "スクリーンポップ" } ], "visibility": "SCREEN_POP" }, { "Comp": "md-tab-Panel", "attribute": { "slot": "Panel", "class" : "ウィジェットペイン" }, "子供": [{ "Comp": "#SCREEN_POP" }], }, { "Comp": "md-tab", "attribute": { "slot": "tab" }, "子供": [{ "Comp": "md-icon", "attribuates": { "name": "emeticons_16" } }, { "Comp": "span", "textContent": "カスタムウィジェット" } ] }, { "Comp": "md-tab-Panel", "トリビュート": { "スロット": "パネル" }, "子": [{ "コンプ": "ダイナミックエリア", "プロパティ": { "エリア": { "ID": "dw-パネルツー", "Widgets": { "Comp1": { "Comp": "agentx-wc-iframe", "attribute": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame ", "maximizeAreaName": "app-maximize-eria" } }, "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] } } } }] } ] },管理ポータルでカスタマー エクスペリエンス管理メトリックを有効にした後、カスタマー エクスペリエンス ジャーニー ウィジェットを設定できます。
[補助情報] ペインで、カスタムウィジェットを配置する新しいタブを追加します。 特別なルールは適用されません。コンポーネントのネストは 子供 セクションで説明されているとおりです。 詳細については、[ 子供 ] ページのプロパティを参照してください。
タブヘッダーをカスタマイズする具体的な例を次に示します。
子どもプロパティにアイコンとラベルを配置する例
{ "Comp": "md-tab", "属性": { "スロット": "tab", "クラス": "ウィジェットペインタブ" }, "子供": [{ "Comp": "md- icon", "attribuates": { "name": "transscript_16" } }, { "comp": "span", "textContent": "My Widget Tab" } ], },画像 (CSS 使用) とラベルを子プロパティに配置する例
{ "Comp": "md-tab", "attribute": { "slot": "tab" }, "子供": [{ "Comp": "span", "attribute": { "style": "align -items: center; display: Flex; - }, "子供": [{ "Comp": "img", "attribute": { "src": "http://my-cdn.com/icon.svg", "width": 16, "height": 16, "style": "margin-right: 0.5rem;" } }, { "comp": "span", "textContent": "マイウィジェットタブ" } }], },[補助情報] ペインに複数のタブがある場合、 その他のタブ ドロップダウンリストは自動的に表示されます。
読みやすさとアクセシビリティのために、カスタム タブのツールチップを追加する必要があります。 カスタムタブのツールチップを追加するには、コンポーネントを md-tooltip で囲みます。 [ メッセージ ] プロパティにツールチップ情報を入力し、次の例に示すように [ スタイル ] プロパティの値を適用します。
"Comp": "md-tooltip", "attribute": { "class": "Widget-tabs", "message": "サンプルタブ 1", "style": "max-width: 252px; Min-width: 110px; オーバーフロー: 非表示; テキストオーバーフロー: 省略記号; 余白: 折り返しなし; ディスプレイ: インラインブロック; 下余白: -10px;" },カスタムタブでは、最大で 252 ピクセル、最小で 110 ピクセルの幅をおすすめします。
カスタムタブ内でドラッグアンドドロップの機能を有効にするには、次のプロパティを 属性:
"Comp": "md-tabs", "attribute": { "class": "Widget-tabs", "draggable": true, "Comp-unique-id": "sample-dynamic-custom-tabs" },-
ドラッグ可能: 次の項目を設定します。ドラッグ可能プロパティ値 true。 -
コンポーネント固有 ID処置: コンポーネントを識別する固有の値を入力します。例：
"Comp-unique-id": "sample-dynamic-custom-tabs"
カスタムタブでドラッグアンドドロップを有効にすると、エージェントは [補助情報] ペイン内の必要な位置にタブをドラッグアンドドロップできます。 タブをデフォルトのタブの順序にリセットするには、次のプロパティを追加します。
"COMP": "Agentx-wc-more-actions-Widget", "attribute": { "スロット": "settings", "class": "ウィジェットペイン", "tabs-unique-id": "サンプル-ダイナミックカスタムタブ" },-
Agentx-wc-more-actions-Widget: として表示されているコンポーネントを その他のアクション (
) アイコンを [補助情報] ペインに表示します。 -
lot="settings"として表示されるコンポーネント内の属性を入力します。 タブの順序をリセット オプションの その他のアクション ドロップダウンリストをクリックします。 エージェントは、[補助情報] ペインのタブを既定の順序にリセットできます。 > タブの順序をリセット。 -
tabs-unique-id: に定義されているのと同じ固有値を入力してください。コンポーネント固有 IDプロパティを使用して、md-tab表示されます。
次のサンプルコードでは、 その他のアクション および タブの順序をリセット 機能します。
"COMP": "Agentx-wc-more-actions-Widget", "attribute": { "スロット": "settings", "class": "ウィジェットペイン", "tabs-unique-id": "サンプル- dynamic-custom-tabs" }, "子供": [{ "comp": "div", "attribute": { "textContent": "カスタムアクション", "slot": "custom-action" }, "子供" : [{ "Comp": "Agentx-wc-notes-header-Widget" }, { "Comp": "Agentx-wc-menu-notification" } ] }], }
既定では、定義済みタブのツールチップ、省略記号アイコン、タブ オーダーのリセットが定義されています。
[その他のアクション] ドロップダウンリストを拡張して、 タブの順序をリセット の後にカスタムコンポーネントやウィジェットを追加することができます。オプションを選択します。 以下は、追加コンポーネントに適用できる style プロパティ値のサンプルセットです。
"Comp": "md-tooltip", "attribute": { "class": "Widget-tabs", "message": "サンプルの要素", "style": "最大幅: 252px; 最小幅: 110px ; オーバーフロー: 非表示; テキストのオーバーフロー: 省略記号; 余白: 折り返しなし; 表示: インラインブロック; 下余白: -10px;" },
ドラッグアンドドロップ機能は、 [その他のアクション] ドロップダウンリストに追加された追加のカスタムコンポーネントまたはウィジェットではサポートされていません。
ヘッドレス ウィジェット
ヘッドレス セクションでは、Agent Desktop パネル上に表示されたり非表示になったりするウィジェットを追加できます。 これらのウィジェットは、バックグラウンドでロジックを実行するために使用されます。 このセクションは、デスクトップで発生するイベントをトリガーし、ウィジェット固有のロジックを実行する場合に役立ちます。 たとえば、着信時に SMS のカスタム CRM スクリーン ポップを開くなどです。
例：
"headles":{ "id":"headles", "Widgets":{ "Comp1":{ "Comp":"headles-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":{ "領域":[ [ "Comp1", comp2" ]], "size": { "cols": [1, 1]、"rows": [1] } } }
デスクトップからウィジェットへのデータ共有
カスタム ウィジェット内のプロパティまたは属性を通じてリアルタイム データを受け取るには、レイアウト JSON 構成で適切な ストア値を指定します。
さらに、JavaScript SDK サブスクライバーを通じてデータにアクセスするために、プロパティまたは属性を通じてデータを渡すこともできます。 プロパティや属性の変更に反応するようにコンポーネントが構築されている場合、データプロバイダと呼ばれる Agent Desktop からリアルタイムのデータ更新を取得します。
現在、キー ストアの下に単一のデータ プロバイダーがあります。 詳細については、 データプロバイダ—ウィジェットのプロパティと属性 のセクションを参照してください Cisco Webex Contact Center デスクトップ開発者ガイド。
キャンペーン通話のプレビュー
管理者は、キャンペーンを作成し、ダイヤルモード (プレビュー) を設定し、キャンペーンをチームに割り当てます。 エージェントが、キャンペーンが割り当てられているチームの一部である場合、エージェントは、アウトバウンド プレビュー キャンペーン コールを行うことができます。 詳細については、 Webex コンタクトセンターで音声アウトバウンドキャンペーンモードを設定するを参照してください。
管理者はカスタムレイアウトで以下を設定し、エージェントのプレビュー キャンペーン連絡先を有効にします。
キャンペーンの連絡先
管理者は、カスタムレイアウトのヘッダーコンテナーに [キャンペーン連絡先] ウィジェットを追加します。 キャンペーンの連絡先は、定義されたプロパティに基づいて顧客の連絡先情報を表示します。 レイアウトの配置に関する詳細は、 ページ プロパティの詳細 表の レイアウトプロパティ 行を参照してください。
例：
"advancedHeader": [ { "Comp": "Agentx-preview-キャンペーン", "properties": { "isCampaignManagementEnabled": "$store.agent.isCampaignManagementEnabled", "agenAgentId", " lcmUrl": "$store.gent.lcmUrl", "isCallInProgress": "$store.gentContact.isActiveCall", "outdialEntryPointId": "$store.agent.outDialEp", "teamId": "$store.agent.getAcqueonTeamId", "CampaignManagerAdditionalInfo": "$store.agenManagerAdditionalInfo", "orgId": "$store.gent.orgId", "dialerProxyHost": "$store.envVariables.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$store. app.featuresFlags.isProgressiveCampaignEnabled" } }, { "Comp": "gentx-webex" }, { "Comp": "gentx-outdial" }, { "Comp": "gentx-notification" }, { "Comp": "Agentx-state-Selector" } ] 通話ガイド
デスクトップの [補助情報] ペインに、 通話ガイド ウィジェットが表示されます。 通話ガイドには、キャンペーン レベルでの質問と回答が表示されます。 エージェントは通話ガイドの質問に目を通し、回答を送信するように求められます。
例：
"パネル":{ "Comp":"md-tabs", "attribute":{ "クラス":"ウィジェットタブ" }, "子供":[ { "Comp":"md-tab", "属性" :{ "slot":"tab", "クラス":"ウィジェットペインタブ" }, "子供":[ { "Comp":"md-icon", "attribute":{ "name":"icon -note_16" } }, { "Comp":"span", "textContent":"コールガイド" } ], "visibility":"CALL_GUIDE" }, { "Comp":"md-tab-Panel", "attribute ":{ "slot":"パネル", "class":"ウィジェットパネル" }, "子供":[ { "Comp": "電話会議ガイド", "script": "http://localhost:5555//index.js", / / ここに CDN リンクを含める "wrapper":{ "title":"通話ガイド", "maximizeAreaName":"app-maximize-eria" }, "properties":{ "lcmKey":"$store.gentContact.getCallGuideProps.LCMKey ", "gentDbId":"$store.gent.acqueonAgentId", "lcmUrl":"$store.agent.lcmUrl", "CampaignManagerAdditionalInfo":"$store.gent.company. orgId", "dialerProxyHost": "$store.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$store.app.featureFlags.isProgressiveCampaignEnabled" } } ], "visibility":"CAL L_GUIDE" } ] }- 次の
コンププロパティ参照が変更されました。エージェント xプロパティ値の の が置換されますアクウェン:Agentx-preview-キャンペーンの名称が変更されました:acqueon-preview-キャンペーンAgentx-call-guideの名称が変更されました:acqueon-call-guide
- CDN でリストおよび キャンペーン マネージャー (LCM) を主催し、
スクリプト表示されます。
スクリーンポップアップ
デスクトップレイアウトで、次のいずれかの方法でスクリーンポップを設定できます。
-
カスタムページとして
-
カスタムページのウィジェットの 1 つとして
-
[Auxiliary Information]ペインのタブとして
スクリーン ポップは、以下の要因に基づいてデスクトップに表示されます。
音声チャネルの場合:
-
デスクトップレイアウトで定義された構成
-
フロー デザイナーで定義されたスクリーン ポップ アクティビティ
新しいデジタル チャネル:
-
デスクトップレイアウトで定義された構成
-
Connect Flow Builder で定義されたスクリーンポップノード
スクリーンポップの設定についての詳細は、次を参照してください。 スクリーンポップ。
ナビゲーションバーのスクリーンポップを設定する
スクリーンポップは、カスタムページとして、またはカスタムページのウィジェットの 1 つとして構成できます。 スクリーンポップのカスタムページにアクセスするには、 スクリーンポップ アイコンを選択します。 カスタムページのスクリーンポップウィジェットにアクセスするには、ナビゲーションバーのカスタムアイコンをクリックします。 詳細については、 ナビゲーション プロパティ、を参照してください。 ナビゲーション (カスタムページ)。
例: カスタムページとしてのスクリーンポップ
{ "nav": { "label": "スクリーンポップ", "icon": "pop-out", "iconType": "momentum", "navigateTo": "/screenpop", "align": "top" }, "page": { "id": "gentx-wc-screen-pop", "Widgets": { "Comp1": { "Comp": "agentx-wc-screen-pop", "properties": { " screenPopUrl": "$store.session.screenpop.screenPopSelector" } } }, "layout": { "領域": [ ["COMP1"] ], "size": { "cols": [1], "rows" : [1] } } }, "表示設定": "SCREEN_POP" }例: カスタムページのウィジェットとしてのスクリーンポップ
"comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" }フロー デザイナーでスクリーン ポップが構成されていない場合、カスタム ページは空白で表示されます。 フロー デザイナーでスクリーン ポップを構成する方法の詳細については、「 スクリーン ポップ」を参照してください。
補助情報ペインでのスクリーンポップの設定
スクリーン ポップを補助情報ペインのタブとして表示するように設定できます。
デフォルトでは、スクリーン ポップがフロー デザイナーで デスクトップ内 として表示されるように構成されている場合、スクリーン ポップは [補助情報] ペインの スクリーン ポップ タブに新しいサブタブとして表示されます。
スクリーン ポップを補助情報ペインのタブとして含めるには、 panel セクションに次の属性を追加します。 パネルの詳細については、「補助情報ペイン」を参照してください。
例: 補助情報ペインのタブとしてのスクリーンポップ
{ "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" } ], }フロー デザイナーで定義されたスクリーン ポップ表示オプションは、デスクトップ レイアウトで定義された構成よりも優先されます。
たとえば、次のスクリーン ポップ設定を構成したとします。
- フローデザイナー - 表示設定を 新しいブラウザタブで
- デスクトップレイアウト - 補助情報ペインのタブとして
スクリーン ポップが設定されているイベントが発生すると、スクリーン ポップはデスクトップの外側、つまり新しいブラウザ タブに表示されます。
サンプルユースケース例
ナビゲーション バーからカスタマー エクスペリエンス管理メトリック ウィジェットを構成してアクセスする
例：
{ "nav": { "label": "カスタマーエクスペリエンス管理メトリクス", "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": "カスタマーエクスペリエンスジャーニー", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } } },spaceId と metricsId を取得するには、 Webex Experience Management ドキュメントを参照してください。
カスタムページでのタブの使用
例：
{ "nav": { "label": "ダイナミックタブ", "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": "2 つのコンテンツ", "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": "カスタマーエクスペリエンスジャーニー", "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" }, },ローカリゼーション
次の言語がサポートされています。
ブルガリア語、カタロニア語、中国語（中国）、中国語（台湾）、クロアチア語、チェコ語、デンマーク語、オランダ語、英語英語（イギリス）、英語（米国）、フィンランド語、フランス語、ドイツ語、ハンガリー語、イタリア語、日本語、韓国語、ノルウェー語、ポーランド語、ポルトガル語ポルトガル語（ブラジル）、ポルトガル語（ポルトガル）、ルーマニア語、ロシア語、セルビア語、スロバキア語、スロベニア語、スペイン語、スウェーデン語、トルコ語。
デスクトップ UI の言語は、ブラウザの言語設定に基づきます。 たとえば、Firefox ブラウザで優先言語をフランス語として選択したとします。 Firefox ブラウザでデスクトップを起動すると、デスクトップ UI が Français (フランス語) で表示されます。 ただし、デスクトップ レイアウトに追加された水平ヘッダー、ナビゲーション バー、その他のコンポーネントは、ブラウザーの言語設定に基づいてローカライズされません。
デスクトップコンポーネントのローカライズ
デスクトップコンポーネントをローカライズするには、
-
既存のローカリゼーションキーを使用する
アプリ.jsonファイル。 ローカリゼーション キーが設定されていない場合は、デフォルトの言語である英語 (米国) が使用されます。 シスコサポートにサービスリクエストを送信して、ローカリゼーションキーを追加することができます。アプリ.jsonファイル。例: ローカリゼーションキー
{ "common": { "buttonTitle": "タイマーを停止" } } -
デスクトップレイアウト JSON ファイルで以下の大文字と小文字を区別するプロパティを入力して、コンポーネントをローカライズします。
"textContent": "$I18N.<key>",<key> は
app.JSONファイル中の対応するローカリゼーションキーを参照します。
例: ヘッダー コンポーネントのローカライズ
"header": { "id": "header", "Widgets": { "head1": { "Comp": "md-button", "attribute": { "slot": "menu-trigger", "style ": "height: 64px" }, "子供": [{ "Comp": "span", "textContent": "$I18N.common.buttonTitle", } }, }, }例: 補助情報ペインのローカライズタブコンポーネント
"パネル": { "COMP": "md-tab", "attribute": { "スロット": "tab" }, "子供": [{ "Comp": "span", "textContent": "$I18N .panelTwo.screenPopTitle" }] }
