- ホーム
- /
- 投稿記事
コメントありがとうございます。
カスタムデスクトップレイアウトを作成する
この記事の内容
フィードバックがある場合この記事では、JSON ファイルを編集してカスタムレイアウトを作成する方法を説明し、顧客体験管理指標ウィジェットや顧客体験ジャーニーウィジェットなどのウィジェットを使い始めるのに役立つ使用例を紹介します。 カスタムデスクトップレイアウトを効果的に扱うには、HTML 構造、ブラウザにおけるドキュメントツリーモデル、および JSON 形式についてしっかりとした理解が必要です。
概要
デスクトップレイアウト機能を使用すると、ビジネス要件に合わせて Webex Contact Center デスクトップを構成できます。 ロゴ、タイトル、ウィジェットなどの要素をカスタマイズできます。 デスクトップレイアウトを作成し、それをチームに割り当てることができます。 このレイアウトは、そのチームの一員としてログインするすべてのエージェントに対して、デスクトップ上でエージェントエクスペリエンスを生成します。
レイアウトには 2 種類あります。
-
グローバルレイアウト：このレイアウトはシステムによって生成されるレイアウトで、チームを作成する際にデフォルトで割り当てられます。 詳細については、以下を参照してください。 チームを管理する。 チームを作成すると、グローバルレイアウトが自動的にチームのデスクトップレイアウトとして設定されます。 このレイアウトは削除できません。
-
カスタムレイアウト：デスクトップ環境をカスタマイズできるレイアウト。 1 つまたは複数のチーム向けにカスタムレイアウトを作成できます。
エージェントがログインしているときに新しいデスクトップレイアウトを割り当てた場合、エージェントは新しいレイアウトを表示するためにページを再読み込みする必要があります。
Webex Contact Center デスクトップは、3 つのペルソナをサポートしています。
-
エージェント（Agent）
-
スーパーバイザ（Supervisor）
-
監督者と代理人
JSON レイアウトファイルには、各ペルソナごとに個別のセクションがあります。 管理者は、JSON レイアウトファイルの該当セクションで、各ペルソナの設定を構成する必要があります。 サンプル JSON レイアウトファイルの詳細については、以下を参照してください。 JSON レイアウトのトップレベルプロパティ。
Cisco がデスクトップレイアウトに新機能を追加すると、変更されていないレイアウトも自動的に新機能で更新されます。 更新されたデスクトップレイアウトは、変更されていないデスクトップレイアウトを使用している既存のチームにも自動的に提供されます。 変更されていないデスクトップレイアウトを使用しているデスクトップユーザは、ログイン時またはブラウザを再読み込みした際に、新しいレイアウトベースの機能を利用できるようになります。
もしあなたが デフォルトのデスクトップレイアウト.json ファイルが一切変更されていない場合、それは未変更のレイアウトとみなされます。 ただし、ダウンロードすると デフォルトのデスクトップレイアウト.json ファイルの内容やファイル名が変更されていなくても、ファイルを再度アップロードすると、レイアウトが変更されたとみなされます。
カスタム デスクトップ レイアウトを使用するチームの場合、管理者は新しい機能を組み込むためにレイアウト定義を定期的に更新する必要があります。 管理者が変更されていないレイアウトまたは変更されていないレイアウトを使用するチームを表示すると、新しいデスクトップ機能が自動的に適用されたことを示すメッセージが表示されます。
デスクトップ版には、iframe ベースのウィジェットと Web コンポーネントベースのウィジェットの 2 種類があります。 デスクトップにおけるカスタマイズ可能な領域は、ヘッダー、ナビゲーション（カスタムページ）、パーシステントエリア、ヘッドレスエリア、および補助パネルです。 これらはウィジェットではありません。
以下に、設定可能なスペースの詳細を示します。 この画像はデスクトップのレイアウトを示しています。
-
タイトルとロゴエリア：このスペースには、画面の左上隅に Webex Contact Center のロゴと名前（デフォルト）が表示されます。
-
水平ヘッダー エリア：このスペースには、カスタムウィジェットを配置できる設定可能なエリアがあります。 これらのウィジェットは、例えば、インライン情報やドロップダウンメニューを表示できます。 このヘッダーの高さはわずか 64 ピクセルなので、ウィジェットの高さはヘッダーの高さを超えることはできません。
-
ワークスペース エリア：このスペースは、ナビゲーションバーでの選択内容や、エージェントが顧客とやり取りしている状況に応じて変化します。 エージェントが通話中の場合、この領域にはインタラクション制御と補助情報ペイン（カスタムウィジェットと永続ウィジェットを含む）が表示されます。 エージェントがメール、チャット、またはソーシャルチャネルでやり取りしている場合、この領域にはワークスペース領域と補助情報ペイン（永続ウィジェット領域を含む）が表示されます。
カスタムページ デスクトップインターフェースのワークスペースペインに表示されます。 ナビゲーションバーのアイコンからカスタムページにアクセスできます。 各カスタムページには、1 つ以上のカスタムウィジェットを含めることができます。
カスタムウィジェット これは、JSON 形式で構成されたサードパーティ製アプリケーションです。 カスタムウィジェットは、カスタムページ、カスタム Tab（補助情報ペイン）、またはデスクトップの水平ヘッダーに配置できます。
-
ナビゲーションバー エリア：このスペースを使用して、カスタムページにアクセスするためのナビゲーション項目を追加します。
JSON レイアウトのトップレベルプロパティ
[ロール（Roles）]
デフォルトの JSON レイアウトには、以下の 3 つの役割があります。
-
エージェント—エージェントがエージェントのアクティビティを処理するために 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, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "ナビゲーション": { ... }、"持続的"：{ ... }, "headless": { ... } }, }, "supervisor": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "ナビゲーション": { ... }、"持続的"：{ ... }, "headless": { ... }, "homePage": { ... } }, } "supervisorAgent": { "version": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... }, "panel": { ... }, "ナビゲーション": { ... }、"持続的"：{ ... }, "headless": { ... } }, } },- JSON レイアウトプロパティに加えられた変更は、デスクトップブラウザを更新したときに有効になります。
- JSON レイアウトで有効にした機能がデスクトップで利用できない場合は、Cisco サポートに連絡して機能を有効にしてください。
- JSON レイアウト内のすべてのプロパティは、大文字と小文字を区別します。
アプリタイトル
デスクトップの水平ヘッダーにタイトルを指定するには。 デフォルトのタイトルは Webex Contact Center。
例：
"appTitle": "Webex Contact Center"デフォルトのアプリタイトルは次のように変更されます コンタクトセンターデスクトップ に Webex Contact Center。 古いデフォルトの appTitle を使用する既存のカスタムレイアウトには影響はありません (コンタクトセンターデスクトップ) 新しいアプリタイトルを使用するには、カスタムレイアウトを変更する必要があります。 しかし、新しいグローバルレイアウトでは、デフォルトの appTitle を次のように使用します。 Webex Contact Center。
タイトルは、テキスト、画像、または空の文字列のいずれかになります。 タイトルテキストは 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 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 高さ）です。
| 条件 | 例 | アプリタイトル | ロゴ |
|---|---|---|---|
| appTitle とロゴが設定されていない場合 |
|
タイトルなし | デフォルトのロゴ |
| appTitle とロゴが設定されている場合 |
|
設定済みテキスト | 設定済みロゴ |
| appTitle が設定されていて、logo が設定されていない場合 |
|
設定済みテキスト | デフォルトのロゴ |
|
appTitle が設定されておらず、logo が設定されている場合
|
|
タイトルなし | 設定済みロゴ |
| appTitle が設定されていて、ロゴが優先されない場合 |
|
設定済みテキスト | ロゴなし |
|
appTitle が設定されておらず、ロゴが優先されない場合
|
|
タイトルなし | ロゴなし |
| appTitle が画像として追加され、ロゴが設定されている場合 |
|
設定済みイメージ | 設定済みロゴ |
|
appTitle が画像として追加され、ロゴが設定されていない場合
|
|
設定済みイメージ | デフォルトのロゴ |
|
appTitle が画像として追加され、ロゴが推奨されない場合
|
|
設定済みイメージ | ロゴなし |
- カスタム画像のサイズは、アスペクト比に基づいて調整されます。 先に設定したカスタムタイトルテキストが、デスクトップ上で 2 行に表示されるようになりました。 これを回避するには、カスタムタイトルのテキストを修正してください。
- デスクトップの水平ヘッダーにタイトルとロゴが設定されていない場合、そのスペースはヘッダーウィジェットによって使用されます。 タイトルとロゴのスペースを使用するには、ヘッダーウィジェットを正しく設定する必要があります。
- タイトルとロゴを合わせた最大幅は 304 ピクセル（パディングを含む）を超えてはなりません。 ロゴの幅が 96 ピクセル未満の場合、残りの幅をタイトルに使用できます。
- カスタム画像のサイズがサポートされているサイズよりも大きい場合、画像のサイズは水平ヘッダーの縦横比に基づいて調整されます。 カスタム画像のサイズがサポートされているサイズよりも小さい場合、水平ヘッダーには実際の画像サイズが保持されます。
タスクページイラスト
組織の好みやブランドイメージに合わせて、タスクページに独自のイラストを指定する。 エージェントがサインインすると、タスク ページに、構成されたイラストが背景として表示されます。 デフォルトでは、タスクページにはイラストは表示されません。
例：
"taskPageIllustration": "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×400 ピクセル（幅×高さ）です。 カスタムイラストのサイズが推奨サイズよりも大きい場合、タスクページの縦横比に基づいてイラストのサイズが調整されます。 カスタムイラストのサイズが推奨サイズよりも小さい場合、タスクページでは実際のイラストサイズが保持されます。
stopNavigateOnAcceptTask
エージェントが以前のタスクに取り組んでいる最中に新しいタスクを受諾した場合に、そのタスクに焦点を移すかどうかを判断する。 デフォルト値は 間違い。
例：
"stopNavigateOnAcceptTask": false値が次のように設定されている場合 真実ユーザがデスクトップ上で新しいタスクを承認しても、フォーカスは前のタスクに保持され、新しく承認したタスクには移動しません。 この設定により、ユーザが新しいリクエストを承認する際にデータが失われるのを防ぎます。
例えば、エージェント 1 が顧客 1 とチャットしながら、同時に顧客 2 と音声通話をしているとします。音声通話中に、エージェント 1 はインタラクションコントロールペインで顧客 2 の詳細を更新しています。 現在、エージェント 1 のタスクリストペインには 2 つのアクティブなタスクがあり、現在はインタラクションコントロールペインにフォーカスが当たっています。 エージェント 1 が顧客 3 からの新しいチャットリクエストを承認しても、フォーカスは顧客 2 とのやり取りを制御するペインに留まり、新しく承認されたチャットリクエストには切り替わりません。
前のタスクに集中し、新しく受け入れたタスクに切り替えないようにするには、カスタムレイアウトを選択します。 stopNavigateOnAcceptTask プロパティ値は次のように設定されています 真実。
stopNavigateOnAcceptTask プロパティの値が JSON レイアウトに入力されていない場合、デスクトップは新しく承認されたタスクにフォーカスを移動します。 この動作は、 stopNavigateOnAcceptTask プロパティの値が false に設定されている場合と同様です。
- この設定は、タスクの受諾、会議、相談、転送など、デスクトップ上で実行されるすべてのタスク（音声およびデジタルチャネル）と、発信通話、発信キャンペーン通話、自動ラップアップなどに適用されます。
- デスクトップユーザが Home ページにアクセスしていて、タスク リスト ペインにアクティブなタスクがない場合、この設定は適用されません。 このような場合、新しいタスクが承認されると、フォーカスは Home ページから新しく承認されたタスクに移ります。
ドラッグ＆ドロップ有効
カスタムページ上のウィジェットのドラッグアンドドロップとサイズ変更を有効にするには、値を trueに設定します。 デフォルト値は falseです。
例：
「dragDropEnabled」: false補助情報ペインのタブでドラッグアンドドロップ機能を有効にする方法の詳細については、「補助情報ペイン」を参照してください。
通知タイマー
デスクトップ上のデスクトップ通知が自動的に消去されるまでの時間（秒単位）を設定します。 通知はデスクトップの右上隅に表示されます。 デフォルトのタイムアウト値は 8 秒です。 タイムアウト値の有効範囲は 1～10 秒です。 タイムアウト設定の変更を有効にするには、変更後にブラウザを更新する必要があります。
例：
「notificationTimer」：8最大通知数
デスクトップに一度に表示するデスクトップ通知の数を設定します。 デフォルト値は 3 です。デスクトップ通知の件数範囲は 1～10 です。 デスクトップ通知が積み重ねて表示されます。 通知が多数ある場合、 notificationTimer の設定に応じて、若干の遅延が発生します。
例：
「maximumNotificationCount」：3ブラウザ通知タイマー
デスクトップ上のブラウザのトースター通知が自動的に消えるまでの時間（秒単位）を設定します。 Toaster は、デスクトップがアクティブなブラウザ ウィンドウでない場合にのみ表示されるネイティブのブラウザ通知です。 デスクトップブラウザウィンドウまたは Tab が非アクティブの場合
-
他のブラウザウィンドウまたはタブで作業しています。
-
他のアプリケーションで作業しています。
-
デスクトップブラウザのウィンドウが最小化されました。
通知はデスクトップの右上隅に表示されます。 デフォルトのタイムアウト値は 8 秒です。 タイムアウト値の推奨範囲は 5～15 秒です。 タイムアウト設定の変更を有効にするには、変更後にブラウザを更新する必要があります。
例：
"browserNotificationTimer": 8ブラウザ通知のタイムアウト設定値は、オペレーティングシステムとブラウザの設定によって異なります。 タイムアウト値は、Windows OS、Chrome OS、および macOS の Chrome ブラウザで適用されます。 ただし、サポートされている他のブラウザは、構成された通知タイムアウト値を一貫して尊重しません。
wxmConfiguled
（オプション）Webex Experience Management を設定するには、値を true に設定します。 デフォルト値は falseです。
例：
"wxmConfigured": trueデスクトップチャットアプリ
Tab アプリなど、Cisco が提供する複数のチャット アプリケーションを設定するには。
webex 設定済み
Webex アプリとそのメッセージング機能および会議機能は、デスクトップ内で設定できます。 この構成により、エージェントはデスクトップから離れることなく、組織内の他のエージェント、スーパーバイザー、および分野専門家（SME）と共同作業を行うことができます。
- サイト管理者は、Webex ミーティングのユーザを管理し、ユーザが Webex Enterprise Edition を所有している場合にのみ権限を割り当てます。 詳細については、 Cisco Webex Control Hub の Webex Meetings ユーザの管理 を参照してください。
- 管理者と中小企業は、システム（個人用デバイス）に Webex クライアントをダウンロードするか、Web 用 Webex アプリ ( https://web.webex.com/) を使用して Webex アプリにアクセスする必要があります。 詳細については、 アプリをダウンロードをご覧ください。
- Webex 内から Webex アプリにアクセスすることで、Agent Desktop から離れることなく、組織内の他のエージェント、スーパーバイザー、および主題専門家 (SME) と共同作業を行うことができます。 通話制御機能は利用できません。 通話の発信と受信には、外部の非組み込み型 Webex アプリが必要です。 詳細については、「Calling Apps」を参照してください。
デスクトップ内で Webex アプリを設定するには：
-
Cisco Webex Control Hub で、ユーザにサービスを追加する場合は、[高度なメッセージング] チェックボックス ([ユーザ] > [ユーザの管理] > [サービス] > [メッセージング]) を選択します。 詳細については、Cisco Webex サイト管理の「ユーザ アカウントの管理」を参照してください。
-
カスタムデスクトップレイアウトで、
webexConfiguredプロパティの値をtrueに設定します。例：
"desktopChatApp": { "webexConfigured": true },webexConfiguredプロパティのデフォルト値はfalseです。Webex アプリは、エージェント、スーパーバイザー、スーパーバイザーエージェントの各役割に対して
webexConfiguredプロパティ値をtrueに設定した場合にのみ、これらの役割で使用できます。 エージェント、スーパーバイザー、またはスーパーバイザーエージェントは、Webex アプリからサインアウトできません。表示するには
（ Webexデスクトップの水平ヘッダーにあるアイコンに値を入力します。 Webexでヘッダーアクション財産。 詳細については、以下を参照してください。 ヘッダーアクション。特定のチームに対して Webex アプリを有効にするには、カスタムレイアウトを選択します。
webex 設定済みプロパティ値は次のように設定されています真実。 詳細については、以下を参照してください。 チームを作成する。
Webex アプリは、補助情報ペイン、カスタムページ、カスタムウィジェットでも設定できます。 詳細については、以下を参照してください。 補助情報ペイン。
Webex アプリ通知
指定された値は 通知タイマー そして ブラウザ通知タイマー 通知タイマーのプロパティは、Webex アプリに適用されます。 これらのプロパティのデフォルトのタイムアウト値は 8 秒です。 詳細については、 notificationTimer および browserNotificationTimer を参照してください。
ヘッダーアクション
デスクトップの水平ヘッダーにあるアイコンの順序を変更するには。 デフォルトの順序は以下のとおりです。
-
(Webex)
-
（発信通話） -
（通知センター）
headerActions プロパティの値を次のように設定します。
|
アイコン名 |
headerActions プロパティ値 |
|---|---|
|
Webex アプリ |
Webex |
|
アウトダイヤルコール |
発信 |
|
通知センター |
通知 |
例：
"headerActions": ["Webex", "outdial", "notification"],
headerActions プロパティの値は大文字と小文字を区別します。
アイコンのデフォルトの順序を変更するには、 headerActions プロパティとその値をカスタムレイアウトに適切に入力します。
例：
"headerActions": ["notification", "outdial", "Webex"],
- カスタムレイアウトで
headerActionsプロパティと値を入力しない場合、アイコンはデフォルトの順序で表示されます。 - デスクトップからヘッダーアイコンと関連機能を削除するには、
headerActionsプロパティ（"headerActions": []）に空の値を設定します。 ただし、Webex アプリを補助情報ペイン、カスタムページ、またはカスタムウィジェットに追加した場合、Webex アプリはデスクトップの水平ヘッダーには表示されませんが、エージェントは引き続き Webex アプリにアクセスできます。 -
webexConfiguredプロパティの値がfalseに設定されている場合、 Webex アプリ アイコンは、headerActionsプロパティにWebex値が追加されていても、デスクトップの水平ヘッダーに表示されません。 詳細については、 webexConfiguredを参照してください。
エリア
Area プロパティは、デスクトップ レイアウトの中核となる部分です。 エリアに応じてレイアウトを定義できます。
"エリア": { "ヘッダー": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "script": .... } }, "panel": { ... }, "ナビゲーション": { ... }、"持続的"：{ ... }, "headless": { ... } },以下の エリア オブジェクトを設定できます。
-
パネル：補助情報ペインの 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": { ... }, "script": .... } ] advancedHeader プロパティの値は、大文字と小文字を区別します。
アイコンのデフォルトの順序を変更するには、 advancedHeader プロパティと、それに応じた値をカスタムレイアウトに入力します。
ウィジェットは左から右へとドロップダウンメニューに流れ込みます。
-
カスタムレイアウトに
advancedHeaderプロパティを入力しない場合、デフォルトのヘッダーが表示されます。 -
高度なヘッダーが有効になっている場合は、例に従って、既存のヘッダーから高度なヘッダーにウィジェットを移動する必要があります。
-
詳細ヘッダーが有効になっている場合、古いヘッダーは表示されません。
-
すべてのウィジェットアイコンには、CSS で定義されたデフォルトのパディングとマージンがあり、デスクトップ上でカスタマイズすることはできません。
-
ロゴ、タイトル、プロフィールアイコンの位置は固定されており、カスタマイズできません。
-
デスクトップからヘッダーアイコンと関連機能を削除するには、
advancedHeaderプロパティ（"advancedHeader": []）で関連コンポーネントに空の値を設定します。Webex アプリを補助情報ペイン、カスタムページ、またはカスタムウィジェットに追加した場合、デスクトップの水平ヘッダーには Webex アプリが表示されませんが、エージェントは引き続き Webex アプリにアクセスできます。
-
長いラベルを持つウィジェットを追加すると、利用可能なスペースに応じてラベル名が切り詰められて表示されます。
属性
textContentを使用して、ウィジェットにラベルを追加できます。例：
{ "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "現在のシフトのカウントダウンタイマー", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }「現在のシフトのカウントダウンタイマー」というラベルは、利用可能なスペースに応じて切り詰められて表示されます。
-
ラベルが長いウィジェットは追加しないようにしてください。
-
ウィジェットがドロップダウンリストに移動した場合、ウィジェットのアイコンのみがクリック可能になります。
-
-
もし
webex 設定済みプロパティ値は次のように設定されます間違い、 Webex アプリ アイコンはデスクトップの水平ヘッダーには表示されません。Webex価値が加えられる高度なヘッダー財産。 詳細については、以下を参照してください。 webex 設定済み。
Home ページ
デスクトップにログインすると、Home ページが表示されます。
Home ページは、スーパーバイザーおよびスーパーバイザーエージェントのペルソナにのみ適用されます。
Home ページでは、以下のウィジェットをご覧いただけます。 アナライザーウィジェットはデフォルトで提供されますが、管理者は永続ウィジェットとカスタムウィジェットを設定することもできます。 詳細については、以下を参照してください。 JSON レイアウトのトップレベルプロパティ。
アナライザーウィジェット
デフォルトでは、アナライザーウィジェットはデスクトップの Home ページに表示されます。
Home ページレイアウト設定
デスクトップの Home ページは、組織の好みやブランドイメージに合わせてレイアウトを表示するように設定できます。 編集する ホームページ Home ページを設定するためのフィールド。 ユーザがデスクトップにサインインした際に、Home ページに表示されるように、以下のコンポーネントを設定できます。
-
歓迎メッセージ
-
の タスク ナビゲーションバーのアイコンをクリックすると、タスクペインに移動します。 の タスク 通話監視機能が有効になっている場合、スーパーバイザーおよびスーパーバイザー兼エージェントの役割に対してアイコンが表示されます。 タスクペインには、受信した顧客からのリクエスト、現在および過去の顧客とのやり取り、およびアクティブな監視リクエストが表示されます。
-
フィルターセクションには、 キュー名、 チャネルタイプ、 管理対象チームなどがあります。
次の表は、Home ページを構成するために必要な ページ プロパティについて説明しています。
|
財産 |
説明とコード |
|---|---|
|
ページ > useFlexLayout |
Flex レイアウトは新しい Web コンポーネントです。 既存のウィジェットは変更されません。 新しいフレックスレイアウトは、同じレイアウト構成フォーマットを簡略化した方法で使用します。 下位互換性があり、既存のウィジェットには影響しません。 JSON レイアウトを設定する必要があります。 JSON レイアウトを設定するには、ウィジェットの高さと幅を指定します。 ウィジェットは、JSON レイアウト内で設定された順序と同じ順序でレンダリングされます。 ウィジェットのデフォルトの余白は 8 ピクセルです。 JSON レイアウトは、ウィジェットの寸法（幅×高さ）と座標（X、Y、Z）に基づいています。 柔軟なレイアウトにより、個々のウィジェットのサイズ変更やウィジェットの最大化などの機能がサポートされます。 個々のウィジェットの高さはピクセル単位で測定されます。 高さ 1 単位＝40 ピクセル。 ウィジェットの幅は、コンテナ内の列数と、コンテナの幅に応じて変化する列数によって決まります。 ウィジェットは左から右に表示されます。 高度なレイアウトエンジンは、独自のロジックを使用してウィジェットの水平方向と垂直方向の両方のスペース調整を適用します。 最初は、レイアウトは水平方向に読み込まれます。 ウィジェットは水平方向に読み込まれた後、垂直方向に読み込まれ、スペースの利用効率が最適化されます。 画面サイズに基づいてウィジェットを設定します。 画面サイズに応じて、ウィジェットの幅を拡大または縮小できます。 これにより、ウィジェットの視認性と使いやすさが向上します。 フレックスレイアウトでは、大、中、小、極小といった標準的なブレークポイントが提供されます。
これらのピクセル数は、オペレーティングシステムやブラウザによって異なる場合があります。 |
|
ページ > 比較 |
必ず独自のカスタムコンポーネントを提供してください。 |
|
ページ > ページヘッダー |
タイトル文字列は、静的、動的、またはその両方を指定できます。
|
|
ページ > ページサブヘッダー |
デスクトップに表示されるサブヘッダーを必ず追加してください。 ユーザはサブヘッダーに アナライザーへ移動 を追加できます。
|
ナビゲーション（カスタムページ）
このセクションでは、左側のナビゲーションバーに表示されるページを追加できます。 ナビゲーションバーにウィジェットを表示させるには、ナビゲーションアイコンと固有の URL を指定します。 競合を避けるため、URL には特定の接頭辞を使用することをお勧めします。 詳細については、 nav プロパティ のセクションを参照してください。
このページには、複数のウィジェットを表示させることもできます。 ページには、画面上に表示される単一のウィジェット、またはグリッド状に配置されたウィジェットの集合を含めることができます。 グリッド配置の詳細については、 レイアウトプロパティ のセクションを参照してください。
ウィジェットツリーにダイナミックエリアラッパーを追加する必要はありません。 このオプションを有効にすると、カスタムページ上でウィジェットをドラッグ＆ドロップしたり、サイズを変更したりできるようになります。
例：
{ "nav": { "label": "カスタムページ", "icon": "stored-info", "iconType": "momentumDesign", "navigateTo": "dynamic-tabs", "align": "top", "isDefaultLandingPage": true }, "page": { "ID": "my - custom - page", "useFlexLayout": true, "widgets": { " comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "Shift Timer", "attributes": { "slot": "Tab" } }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "my - custom - timer", "source": http://my-cdn.com/my-custom-timer.js "wrapper": { { "title": "Shift Timer", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "株式市場", "responsive": "false" "attributes": { "slot": "Tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "株式市場", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "attributes": { "slot": "Tab" } }, { "comp": "md-tab-panel", "textContent": "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] } } } },以下の表は、 ナビゲーション そして ページ プロパティとその子プロパティ：
|
財産 |
説明とコード |
|---|---|
|
ナビゲーション > ラベル |
このプロパティは、ページナビゲーションの識別子を示します。 スクリーンリーダーはこのプロパティを読み上げ、ツールチップに表示します。 これらのパラメータは、カスタムページをナビゲーションバーに表示するために必要です。 の |
|
ナビゲーション > アイコンタイプ |
このプロパティは、カスタムページのナビゲーションバーに表示されるアイコンの種類を表します。 以下の種類のアイコンが利用可能です。
|
|
ナビゲーションアイコン |
このプロパティは、Momentum ライブラリ内のアイコン名、または CDN の URL を表します。 |
|
nav > align |
このプロパティを使用すると、アイコンをナビゲーションバーの上部または下部に配置できます。 現在、このプロパティでは上方向への配置のみが可能です。 |
|
nav > isDefaultLandingPage | このプロパティは、Agent Desktop 内のエージェントのデフォルトのランディングページを指定します。 このプロパティを true に設定すると、ナビゲーションバーページが、エージェントが Agent Desktop にログインした後に表示されるデフォルトのランディングページになります。 複数のナビゲーションバーページでこのプロパティが trueに設定されている場合、システムは最初のナビゲーションバーページをデフォルトのランディングページとみなします。 ナビゲーション バー ページにこのプロパティが true に設定されていない場合、Home ページがデフォルトのランディング ページとして機能します。 アナライザーおよびエージェントのパフォーマンス統計レポートをデフォルトのランディングページとして設定することはできません。 |
|
ナビ > ナビゲート |
このプロパティは、カスタムページの名前を指定します。 この名前は、エージェントがナビゲーションを行う際にアドレスバーに表示されます。 navigateTo には、images、fonts、css、build_info、help、app、i18n、icons、images-mfe-wc、sounds の値を含めてはなりません。 |
|
財産 |
説明とコード |
|---|---|
|
ページ > ID |
イン その |
|
ページ > useFlexLayout |
Flex レイアウトは新しい Web コンポーネントです。 既存のウィジェットは変更されません。 新しいフレックスレイアウトは、同じレイアウト構成フォーマットを簡略化した方法で使用します。 下位互換性があり、既存のウィジェットには影響しません。 JSON レイアウトを設定する必要があります。 JSON レイアウトを設定するには、ウィジェットの高さと幅を指定します。 ウィジェットは、JSON レイアウト内で設定された順序と同じ順序でレンダリングされます。 ウィジェットのデフォルトの余白は 8 ピクセルです。 JSON レイアウトは、ウィジェットの寸法（幅×高さ）と座標（X、Y、Z）に基づいています。 柔軟なレイアウトにより、個々のウィジェットのサイズ変更やウィジェットの最大化などの機能がサポートされます。 個々のウィジェットの高さはピクセル単位で測定されます。 高さ 1 単位＝40 ピクセル。 ウィジェットの幅は、コンテナ内の列数と、コンテナの幅に応じて変化する列数によって決まります。 ウィジェットは左から右に表示されます。 高度なレイアウトエンジンは、独自のロジックを使用してウィジェットの水平方向と垂直方向の両方のスペース調整を適用します。 最初は、レイアウトは水平方向に読み込まれます。 ウィジェットは水平方向に読み込まれた後、垂直方向に読み込まれ、スペースの利用効率が最適化されます。 画面サイズに基づいてウィジェットを設定します。 画面サイズに応じて、ウィジェットの幅を拡大または縮小できます。 これにより、ウィジェットの視認性と使いやすさが向上します。 フレックスレイアウトでは、大、中、小、極小といった標準的なブレークポイントが提供されます。
これらのピクセル数は、オペレーティングシステムやブラウザによって異なる場合があります。 |
|
ページ > ウィジェット ページ > 比較 |
カスタムウィジェットの定義に役立ちます。 複数のウィジェットを配置するには、ウィジェットのオプションを順番に指定してください。 各ウィジェットには必ず固有のエリア名を付けてください。後でレイアウトセクションで使用します。 このプロパティは、カスタム HTML 要素の名前を表します (Web コンポーネント、またはラッパーとして使用する場合はその他の要素として知られています)。 詳細については、以下を参照してください。 使用例の例。 ここにカスタム要素名を山括弧（"<" または ">"）なしで入力してください。 例えば、「my-custom-element」など。 ウィジェットセクションの各項目は、以下の形式をサポートしています。 |
|
ページ > スクリプト |
（オプション）このプロパティは、ウィジェットまたはコンポーネントを CDN などのリモートロケーションから読み込む場合にのみ必要です。 同じコンポーネントのスクリプト URL は変更しないでください。 同じコンポーネントのスクリプト URL を変更する必要がある場合は、次のいずれかの操作を行ってください。
|
|
ページ > プロパティ |
Web コンポーネントに渡す必要のあるプロパティを指定できます。 |
|
ページ > レスポンシブ |
このプロパティには、以下のいずれかの値を設定してください。
応答しないウィジェットは最適なユーザエクスペリエンスを保証できないため、小さい画面には表示されません。 エージェントは、応答しない設定になっているウィジェットを表示するために、ブラウザウィンドウのサイズを大きくする必要があります。 |
|
ページ > 属性 |
このセクションでは、Web コンポーネントの属性を指定できます。 |
|
ページ > 可視性 |
Cisco が提供するウィジェットがカスタムレイアウトのページレベルまたはコンポーネントレベルで追加された場合、それらが表示されるかどうかを指定します。 Cisco が提供するウィジェットは、連絡先履歴、Cisco Webex Experience Management, IVR トランスクリプト、プレビューキャンペーン通話ガイド、およびスクリーンポップです。
|
|
ページ > 子供 |
この物件はレイアウトの中核となる部分です。 では STORE 値をプロパティとして渡す方法については、「デスクトップからウィジェットへのデータの共有」を参照してください。 「children」配列セクションの利点は、デスクトップバンドルに既に含まれている既存の Web コンポーネントをレイアウト仕様に使用できることです。 デスクトップバンドルに含まれる Web コンポーネントの一部は以下のとおりです。
永続タブ Tab の属性の詳細については、 永続タブの属性を参照してください。 |
|
ページ > テキストコンテンツ |
テキストコンテンツの追加に役立ちます。 |
|
ページ > スタイル |
コンポーネントに特定の CSS スタイルを割り当てるのに役立ちます。 |
|
ページ > ラッパー |
ウィジェットラッパーを使用すると、ウィジェットの上にツールバーを追加できます。 ツールバーにはタイトルと デフォルト値として「app-maximize-area」を使用するようにしてください。 現在、デフォルト値のみが利用可能です。 レイアウトが以下のように構成されている場合 |
|
ページ > ラッパー> ID |
（オプション）Web コンポーネントウィジェットラッパーを使用すると、一意の識別子を使用して動的ウィジェットのタイトルを更新できます。 ウィジェットラッパーを入力してください JavaScript のカスタムイベントには、必ず同じ一意の識別子を使用してください。 詳細については、以下を参照してください。 非同期イベント セクション エージェント連絡モジュール 章 Cisco Webex Contact Center デスクトップ開発者。 iFrame ベースのウィジェットのタイトルを更新するには、同じドメインの iFrame コンテンツを使用してください。 以下はサンプル例です。 |
|
ページ > agentx-wc-iframe |
デスクトップ上でウィジェットとして表示される iFrame 内にウェブページを埋め込むことができます。 「agentx-wc-iframe」という iFrame ウィジェットを使用できます。 |
|
ページ > レイアウト | ページ上のウィジェットの配置を自由に設定できます。 以下の形式はグリッドレイアウトを表しています。 ここでは、 ウィジェット セクションで定義した領域名を使用してグリッドを定義できます。 次の例は、3 行 3 列のレイアウトを指定する方法を示しています。  サイズセクションでは、数値はウィジェットが占めることができるスペースの割合を、他のウィジェットとの相対的な比率で表しています。 3 つの列はすべて、同じ割合のスペース（1 分の 1）を占める。 利用可能な幅が 100%の場合、各ウィジェットは水平方向のスペースの 33.33%を占めます。  別の使用例として、「cols」を [1, 2, 2] と設定すると、全体のスペースが 5 で分割され (1+2+2)、最初のウィジェットが水平方向のスペースの 20% を占めることになります。 2 番目と 3 番目のウィジェットはそれぞれ 40%ずつを占める。 詳細については、「グリッドレイアウトの基本概念」を参照してください。  |
|
ページ > ルート |
レイアウトをネストすることをサブレイアウトと呼びます。 レイアウト構成にネストされたレイアウトがある場合、サブレイアウトの親として単一の「ROOT」オブジェクトを指定する必要があります。 それ以外の場合、ネストが必要なければ、レイアウト構成はフラットにすることができます。 このサブレイアウトを使用すると、レイアウトのサイズ変更動作をより詳細に制御できます。 ページレイアウト プロパティは、Record<string, Layout> 型である必要があります。 レイアウトプロパティを使用すると、ページ上のウィジェットの配置を変更できます。 この設定では、ルートレイアウト内にグリッドが作成され、その中の 2 つのサブグリッドは個別にサイズ変更できます。  コンポーネントのサイズ変更は、そのサブレイアウト内のコンポーネントに影響を与えます。  以下のケースにご注意ください。 無限ループ: ROOT レイアウトを ROOT のサブレイアウトとして含めると、「コール スタック超過」エラーが発生し、無限ループに陥ります。  同じサブレイアウト (N 回): 同じ名前でサブレイアウトをグリッドに複数回含めた場合、そのうちの 1 つをリサイズすると、すべてのサブレイアウトが自動的にリサイズされます。 これが望ましい動作でない場合は、各サブレイアウトに固有の名前を付けてください。  |
ウィジェット上部の（永続タブの属性
カスタムページとカスタムウィジェットのタブを永続的に設定するには、カスタムレイアウトで md-tabs の属性を入力します。
例：タブを永続的に設定する
{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "コンテナ内のすべてのタブの一意の ID" }, }|
財産 |
Description |
|---|---|
|
選択を永続する |
md-tabs を永続的に設定するには。 |
|
タブ ID |
コンテナ内のすべてのタブをまとめて識別する固有の識別子。 |
md-tabs を永続化するように設定すると (persist-selection: true)、エージェントがデスクトップでページやウィジェットを切り替えても、Tab の選択が保持されます。
- の
選択状態を維持するデスクトップでは永続的な Tab 動作が既に設定されているため、プロパティは補助情報ペインのタブとエージェントパフォーマンス統計レポートページには適用されません。 - デスクトップからサインアウトしたり、ブラウザを再読み込み/更新したり、ブラウザのキャッシュをクリアしたりすると、Tab の選択はデフォルトの Tab にリセットされます。
永続ウィジェットの設定
カスタムウィジェットは、永続的に表示するように設定できます。 永続ウィジェットは、デスクトップのすべてのページに表示されます。 永続ウィジェットは、アクティブな連絡先リクエストまたは会話がある場合にのみ、補助情報ペインに新しい 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] } } } } }] } ] }ウィジェットをカスタマイズする際には、以下のいずれかのオプションを選択できます。
-
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 で囲みます。 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" } }] }, }, }ヘッダーのカスタマイズ可能なウィジェットエリアで iFrame を介してウィジェットを設定するには、 display と height のスタイル属性を追加する必要があります。 height 属性の最適な値は 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] } } } } }] } ] },管理ポータルで顧客体験管理指標を有効にした後、顧客体験ジャーニーウィジェットを設定できます。
補助情報ペインに新しいタブを追加して、カスタムウィジェットを配置します。 ここでは特別なルールは適用されず、コンポーネントのネストは想定どおりで、 children セクションで説明されています。 詳細については、ページの Children プロパティを参照してください。
Tab ヘッダーをカスタマイズするための具体的な例を以下に示します。
子プロパティにアイコンとラベルを配置する例
{ "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-tooltip。 ツールチップ情報を入力してください メッセージ プロパティを適用 スタイル 次の例に示すように、プロパティの値。
"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "サンプル Tab 1", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },カスタムの Tab の場合、最大幅は 252 ピクセル、最小幅は 110 ピクセルを推奨します。
カスタム Tab 内でドラッグ アンド ドロップ機能を有効にするには、次のプロパティを 属性:
"comp": "md-tabs", "attributes": { "class": "widget-tabs", "draggable": true, "comp-unique-id": "sample-dynamic-custom-tabs" },-
ドラッグ可能: 設定するドラッグ可能不動産価値 真実。 -
コンピューター固有の 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 オーダー」オプションの後に、追加のカスタムコンポーネントまたはウィジェットを追加できるように拡張できます。 以下は、追加のコンポーネントに適用できる style プロパティ値のサンプルセットです。
"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "サンプル要素", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -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] } } }
デスクトップからウィジェットへデータを共有する
カスタムウィジェット内のプロパティまたは属性を介してリアルタイムデータを受信するには、レイアウト 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.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":"通話ガイド", "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" } ] }- 次の
比較物件の参照情報が変更されました。エージェント Xプロパティ値は以下に置き換えられますアクエオン:エージェント X プレビューキャンペーンに改名されましたアクエオンプレビューキャンペーンagentx-call-guideに改名されましたアクエオンコールガイド
- リストとキャンペーンマネージャー（LCM）を CDN でホストし、URL を CDN で指定する必要があります。
スクリプト財産。
スクリーンポップアップ
デスクトップレイアウトでは、スクリーンポップを以下のいずれかの方法で設定できます。
-
カスタムページとして
-
カスタムページのウィジェットの 1 つとして
-
補助情報ペインの Tab として
スクリーンポップは、以下の要素に基づいてデスクトップに表示されます。
音声チャンネルの場合：
-
デスクトップレイアウトで定義された構成
-
フローデザイナーで定義されたスクリーンポップアクティビティ
新しいデジタルチャネルについて：
-
デスクトップレイアウトで定義された構成
-
Connect Flow Builder で定義された Screen Pop ノード
Screen Pop の設定に関する詳細については、以下を参照してください。 スクリーンポップ。
ナビゲーションバーでのスクリーンポップの設定
Screen Pop は、カスタムページとして設定することも、カスタムページ内のウィジェットの一つとして設定することもできます。 Screen Pop カスタムページにアクセスするには、 スクリーンポップ ナビゲーションバーのアイコン。 カスタムページでスクリーンポップウィジェットにアクセスするには、ナビゲーションバーのカスタムアイコンをクリックします。 Nav プロパティの詳細については、ナビゲーション (カスタム ページ) を参照してください 。
例：カスタムページとしてのスクリーンポップ
{ "nav": { "label": "スクリーンポップ", "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" }補助情報ペインでのスクリーンポップの設定
Screen Pop は、補助情報ペインに Tab として表示されるように設定できます。
デフォルトでは、フローデザイナーでスクリーンポップが デスクトップ内 として表示されるように構成されている場合、スクリーンポップは補助情報ペインの スクリーンポップ Tab に新しいサブ Tab として表示されます。
補助情報ペインにスクリーンポップを Tab として含めるには、 panel section に次の属性を追加します。 パネルの詳細については、補助情報パネルを参照してください。
例：補助情報ペインに 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": "顧客体験管理指標", "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": "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": { "name": "SCREEN_POP" } }], "visibility": "SCREEN_POP" } "visibility": "SCREEN_POP" }, },ローカリゼーション
次の言語がサポートされています。
ブルガリア語、カタロニア語、中国語（中国）、中国語（台湾）、クロアチア語、チェコ語、デンマーク語、オランダ語、英語英語（イギリス）、英語（米国）、フィンランド語、フランス語、ドイツ語、ハンガリー語、イタリア語、日本語、韓国語、ノルウェー語、ポーランド語、ポルトガル語ポルトガル語（ブラジル）、ポルトガル語（ポルトガル）、ルーマニア語、ロシア語、セルビア語、スロバキア語、スロベニア語、スペイン語、スウェーデン語、トルコ語。
デスクトップ UI の言語は、ブラウザの言語設定に基づいています。 たとえば、Firefox ブラウザで優先言語をフランス語として選択したとします。 Firefox ブラウザでデスクトップを起動すると、デスクトップの UI がフランス語で表示されます。 ただし、デスクトップレイアウトで追加された水平ヘッダー、ナビゲーションバー、その他のコンポーネントは、ブラウザの言語設定に基づいてローカライズされません。
デスクトップコンポーネントのローカライズ
デスクトップコンポーネントをローカライズするには、
-
app.json ファイルで設定されている既存のローカライズ キーを使用します。
ローカライズキーが設定されていない場合、デフォルト言語である英語（米国）が使用されます。 Cisco サポートにサービスリクエストを送信して、app.jsonファイルにローカライズキーを追加できます。例：ローカライズキー
{ "common": { "buttonTitle": "タイマーを停止" } } -
コンポーネントをローカライズするには、デスクトップレイアウトの JSON ファイルに次の大文字小文字を区別するプロパティを入力します。
"textContent": "$I18N.<key>",ここで、 <key> は、
app.jsonファイル内の対応するローカライズキーを指します。
例：ヘッダーコンポーネントのローカライズ
"header": { "ID": "header", "widgets": { "head1": { "comp": "md-button", "attributes": { "slot": "menu-trigger", "style": "height: 64px" }, "children": [{ "comp": "span", "textContent": "$I18N.common.buttonTitle", } }, }, }例：補助情報ペインで Tab コンポーネントをローカライズする
"panel": { "comp": "md-tab", "attributes": { "slot": "Tab" }, "children": [{ "comp": "span", "textContent": "$I18N.panelTwo.screenPopTitle" }] }
