Finesse 埋め込み Web アプリケーションガジェットの移行
Finesse 埋め込み Web アプリケーションのガジェットを、Webex Contact Center エージェントデスクトップの iFrame ベースのウィジェットに移行できます。
![]() (注) |
Finesse ガジェットの変換は、Web アプリケーションの構成、つまり iFrame に読み込めるかどうかによってによって異なります。 |
Finesse:埋め込み Web アプリケーションのサンプルガジェット
埋め込み Web アプリケーションのサンプルガジェットは、ガジェット内の iFrame に Web ページを表示します。これは、外部 Web アプリケーションを Finesse ガジェットに配置する例として示すことを目的としています。
埋め込み Web アプリケーションのサンプルガジェットの詳細については、https://github.com/CiscoDevNet/finesse-sample-code/tree/master/EmbeddedWebAppSampleGadget を参照してください。
デスクトップには、iFrame 内に Web アプリケーションを読み込むための固有の機能(Web コンポーネント)があります。デスクトップレイアウト内でコンポーネント agentx-wc-iframe を使用して、水平ヘッダー、ナビゲーションバー、補助情報ペインに Web アプリケーションを読み込むことができます。
Webex Contact Center エージェントデスクトップのウィジェットの詳細については、https://github.com/CiscoDevNet/webex-contact-center-widget-starter/tree/master/Examples を参照してください。
Finesse 埋め込みガジェットファイルは次のとおりです。
-
EmbeddedWebApp.css
-
EmbeddedWebApp.js
-
EmbeddedWebApp.xml
EmbeddedWebApp.xml は、Web アプリケーションの URL を含むメインファイルです。
始める前に
-
Finesse 埋め込みガジェットファイル EmbeddedWebApp.xml からの
スクリプトタイプ
の詳細を理解します。<script type="text/javascript"> // initialize the gadget running the init handler defined in EmbeddedWebApp.js gadgets.HubSettings.onConnect = function () { finesse.modules.EmbeddedWebAppGadget.init("https://www.bing.com"); }; </script>
-
JSON レイアウトフォーマットを理解します。JSON レイアウトの詳細については、『Cisco Webex Contact Center Setup and Administration Guide(Cisco Webex Contact Center 設定およびアドミニストレーションガイド)』の「プロビジョニング(Provisioning)」の章の「デスクトップレイアウト(Desktop Layout)」セクションを参照してください。
手順
ステップ 1 |
Webex Contact Center 管理ポータルから、JSON レイアウトファイルにアクセスします。 |
||
ステップ 2 |
comp プロパティタグ内に、コンポーネント値として agentx-wc-iframe を入力します。
|
||
ステップ 3 |
src attributes プロパティタグ内に、Web アプリケーションの URL を入力します。
|
||
ステップ 4 |
wrapper プロパティタグ内に、タイトルと最大化エリア名を入力します。
|
||
ステップ 5 |
iFrame のサイズを変更するには、style プロパティタグを使用します。
|
||
ステップ 6 |
iFrame 属性を追加するには、attributes プロパティタグを使用します。
|