- ホーム
- /
- 投稿記事
コメントありがとうございます。
カスタムデスクトップレイアウトを作成してください
この記事の内容
フィードバックがある場合この記事では、JSONファイルを編集してカスタムレイアウトを作成する方法と、カスタマーエクスペリエンス管理指標ウィジェットやカスタマーエクスペリエンスジャーニーウィジェットなどのウィジェットを使い始めるのに役立つサンプルユースケースを紹介します。カスタムデスクトップレイアウトを効果的に使用するには、HTML構造、ブラウザーのドキュメントツリーモデル、およびJSON形式をしっかりと理解している必要があります。
概要
デスクトップレイアウト機能を使用すると、ビジネス要件に応じて Webex Contact Center デスクトップを設定できます。 ロゴ、タイトル、 ウィジェットなどの要素をカスタマイズできます。 デスクトップレイアウトを作成してチームに割り当てることができます。 このレイアウトは、 そのチームの一員としてサインインするすべてのエージェントに、デスクトップでのエージェントエクスペリエンスを生み出します。
レイアウトには2種類あります。
-
グローバルレイアウト：このレイアウトはシステム生成のレイアウトで、 チームを作るときにデフォルトで割り当てられます。 詳しくは、「 チームの管理」を参照してください。 チームを作成すると、 グローバルレイアウトがチームのデスクトップレイアウトとして自動的に設定されます。 このレイアウトは削除できません。
-
カスタムレイアウト:カスタマイズされたデスクトップエクスペリエンスを提供するレイアウトです。 1つまたは複数のチームのカスタムレイアウトを作成できます。
エージェントがサインインしているときに新しいデスクトップレイアウトを割り当てた場合、 エージェントは新しいレイアウトを表示するためにページをリロードする必要があります。
Webex コンタクトセンターデスクトップは 3 つのペルソナをサポートしています。
-
エージェント
-
スーパーバイザー
-
スーパーバイザーとエージェント
JSONレイアウトファイルには、ペルソナごとに個別のセクションがあります。 管理者は、 JSONレイアウトファイルの対応するセクションで各ペルソナの設定を行う必要があります。 サンプルのJSONレイアウトファイルの詳細については、「JSONレイアウトのトップレベルプロパティ」を参照してください。
シスコがデスクトップレイアウトに新しい機能を追加すると、 変更されていないレイアウトは新しい機能で自動的に更新されます。 更新されたデスクトップレイアウトは、 変更されていないデスクトップレイアウトを使用する既存のチームが自動的に利用できるようになります。 変更されていないデスクトップレイアウトを使用しているデスクトップユーザーは、 サインインするかブラウザをリロードすると、レイアウトベースの新しい機能を利用できます。
デフォルトのデスクトップレイアウト.jsonファイルを変更せずに使用している場合、そのレイアウトは変更されていないレイアウトと見なされます。 ただし、Default Desktop
Layout.jsonファイルをダウンロードして再度アップロードすると、ファイルの内容やファイル名が変更されていなくても、変更されたレイアウトと見なされます。
カスタムデスクトップレイアウトを使用するチームの場合、 管理者は新しい機能を組み込むためにレイアウト定義を定期的に更新する必要があります。 管理者が変更されていないレイアウトや、変更されていないレイアウトを使用しているチームを表示すると、 新しいデスクトップ機能が自動的に適用されたことを示すメッセージが表示されます。
デスクトップには、iframeベースとWebコンポーネントベースの2種類のウィジェットがあります。 ヘッダー、ナビゲーション（カスタムページ）、固定領域、ヘッドレスエリア、AUXパネルは、デスクトップのカスタマイズ可能な領域です。 これらはウィジェットではありません。
次のリストは、設定できるスペースの詳細を示しています。 画像はデスクトップのレイアウトを示しています：
-
タイトルとロゴエリア：このスペースには、画面の左上隅に Webex Contact Center のロゴと名前（デフォルト）が表示されます。
-
水平ヘッダーエリア：このスペースには、カスタムウィジェットが表示される設定可能なエリアがあります。 これらのウィジェットは、たとえば、インライン情報やドロップダウンメニューを表示できます。 このヘッダーの高さはわずか64ピクセルなので、ウィジェットの高さをヘッダーの高さと交差させることはできません。
-
ワークスペースエリア：このスペースは、ナビゲーションバーの選択内容によって、またはエージェントが顧客とやり取りしているときに変わります。 エージェントが電話に出ているとき、このエリアにはインタラクションコントロールと補助情報ペイン（カスタムウィジェットと固定ウィジェットを含む）が表示されます。 エージェントがメール、チャット、ソーシャルチャネルでやり取りしている場合、このエリアにはワークスペースエリアと補助情報ペイン（固定ウィジェットエリアを含む）が表示されます。
カスタムページは、デスクトップインターフェイスのワークスペースペインに表示されます。 カスタムページには、ナビゲーションバーのアイコンからアクセスできます。 各カスタムページには、1つ以上のカスタム・ウィジェットを含めることができます。
カスタムウィジェットは、JSONレイアウトで構成されたサードパーティのアプリケーションです。 カスタムウィジェットは、カスタムページ、カスタムタブ（補助情報ペイン）、またはデスクトップの水平ヘッダーに配置できます。
-
ナビゲーションバーエリア：このスペースを使用して、カスタムページにアクセスするためのナビゲーション項目を追加します。
JSON レイアウトのトップレベルプロパティ
役割
デフォルトのJSONレイアウトには以下の3つの役割があります。
-
エージェント-エージェントが Webex Contact Center デスクトップにサインインしてエージェントのアクティビティを処理するときに表示されるデスクトップレイアウトを設定します。
-
スーパーバイザー—スーパーバイザーが Webex Contact Center デスクトップにサインインしてスーパーバイザー機能のみを処理するときに表示されるデスクトップレイアウトを設定します。
スーパーバイザーがデスクトップにサインインすると、メインチームに指定されているデスクトップレイアウトが適用されます。 メインチームを指定しない場合は、グローバルレイアウトが適用されます。 デフォルトでは、APSレポートは無効になっています。
-
スーパーバイザーエージェント-スーパーバイザーが 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": {
...
},
"navigation": {
...
},
"persistent": {
...
},
"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": {
...
},
"navigation": {
...
},
"persistent": {
...
},
"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": {
...
},
"navigation": {
...
},
"persistent": {
...
},
"headless": {
...
}
},
}
},- JSONレイアウトプロパティに加えられた変更は、デスクトップブラウザを更新したときに有効になります。
- JSONレイアウトで有効にした機能がデスクトップで利用できない場合は、シスコサポートに連絡して機能を有効にしてください。
- JSON レイアウトのすべてのプロパティは大文字と小文字が区別されます。
アプリタイトル
デスクトップの水平ヘッダーのタイトルを指定するには。 デフォルトのタイトルは Webex コンタクトセンターです。
例:
"appTitle": "Webex Contact Center"デフォルトの AppTitle は、コンタクトセンターデスクトップから Webex コンタクトセンターに変更されました。 古いデフォルトのAppTitle（コンタクトセンターデスクトップ）を使用する既存のカスタムレイアウトには影響はありません。 新しいAppTitleを使用するには、カスタムレイアウトを変更する必要があります。 ただし、新しいグローバルレイアウトでは、デフォルトの AppTitle が Webex コンタクトセンターとして使用されます。
タイトルは、テキスト、画像、または空の文字列のいずれかです。 タイトルテキストは2行に表示されます。 テキストが2行目を超えると、省略記号アイコンが表示され、ツールチップにタイトル全体が表示されます。 スタイルをタイトルに適用することはできません。
データURI（Uniform Resource Identifier）を使用するか、コンテンツ配信ネットワーク（CDN）、アマゾンウェブサービス（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、アマゾンウェブサービス（AWS）のシンプルストレージサービス（S3）バケット、または同様のホスティングサービスでカスタムロゴ画像をホストし、ホストされた画像のURLを指定できます。 サポートされているロゴ画像のフォーマットは、PNG、JPG、JPEG、GIF、SVG、WebPです。 サポートされているロゴ画像のサイズは96 x 32ピクセル（幅x高さ）です。
| 状態 | 例 | アプリタイトル | ロゴ |
|---|---|---|---|
| AppTitleとロゴが設定されていない場合 |
|
タイトルなし | デフォルトのロゴ |
| アプリタイトルとロゴが設定されている場合 |
|
設定済みのテキスト | 設定済みのロゴ |
| AppTitleが設定されていて、ロゴが設定されていない場合 |
|
設定済みのテキスト | デフォルトのロゴ |
|
AppTitleが設定されておらず、ロゴが設定されている場合
|
|
タイトルなし | 設定済みのロゴ |
| AppTitleが設定されていて、ロゴが優先されない場合 |
|
設定済みのテキスト | ロゴなし |
|
AppTitleが設定されておらず、ロゴが優先されない場合
|
|
タイトルなし | ロゴなし |
| AppTitleが画像として追加され、ロゴが設定されている場合 |
|
設定済みの画像 | 設定済みのロゴ |
|
AppTitleが画像として追加され、ロゴが設定されていない場合
|
|
設定済みの画像 | デフォルトのロゴ |
|
AppTitleが画像として追加され、ロゴが好ましくない場合
|
|
設定済みの画像 | ロゴなし |
- カスタム画像サイズは、縦横比に基づいて調整されます。 以前に設定したカスタムタイトルテキストが、デスクトップに2行に表示されるようになりました。 これを避けるには、カスタムのタイトルテキストを変更してください。
- デスクトップの水平ヘッダーにタイトルとロゴが設定されていない場合、そのスペースがヘッダーウィジェットで使用されます。 タイトルとロゴスペースを使用するには、 ヘッダーウィジェットを正しく設定する必要があります。
- タイトルとロゴを合わせて、最大幅の304ピクセル （パディングを含む）を超えることはできません。 ロゴの幅が96ピクセル未満の場合は、 残りの幅をタイトルに使用できます。
- カスタム画像サイズがサポートされているサイズよりも大きい場合、 画像サイズは水平ヘッダーの縦横比に基づいて調整されます。 カスタム画像サイズがサポートされているサイズよりも小さい場合は、 実際の画像サイズが水平ヘッダーに保持されます。
タスクページのイラスト
組織の好みやブランド構成に基づいて、タスクページのカスタムイラストを指定すること。 エージェントがサインインすると、タスクページには設定されたイラストが背景として表示されます。 デフォルトでは、タスクページはイラストなしで表示されます。
例:
"taskPageIllustration": "https://www.abc.com/image/logo.jpg",データURIを使用するか、コンテンツ配信ネットワーク（CDN）、アマゾンウェブサービス（AWS）Simple Storage Service（S3）バケット、または同様のホスティングサービスでカスタムイラストをホストし、ホストされたイラストのURLを指定することができます。 イラストは、レイアウト定義に基づいてグローバルレベルまたはチームレベルで設定できます。 壊れた画像がデスクトップに表示されないように、必ず正しいURLを設定してください。
サポートされているタスクページのイラスト形式は、PNG、JPG、JPEG、GIF、SVG、WebPです。 イラストの推奨サイズは400 x 400ピクセル（幅x高さ）です。 カスタムイラストのサイズが推奨サイズよりも大きい場合、イラストのサイズはタスクページの縦横比に基づいて調整されます。 カスタムイラストのサイズが推奨サイズよりも小さい場合は、実際のイラストのサイズがタスクページに保持されます。
承認タスクでナビゲートを停止します
エージェントが前のタスクに取り組んでいる間に新しいタスクを引き受けたときに、新しく受け入れたタスクに焦点を移すかどうかを決定するため。 デフォルト値は false です。
例:
"stopNavigateOnAcceptTask": false値が true に設定されている場合、ユーザーがデスクトップで新しいタスクを受け付けても、フォーカスは前のタスクに留まり、新しく受け入れたタスクには移りません。 この設定は、ユーザーが新しいリクエストを受け入れるときにデータが失われることを防ぎます。
たとえば、エージェント1が顧客1とチャットしていると同時に、顧客2と音声通話を行っているとします。 音声通話中、エージェント1はインタラクションコントロールペインでお客様2の詳細を更新しています。 現在、エージェント1のタスクリストペインには2つのアクティブなタスクがあり、フォーカスはインタラクションコントロールペインにあります。 エージェント1がお客様3からの新しいチャットリクエストを受け付けても、フォーカスはお客様2のインタラクションコントロールペインに残り、新しく受け付けたチャットリクエストには移りません。
前のタスクに集中し続け、新しく受け入れたタスクに移らないようにするには、 stopNavigateOnAcceptTaskプロパティの値がtrueに設定されたカスタムレイアウトを選択してください。
stopNavigateOnAcceptTaskプロパティの値がJSONレイアウトに入力されていない場合、デスクトップは新しく受け入れられたタスクにフォーカスを移します。 この動作は、StopNavigateOnAcceptTaskプロパティの値がfalseに設定されている場合と似ています。
- この設定は、仕事の受付、会議、相談、転送など、 デスクトップで実行されるすべてのタスク（ 音声チャネルとデジタルチャネル）と、アウトダイヤルコール、アウトバウンドキャンペーンコール、自動ラップアップなどに適用されます。
- デスクトップユーザーがホームページにいて、タスクリストペインにアクティブなタスクがない場合は、この設定は適用されません。 このような場合、新しいタスクが受け入れられると、 フォーカスはホームページから新しく受け入れられたタスクに移ります。
ドラッグドロップは有効になっています
カスタムページのウィジェットのドラッグアンドドロップとサイズ変更を有効にするには、値を true に設定してください。 デフォルト値は false です。
例:
"dragDropEnabled": false補助情報ペインのタブでドラッグアンドドロップ機能を有効にする方法の詳細については、「補助情報ペイン」を参照してください。
通知タイマー
デスクトップ上のデスクトップ通知が自動的に消えるまでの時間（秒単位）を設定します。 通知はデスクトップの右上隅に表示されます。 デフォルトのタイムアウト値は8秒です。 タイムアウト値の有効範囲は1〜10秒です。 タイムアウトの変更を有効にするには、変更後にブラウザを更新する必要があります。
例:
"notificationTimer": 8通知の最大数
デスクトップに一度に表示するデスクトップ通知の数を設定するには。 デフォルト値は3です。 デスクトップ通知の範囲は1〜10です。 デスクトップ通知は積み重ねられています。 通知が多い場合は、NotificationTimerの設定によっては少し遅れて表示されます。
例:
"maximumNotificationCount": 3ブラウザ通知タイマー
デスクトップのブラウザトースター通知が自動的に消えるまでの時間（秒単位）を設定します。 トースターは、デスクトップがアクティブなブラウザーウィンドウまたはタブでない場合にのみ表示されるネイティブブラウザー通知です。 デスクトップのブラウザウィンドウまたはタブは、次の場合は非アクティブです
-
他のブラウザウィンドウやタブで作業しています。
-
あなたは他のアプリケーションに取り組んでいます。
-
デスクトップのブラウザウィンドウを最小化しました。
通知はデスクトップの右上隅に表示されます。 デフォルトのタイムアウト値は8秒です。 タイムアウト値の推奨範囲は5〜15秒です。 タイムアウトの変更を有効にするには、変更後にブラウザを更新する必要があります。
例:
"browserNotificationTimer": 8ブラウザ通知に設定されているタイムアウトは、オペレーティングシステムとブラウザの設定によって異なります。 タイムアウト値は、Windows OS、Chrome OS、macOSのChromeブラウザで適用されます。 ただし、サポートされている他のブラウザは、設定された通知タイムアウト値を一貫して受け入れません。
wxm設定済み
（オプション）設定するにはWebex Experience Management、値を
true に設定します。 デフォルト値は false です。
例:
"wxmConfigured": trueデスクトップチャットアプリ
Webex Appなど、シスコが提供する複数のチャットアプリケーションを設定するには。
WebExが設定されました
Webexアプリとそのメッセージングおよび会議機能は、デスクトップ内で設定できます。 この設定により、エージェントはデスクトップから離れることなく、組織内の他のエージェント、スーパーバイザー、対象分野の専門家（SME）と協力することができます。
- サイト管理者は Webex Meeting ユーザーを管理し、ユーザーが Webex Enterprise Edition を持っている場合にのみ権限を割り当てます。 詳細については、の「Webex Meetingsユーザーの管理」を参照してください Cisco Webex Control Hub。
- 上司と中小企業は、Webexクライアントをシステム（個人用デバイス）にダウンロードするか、Webexアプリ（https://web.webex.com/）を使用してWebexアプリにアクセスする必要があります。 詳細については、「 アプリをダウンロードする」を参照してください。
- から移動しなくても、内のWebex Agent Desktop アプリにアクセスして、組織の他のエージェント、 スーパーバイザー、対象分野の専門家 (SME) と共同作業できます。Agent Desktop 通話制御機能は利用できません。 電話を受けたりかけたりするには、 埋め込まれていない外部のWebexアプリが必要です。 詳しくは、「通話アプリ」を参照してください。
デスクトップで Webex アプリを設定するには:
-
でCisco Webex Control Hub、ユーザーにサービスを追加するときは、アドバンストメッセージングチェックボックスを選択します（）。 詳細については、「Cisco Webexサイト管理におけるユーザーアカウントの管理」を参照してください。
-
カスタムデスクトップレイアウトで、WebExConfiguredプロパティの値を true に設定します。例:
"desktopChatApp": { "webexConfigured": true },WebexConfiguredプロパティのデフォルト値は false です。Webex アプリは、エージェント、スーパーバイザー、スーパーバイザーエージェントの各ロールでエージェント、スーパーバイザー、またはスーパーバイザーエージェントは Webex App からサインアウトできません。Webex Configuredプロパティ値を true に設定した場合にのみ使用できます。デスクトップの水平ヘッダーに詳細については、ヘッダーアクションを参照してください。
（Webex）アイコンを表示するには、HeaderActionsプロパティにwebexという値を入力します。特定のチームで Webex アプリを有効にするには、詳しくは、「チームを作る」を参照してください。WebexConfiguredプロパティの値が true に設定されているカスタムレイアウトを選択してください。
Webexアプリは、補助情報ペイン、カスタムページ、カスタムウィジェットでも設定できます。 詳細については、補助情報ペインを参照してください。
Webex アプリ通知
通知タイマーの NotificationTimer プロパティと BrowserNotificationTimer プロパティを使用して指定された値は、Webex アプリに適用されます。 これらのプロパティのデフォルトのタイムアウト値は8秒です。 詳細については、「通知タイマー」と「ブラウザ通知タイマー」を参照してください。
ヘッダーアクション
デスクトップの水平ヘッダにあるアイコンの順序を変更するには。 デフォルトの順序は次のとおりです。
-
(ウェベックス)
-
(アウトダイヤルコール) -
(通知センター)
HeaderActionsプロパティの値を次のように設定します。
|
アイコン名 |
ヘッダーアクションのプロパティ値 |
|---|---|
|
Webex アプリ |
ウェベックス |
|
アウトダイヤルコール |
アウトダイヤル |
|
通知センター |
通知 |
例:
「ヘッダーアクション」: ["webex」、「アウトダイヤル」、「通知"]、
HeaderActionsプロパティの値は大文字と小文字が区別されます。
アイコンのデフォルトの順序を変更するには、HeaderActionsプロパティとカスタムレイアウトの値を適宜入力します。
例:
「ヘッダーアクション」: ["通知」、「アウトダイヤル」、「webex"]、
カスタムレイアウトでHeaderActionsプロパティと値を入力しない場合、アイコンはデフォルトの順序で表示されます。- ヘッダーアイコンと関連する機能をデスクトップから削除するには、
HeaderActionsプロパティ （「HeaderActions」: []）に空の値を設定してください。 ただし、Webexアプリを補助情報ペイン、カスタムページ、またはカスタムウィジェットとして追加した場合、エージェントは引き続きWebexアプリにアクセスできます。ただし、 Webexアプリはデスクトップの水平ヘッダーでは使用できません。 WebexConfiguredプロパティの値がfalseに設定されている場合、Webex の値が HeaderActions プロパティに追加されても、Webexアプリのアイコンはデスクトップの水平ヘッダーに表示されません。
エリア
エリアプロパティはデスクトップレイアウトの中核セクションです。 エリアごとにレイアウトを定義できます。
"area": {
"header": {
...
},
"advancedHeader: {
{
"comp": "widget-1",
"attributes": { ... },
"script": ....
}
},
"panel": {
...
},
"navigation": {
...
},
"persistent": {
...
},
"headless": {
...
}
},次のエリアオブジェクトを設定できます。
-
パネル:補助情報ペインの2つ目のパネルまたは一番右のパネルを表します。
-
ナビゲーション:カスタムページとそのページに関連するナビゲーション要素を表します。
-
固定：永続的でデスクトップのすべてのページに表示されるページレベルのウィジェットを表します。
-
ヘッドレス：ビジュアルインターフェースはないが、バックグラウンドでロジックを実行するウィジェットを表します。
AdvancedHeaderプロパティが設定されている場合は、ヘッダーとHeaderActionsプロパティを削除する必要があります。
アドバンストヘッダー
デスクトップの水平ヘッダーにあるアイコンの表示をカスタマイズしたり、アイコンの順序を変更したりします。 デフォルトの順序は次のとおりです。
-
(ウェベックス)
-
(アウトダイヤルコール)
-
(通知センター)
-
(エージェント・ステート・セレクター)
AdvancedHeaderプロパティの値を次のように設定します。
|
アイコン名 |
ヘッダーアクションのプロパティ値 |
|---|---|
|
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": "Count Down Timer for Current Shift", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }「現在のシフトのカウントダウンタイマー」というラベルは、空き容量に応じて切り捨てられて表示されます。
-
ラベルの長いウィジェットは追加しないでください。
-
ウィジェットがドロップダウンに流れると、ウィジェットのアイコンだけがクリックできます。
-
-
WebexConfiguredプロパティの値が詳細については、「WebExConfigured」を参照してください。falseに設定されている場合、Webexの値がAdvancedHeaderプロパティに追加されていても、Webexアプリのアイコンはデスクトップの水平ヘッダーに表示されません。
ホームページ
デスクトップにサインインすると、ホームページが表示されます。
ホームページは、スーパーバイザーとスーパーバイザーエージェントのペルソナにのみ適用されます。
ホームページでは次のウィジェットを見ることができます。 Analyzerウィジェットはデフォルトで提供されていますが、管理者は永続ウィジェットとカスタムウィジェットを設定することもできます。 詳細については、JSON レイアウトのトップレベルプロパティを参照してください。
アナライザーウィジェット
デフォルトでは、Analyzerウィジェットはデスクトップのホームページに表示されます。
ホームページのレイアウト設定
デスクトップのホームページは、組織の好みやブランド構成に基づいたレイアウトを表示するように設定できます。 ホームページフィールドを編集して、ホームページを設定します。 ユーザーがデスクトップにサインインしたときにホームページに表示されるように、次のコンポーネントを設定できます。
-
ウェルカムメッセージ
-
タスクペインに移動するには、ナビゲーションバーのタスクアイコンをクリックしてください。 通話監視機能が有効になっている場合、スーパーバイザー、スーパーバイザー、エージェントの役割にはタスクアイコンが表示されます。 タスクペインには、受信した顧客からの要求、現在および過去の顧客とのやり取り、アクティブな監視要求が表示されます。
-
キュー名、チャンネルタイプ、管理チームなどのフィルターセクション。
次の表では、ホームページの設定に必要なページプロパティについて説明しています。
|
財産 |
説明とコード |
|---|---|
|
ページ > フレックスレイアウトを使用してください |
フレックスレイアウトは新しいウェブコンポーネントです。 既存のウィジェットは変更されません。 新しいフレックスレイアウトでは、同じレイアウト構成形式を簡略化して使用しています。 下位互換性があり、既存のウィジェットには影響しません。 JSONレイアウトを設定する必要があります。 JSONレイアウトを設定するには、ウィジェットの高さと幅を指定します。 ウィジェットは、JSONレイアウト内で設定されているのと同じ順序でレンダリングされます。 ウィジェットのデフォルトの余白は8ピクセルです。 JSONレイアウトは、ウィジェットの寸法 (幅x高さ) と座標 (X、Y、Z) に基づいています。 柔軟なレイアウトは、個々のウィジェットのサイズ変更、ウィジェットの最大化などの機能をサポートしています。 個々のウィジェットの高さはピクセル単位で測定されます。 高さ1単位 = 40ピクセル。 ウィジェットの幅は、コンテナ内の列の数と、コンテナの幅に基づいて変化する列の数によって異なります。 ウィジェットは左から右に表示されます。 高度なレイアウトエンジンは、カスタムロジックを使用して、ウィジェットの水平方向と垂直方向の両方のスペース調整を適用します。 最初は、レイアウトは水平に読み込まれます。 水平にロードした後、ウィジェットは垂直にロードされ、スペースの利用が最適であることを確認します。 画面サイズに基づいてウィジェットを設定してください。 画面サイズに応じて、ウィジェットの幅を拡大または縮小できます。 これにより、ウィジェットが読みやすく、使いやすくなります。 フレックスレイアウトには、大、中、小、超小などの標準ブレークポイントがあります。
これらのピクセルは、オペレーティングシステムとブラウザによって異なる場合があります。 |
|
ページ > コンプ |
必ず独自のカスタムコンポーネントを提供してください。
|
|
ページ > ページヘッダー |
静的、動的、またはその両方を指定できるタイトル文字列を必ず指定してください。
|
|
ページ > ページサブヘッダー |
デスクトップに表示されるサブヘッダーを必ず追加してください。 ユーザーはサブヘッダーに 「Go to Analyzer」を追加できます。
|
ナビゲーション（カスタムページ）
このセクションでは、左側のナビゲーションバーに表示されるページを追加できます。 ナビゲーションバーに表示するウィジェットのナビゲーションアイコンと固有のURLを指定します。 競合を避けるため、URLには特定の接頭辞を使用することをお勧めします。 詳細については、ナビゲーションプロパティのセクションを参照してください。
このページに表示できるウィジェットのコレクションを作成することもできます。 ページには、画面に表示される単一のウィジェットでも、グリッド内のウィジェットのコレクションでもかまいません。 グリッド配置の詳細については、レイアウトプロパティのセクションを参照してください。
ウィジェットツリーにダイナミックエリアラッパーを追加する必要はありません。 つまり、このオプションを有効にすると、カスタムページのウィジェットをドラッグアンドドロップしたり、サイズを変更したりできます。
例:
{
"nav": {
"label": “Custom Page”,
"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": "Stock Market",
"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": "Stock Market",
"maximizeAreaName": "app-maximize-area"
}
}],
},
{
"comp": "md-tab",
"textContent": "Widget3",
"attributes": {
"slot": "tab"
}
},
{
"comp": "md-tab-panel",
"textContent": "Three Content",
"attributes": {
"slot": "panel"
}
}
]
},
“comp2”: {
"comp": “my - google - maps - component“,
“source”: "https://my-cdn.com/my-google.maps.js
"wrapper": {
"title": "Google Map",
"maximizeAreaName": "app-maximize-area"
}
}
},
"layout": {
"areas": [
["left", "right"]
],
"size": {
"cols": [1, 1],
"rows": [1]
}
}
}
},次の表では、ナビゲーションとページのプロパティとその子プロパティについて説明しています。
|
財産 |
説明とコード |
|---|---|
|
ナビゲーション > ラベル |
このプロパティは、ページナビゲーション識別子を示します。 スクリーンリーダーはこのプロパティを読み取り、ツールチップに表示されます。 これらのパラメータは、ナビゲーションバーにカスタムページを表示するために必要です。
|
|
ナビ > アイコンタイプ |
このプロパティは、カスタムページのナビゲーションバーに表示されるアイコンの種類を表します。 次の種類のアイコンがあります。
|
|
ナビゲーション > アイコン |
このプロパティは、Momentumライブラリ内のアイコンの名前またはCDN URLを表します。 |
|
ナビゲーション > 整列します |
このプロパティは、アイコンをナビゲーションバーの上部または下部に配置するのに役立ちます。 現在、このプロパティではトップアライメントのみ可能です。 |
|
nav >はデフォルトのランディングページです | このプロパティは、のエージェントのデフォルトのランディングページを指定しますAgent Desktop。 このプロパティを true に設定すると、ナビゲーションバーページが、Agent Desktopへのサインイン後にエージェントに表示されるデフォルトのランディングページになります。 このプロパティがtrueに設定されているナビゲーションバーページが複数ある場合、システムは最初のナビゲーションバーページがデフォルトのランディングページと見なします。 このプロパティがtrueに設定されているナビゲーションバーページがない場合は、ホームページがデフォルトのランディングページとして機能します。 アナライザーとエージェントのパフォーマンス統計レポートをデフォルトのランディングページとして設定することはできません。 |
|
ナビ > に移動します |
このプロパティは、カスタムページの名前を指定します。 この名前は、エージェントがナビゲートするときにアドレスバーに表示されます。 NavigateToには、画像、フォント、css、build_info、ヘルプ、アプリ、i18n、アイコン、images-mfe-wc、サウンドなどの値を含めないでください。 |
|
財産 |
説明とコード |
|---|---|
|
ページ > id |
|
|
ページ > フレックスレイアウトを使う |
フレックスレイアウトは新しいウェブコンポーネントです。 既存のウィジェットは変更されません。 新しいフレックスレイアウトでは、同じレイアウト構成形式を簡略化して使用しています。 下位互換性があり、既存のウィジェットには影響しません。 JSONレイアウトを設定する必要があります。 JSONレイアウトを設定するには、ウィジェットの高さと幅を指定します。 ウィジェットは、JSONレイアウト内で設定されているのと同じ順序でレンダリングされます。 ウィジェットのデフォルトの余白は8ピクセルです。 JSONレイアウトは、ウィジェットの寸法 (幅x高さ) と座標 (X、Y、Z) に基づいています。 柔軟なレイアウトは、個々のウィジェットのサイズ変更、ウィジェットの最大化などの機能をサポートしています。 個々のウィジェットの高さはピクセル単位で測定されます。 高さ1単位 = 40ピクセル。 ウィジェットの幅は、コンテナ内の列の数と、コンテナの幅に基づいて変化する列の数によって異なります。 ウィジェットは左から右に表示されます。 高度なレイアウトエンジンは、カスタムロジックを使用して、ウィジェットの水平方向と垂直方向の両方のスペース調整を適用します。 最初は、レイアウトは水平に読み込まれます。 水平にロードした後、ウィジェットは垂直にロードされ、スペースの利用が最適であることを確認します。 画面サイズに基づいてウィジェットを設定してください。 画面サイズに応じて、ウィジェットの幅を拡大または縮小できます。 これにより、ウィジェットが読みやすく、使いやすくなります。 フレックスレイアウトには、大、中、小、超小などの標準ブレークポイントがあります。
これらのピクセルは、オペレーティングシステムとブラウザによって異なる場合があります。 |
|
ページ > ウィジェット ページ > コンプ |
カスタムウィジェットを定義するのに役立ちます。 複数のウィジェットを配置するには、ウィジェットのオプションを順番に指定します。 各ウィジェットには必ず固有のエリア名を付けてください。 後でレイアウトセクションで使用してください。 このプロパティは、カスタムHTML要素の名前を表します（ラッパーとして使用する場合は、Webコンポーネントまたはその他の要素と呼ばれます）。 詳細については、「使用事例例」を参照してください。 角括弧（「<」or「>」）なしでカスタム要素名をここに入力してください。 たとえば、「マイ・カスタム・エレメント」などです。 ウィジェットセクションの各エントリは、次の形式をサポートしています。 |
|
ページ > スクリプト |
（オプション）このプロパティは、CDNなどの遠隔地からウィジェットやコンポーネントを読み込む場合にのみ必要です。 同じコンポーネントのスクリプトURLを変更しないでください。 同じコンポーネントのスクリプトURLを変更する必要がある場合は、次のいずれかを実行してください。
|
|
ページ > プロパティ |
Webコンポーネントに渡す必要のあるプロパティを指定できます。 |
|
ページ > レスポンシブ |
このプロパティには次の値のいずれかを設定します。
応答しないウィジェットでは、最高のユーザーエクスペリエンスを保証できず、小さいビューでは表示されません。 エージェントは、応答なしに設定されているウィジェットを表示するには、ブラウザウィンドウのサイズを大きくする必要があります。 |
|
ページ > 属性 |
このセクションでは、Webコンポーネントの属性を指定できます。 |
|
ページ > 可視性 |
シスコが提供するウィジェットは、連絡先履歴Cisco Webex Experience Management、IVRトランスクリプト、プレビューキャンペーンコールガイド、スクリーンポップです。
|
|
ページ > 子供たち |
このプロパティはレイアウトの中核部分です。 Web STOREの値をプロパティとして渡す方法については、「デスクトップからウィジェットへのデータの共有」を参照してください。 「子」配列セクションの利点は、すでにデスクトップバンドルの一部となっている既存のWeb Componentをレイアウト仕様で使用できることです。 デスクトップバンドルのWebコンポーネントには、次のものがあります。
固定タブの属性の詳細については、「固定タブの属性」を参照してください。 |
|
ページ > テキストコンテンツ |
テキストコンテンツを追加するのに役立ちます。 |
|
ページ > スタイル |
コンポーネントに特定のCSSスタイルを割り当てるのに役立ちます。 |
|
ページ > ラッパー |
ウィジェットラッパーを使用すると、ウィジェットの上にツールバーを追加できます。 ツールバーにはタイトルと、ウィジェットの上部にある 必ず「アプリの最大化面積」としてデフォルト値を使用してください。 現在、デフォルト値のみが使用できます。 |
|
ページ > ラッパー > id |
（オプション）Webコンポーネントのウィジェットラッパーを使用すると、一意の識別子を使用して動的ウィジェットのタイトルを更新できます。 JavaScriptカスタムイベントには必ず同じ一意の識別子を使用してください。 詳細については、Cisco Webex Contact Centerデスクトップデベロッパーのエージェントコンタクトモジュール章の「非同期イベント」セクションを参照してください。 iFrameベースのウィジェットのタイトルを更新するには、同じドメインのiFrameコンテンツを使用してください。 以下はサンプル例です。 |
|
ページ > エージェントX-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」オブジェクトが必要です。 そうでなければ、ネスティングが不要であれば、レイアウト構成はフラットでも構いません。 このサブレイアウトでは、レイアウトのサイズ変更動作をより細かく制御できます。 ページレイアウトプロパティはレコードタイプでなければなりません <string, Layout>。 レイアウトプロパティを使用すると、ページ上のウィジェットを配置できます。 この設定では、個別にサイズを変更できる2つのサブグリッドを含むグリッドがROOTレイアウトに作成されます。  コンポーネントのサイズを変更すると、そのサブルーアウト内のコンポーネントに影響します。  次の場合に注意してください。 無限ループ：ROOTレイアウトをROOTのサブレイアウトとして含めると、「コールスタック超過」エラーが発生し、無限ループに陥ります。  同じサブレイアウト (N) 回:同じ名前のサブルーアウトを複数回グリッドに含め、そのうちの1つをサイズ変更すると、すべてのサブルーアウトが自動的にサイズ変更されます。 これが望ましい動作でない場合は、各サブルーアウトの名前を一意の名前に変更してください。  |
(パーシスタントタブの属性
カスタムページとカスタムウィジェットのタブを永続的に設定するには、カスタムレイアウトのmd-tabsの属性を入力してください。
例:タブを永続的に設定する
{
"comp": "md-tabs",
"attributes": {
"persist-selection": true,
"tabs-id": "unique-id for all the tabs together in the container"
},
}|
財産 |
説明 |
|---|---|
|
パーシスト・セレクション |
|
|
タブID |
コンテナ内のすべてのタブを一意に識別します。 |
md-tabsを永続的に設定すると（persist-selection: true）、エージェントがデスクトップでページやウィジェットを切り替えても、Agent Desktopタブの選択が保持されます。
パーシスト選択プロパティは、 補助情報ペインとエージェントパフォーマンス統計レポートページのタブには適用されません。パーシストタブの動作はデスクトップですでに設定されているからです。- デスクトップからサインアウトしたり、ブラウザをリロード/更新したり、ブラウザのキャッシュをクリアしたりすると、タブの選択はデフォルトのタブにリセットされます。
永続ウィジェットの設定
どのカスタムウィジェットも永続的になるように設定できます。 永続的なウィジェットはデスクトップのすべてのページに表示されます。 固定ウィジェットは、連絡先のリクエストまたは会話がアクティブな場合にのみ、補助情報ペインに新しいタブとして表示されます。 たとえば、サンプル・パーシスタント・ウィジェット。
固定ウィジェットは、他のページに表示されているようにはホームページに表示されません。 ただし、アクティブなインタラクションがある場合は、固定ウィジェットが補助情報ペインの一部としてホームページに表示されます。 たとえば、電話に出ると、インタラクションコントロールペインが表示され、サンプルパーシステントウィジェットが補助情報ペインの一部として表示されます。
例:
"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に埋め込むことができるウェブページでアプリケーションをホストします。
-
カスタムウィジェットを作成してください。
ウィジェットの技術的要件は、デスクトップウィジェット開発ドキュメントに記載されています。 レイアウト編集者は、次の詳細を確認してください。
-
カスタム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",
"attributes": {
"message": "Netlify"
},
"children": [{
"comp": "agentx-wc-iframe",
"attributes": {
"src": "https://keen-jackson-8d352f.netlify.app"
}
}]
},
},
}iFrameでウィジェットを構成するには、ヘッダーのカスタマイズ可能なウィジェットエリアにスタイル属性、表示、高さを追加する必要があります。 高さ属性の最適な値は64ピクセルです。
iFrame内で期待どおりに読み込まれるように、必ず既存のヘッダーウィジェットにスタイル属性を追加してください。
例:
"head1": {
"comp": "agentx-wc-iframe",
"attributes": {
"src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm",
"style": "height:64px;display:flex;"
}
},ヘッダーの高さは64ピクセルしかないため、ヘッダーには複数の列がある1行のみを使用することをお勧めします。 配置の詳細については、レイアウトプロパティのセクションを参照してください。
補助情報ペイン
デスクトップの補助情報ペインには、シスコが提供する（デフォルト）ウィジェットとカスタムウィジェットを含むタブが表示されます。 定義済みのタブには、シスコが提供する次のウィジェットが表示されます。
-
連絡先履歴
-
IVRトランスクリプト
-
カスタマー・エクスペリエンス・ジャーニー
-
スクリーンポップ
補助情報ウィンドウでは、次のことができます。
-
タブを追加してください
-
タブの順序を変更してください
-
定義済みのタブを削除する
-
カスタムタブをドラッグ可能としてマークしてください
-
カスタムタブにツールチップを追加します
-
「タブの順序をリセット」 オプションを追加してください
例:
"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]
}
}
}
}
}]
}
]
},カスタマーエクスペリエンスジャーニーウィジェットは、でカスタマーエクスペリエンス管理指標を有効にした後に設定できますManagement Portal。
補助情報ペインで、カスタムウィジェットを配置するための新しいタブを追加します。 ここには特別なルールは適用されません。コンポーネントのネストは期待どおりで、子セクションで説明されています。 詳しくは、ページの「子供」プロパティを参照してください。
以下は、タブヘッダーをカスタマイズする具体的な例です。
子プロパティにアイコンとラベルを配置する例
{
"comp": "md-tab",
"attributes": {
"slot": "tab",
"class": "widget-pane-tab"
},
"children": [{
"comp": "md-icon",
"attributes": {
"name": "transcript_16"
}
},
{
"comp": "span",
"textContent": “My Widget Tab”
}
],
},子プロパティに画像（CSS付き）とラベルを配置する例
{
"comp": "md-tab",
"attributes": {
"slot": "tab"
},
"children": [{
"comp": "span",
"attributes": {
"style": "align-items: center; display: flex;"
},
"children": [{
"comp": "img",
"attributes": {
"src": “http: //my-cdn.com/icon.svg”,
"width": 16,
"height": 16,
"style": "margin-right: 0.5rem;"
}
},
{
"comp": "span",
"textContent": “My Widget Tab”
}
]
}],
},補助情報ペインに複数のタブがある場合、「その他のタブ」ドロップダウンリストが自動的に表示されます。
読みやすさとアクセシビリティのために、カスタムタブツールチップを追加する必要があります。 カスタムタブにツールチップを追加するには、コンポーネントを md-tooltip で囲んでください。 メッセージプロパティにツールチップ情報を入力し、次の例のようにスタイルプロパティの値を適用します。
"comp": "md-tooltip",
"attributes": {
"class": "widget-tabs",
"message": "Sample Tab 1",
"style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: 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"
},-
ドラッグ可能:true に設定します。ドラッグ可能なプロパティの値を -
comp-unique-id: コンポーネントを識別する一意の値を入力してください。例:
"comp-unique-id": "sample-dynamic-custom-tabs"
カスタムタブのドラッグアンドドロップを有効にすると、エージェントはタブを補助情報ペイン内の必要な位置にドラッグアンドドロップできます。 タブをデフォルトのタブ順序にリセットするには、次のプロパティを追加します。
"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": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. エージェントは、 > [タブの順序をリセット] をクリックして、補助情報ペインのタブをデフォルトの順序にリセットできます。 -
tabs-unique-id:comp-unique-idプロパティに定義されているのと同じ一意の値を入力して、md-tabsコンポーネントをマップしてリセットします。
次のサンプルコードでは、その他のアクションとタブオーダーのリセット機能を使用しています。
"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"
}
]
}],
}
デフォルトでは、定義済みのタブのツールチップ、省略記号アイコン、およびタブ順序のリセットが定義されています。
「その他のアクション」ドロップダウンリストを拡張して、「タブオーダーをリセット」 オプションの後にカスタムコンポーネントやウィジェットを追加できます。 以下は、追加のコンポーネントに適用できるスタイルプロパティ値のサンプルセットです。
"comp": "md-tooltip",
"attributes": {
"class": "widget-tabs",
"message": "Sample Element",
"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データプロバイダーと呼ばれるからリアルタイムのデータ更新を受け取ります。
現在、キーストアには単一のデータプロバイダーがあります。 詳細については、『Cisco Webex Contact Centerデスクトップ開発者ガイド』の「データプロバイダー—ウィジェットのプロパティと属性」セクションを参照してください。
プレビューキャンペーンコール
管理者はキャンペーンを作成し、ダイヤルモード（プレビュー）を設定し、 キャンペーンをチームに割り当てます。 エージェントがキャンペーンが割り当てられているチームの一員であれば、 エージェントはアウトバウンドのプレビューキャンペーンコールを行うことができます。 詳細については、「Webex コンタクトセンターの音声アウトバウンドキャンペーンモードの設定」を参照してください。
管理者は、エージェントがキャンペーンコンタクトをプレビューできるように、カスタムレイアウトで以下を設定します。
キャンペーンの連絡先
管理者は、 カスタムレイアウトのヘッダーコンテナにCampaign Contactウィジェットを追加します。 キャンペーンの連絡先には、 定義されたプロパティに基づいた顧客の連絡先情報が表示されます。 レイアウト配置の詳細については、 ページのレイアウトプロパティ行の「プロパティ詳細」テーブルを参照してください。
例:
"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", // include CDN link here
"wrapper":{
"title":"Call Guide", "maximizeAreaName":"app-maximize-area"
},
"properties":{
"lcmKey":"$STORE.agentContact.getCallGuideProps.LCMKey",
"agentDbId":"$STORE.agent.acqueonAgentId",
"lcmUrl":"$STORE.agent.lcmUrl",
"campaignManagerAdditionalInfo":"$STORE.agent.campaignManagerAdditionalInfo"
"orgId": "$STORE.agent.orgId",
"dialerProxyHost": "$STORE.envVaribles.serviceUrls.dialerProxyHost",
"isProgressiveCampaignEnabled": "$STORE.app.featureFlags.isProgressiveCampaignEnabled"
}
}
],
"visibility":"CALL_GUIDE"
}
]
}次のコンププロパティリファレンスが変更されました。プロパティ値のagentxは acqueon に置き換えられます:agentx-プレビュー-キャンペーンはacqueon-プレビュー-キャンペーンに名前が変更されましたagentx-コールガイドはアックオンコールガイドに改名されました
- CDNでリストとキャンペーンマネージャー（LCM）をホストし、
スクリプトプロパティにURLを指定する必要があります。
スクリーンポップ
デスクトップレイアウトでは、次のいずれかの方法でスクリーンポップを設定できます。
-
カスタムページとして
-
カスタムページのウィジェットの1つとして
-
補助情報ペインのタブとして
スクリーンポップは、次の要因に基づいてデスクトップに表示されます。
音声チャンネルの場合：
-
デスクトップレイアウトで定義された構成
-
フローデザイナーで定義されているスクリーンポップアクティビティ
新しいデジタルチャネルの場合：
-
デスクトップレイアウトで定義された構成
-
コネクト・フロー・ビルダーで定義されているスクリーン・ポップ・ノード
スクリーンポップの設定の詳細については、スクリーンポップを参照してください。
ナビゲーションバーのスクリーンポップを設定する
スクリーンポップは、カスタムページとして、またはカスタムページのウィジェットの1つとして設定できます。 Screen Popのカスタムページにアクセスするには、ナビゲーションバーのScreen Popアイコンをクリックします。 カスタムページのスクリーンポップウィジェットにアクセスするには、ナビゲーションバーのカスタムアイコンをクリックします。 ナビゲーションプロパティの詳細については、ナビゲーション（カスタムページ）を参照してください。
例:カスタムページとしてのスクリーンポップ
{
"nav": {
"label": "Screen Pop",
"icon": "pop-out",
"iconType": "momentum",
"navigateTo": "/screenpop",
"align": "top"
},
"page": {
"id": "agentx-wc-screen-pop",
"widgets": {
"comp1": {
"comp": "agentx-wc-screen-pop",
"properties": {
"screenPopUrl": "$STORE.session.screenpop.screenPopSelector"
}
}
},
"layout": {
"areas": [
["comp1"]
],
"size": {
"cols": [1],
"rows": [1]
}
}
},
"visibility": "SCREEN_POP"
}例:カスタムページのウィジェットとしてのスクリーンポップ
"comp1": {
"comp": "agentx-wc-screen-pop",
"properties": {
"screenPopUrl": "$STORE.session.screenpop.screenPopSelector"
}スクリーンポップがフローデザイナーで設定されていない場合、 カスタムページは空白になります。 フローデザイナーでのスクリーンポップの設定の詳細については、 スクリーンポップを参照してください。
補助情報ペインでのスクリーンポップの設定
スクリーンポップを補助情報ペインにタブとして表示するように設定できます。
スクリーンポップがフローデザイナーでInside Desktopとして表示されるように設定されている場合、デフォルトでは、スクリーンポップは補助情報ペインのスクリーンポップタブに新しいサブタブとして表示されます。
スクリーンポップを補助情報ペインのタブとして含めるには、パネルセクションに次の属性を追加してください。 パネルの詳細については、補助情報ペインを参照してください。
例:補助情報ペインのタブとしてのスクリーンポップ
{
"comp":"md-tab",
"attributes":{
"slot":"tab",
"class":"widget-pane-tab"
},
"children":[
{ "comp": "md-icon", "attributes": { "name": "pop-out_16" }},
{ "comp": "span", "textContent": "Screen Pop" }],
"visibility": "SCREEN_POP"
},
{
"comp": "md-tab-panel",
"attributes": { "slot": "panel", "class": "widget-pane" },
"children": [{ "comp": "#SCREEN_POP"
}
],
}フローデザイナーで定義されたスクリーンポップ表示オプションは、デスクトップレイアウトで定義されている設定よりも優先されます。
たとえば、スクリーンポップを次のように設定したとします。
- フローデザイナー-設定を新しいブラウザタブのように表示します
- デスクトップレイアウト—補助情報ペインのタブとして
スクリーンポップが設定されているイベントが発生すると、スクリーンポップはデスクトップの外側、つまり新しいブラウザタブに表示されます。
サンプルユースケース例
ナビゲーションバーからカスタマーエクスペリエンス管理指標ウィジェットを設定してアクセスする
例:
{
"nav": {
"label": "Customer Experience Management Metrics",
"icon": "/app/images/wxm.bcd45cc3.svg",
"iconType": "other",
"navigateTo": "wxm-metrics",
"align": "top"
},
"page": {
"id": "wxm-metrics",
"widgets": {
"comp1": {
"comp": "agentx-wc-cloudcherry-widget",
"attributes": {
"metrics": true
},
"properties": {
"userModel": "$STORE.app.userModel",
"spaceId": "",
"metricsId": "",
"teamId": "$STORE.agent.teamName",
"ani": "$STORE.agentContact.taskSelected.ani",
"isDarkMode": "$STORE.app.darkMode"
},
"wrapper": {
"title": "Customer Experience Journey",
"maximizeAreaName": "app-maximize-area"
}
}
},
"layout": {
"areas": [
["comp1"]
],
"size": {
"cols": [1],
"rows": [1]
}
}
}
},スペースIDとメトリックSIDを取得するには、ドキュメントを参照してください。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ファイルに設定されている既存のローカリゼーションキーを使用してください。 ローカリゼーションキーが設定されていない場合は、デフォルト言語の英語（米国）が使用されます。 シスコサポートにサービスリクエストを送信して、app.jsonファイルにローカリゼーションキーを追加できます。例:ローカリゼーションキー
{ "common": { "buttonTitle": "Stop Timer" } } -
コンポーネントをローカライズするには、デスクトップレイアウトの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",
}
},
},
}例:補助情報ペインのタブコンポーネントをローカライズします
"panel": {
"comp": "md-tab",
"attributes": {
"slot": "tab"
},
"children": [{
"comp": "span",
"textContent": "$I18N.panelTwo.screenPopTitle"
}]
}
