メディア・ツールバー統合の概要
パートナ・アプリケーションのロードに必要なFusionアプリケーション構成を確認したので、メディア・ツールバーを起動すると、CTIアプリケーションがメディア・ツールバー内にロードされます。 これで、UIイベント・フレームワーク・ライブラリを使用してFusionアプリケーションと通信できます。 そのため、メディア・ツールバー統合の仕組みに関する基本的な概念をいくつか見てみましょう。
サードパーティ・アプリケーションをCTIプロバイダおよびFusionアプリケーションと統合できるように、メディア・ツールバー・アプリケーションに変換する方法を見てみましょう。
まず、CTIプロバイダとFusionアプリケーションの統合に関連するコンポーネントについて説明します。
次に、CTI統合に必要な基本概念を理解します。
最後に、パートナ・アプリケーションから処理されるシナリオがいくつか表示されます。
これをすべて実行したら、メディア・ツールバー・アプリケーションを最初から構築できます。
コンポーネント
統合のコンポーネントを示す図を次に示します:
APIドキュメント
「UIイベント・フレームワークの使用方法」プレイブック
コンセプト
サード・パーティ・サプライヤを統合するために、Fusion CTIは、アクションとイベントの2つのタイプのAPIをライブラリに提供します。
- 適切なコンテキストを取得
- リクエスト・オブジェクトの作成
- APIのコール
パートナ・アプリケーションがFusionアプリケーションに特定の操作を実行させる場合、アクションAPIを使用します。 たとえば、パートナ・アプリケーションは、着信コールを受信したときに着信コール・ダイアログ・ボックスをレンダリングするようFusionアプリケーションに通知します。 このためには、NewCommEventアクションを使用します。
処理 | 説明 |
---|---|
agentStateEvent | このアクションは、パートナ・アプリケーションから起動して、現在ログインしているエージェントがコールを実行または受理する準備を整えることができます。 これにより、Fusionアプリケーションで電話アイコンが有効になります。 |
newCommEvent | CTIサプライヤからパートナ・アプリケーションへの着信コールを受信したら、パートナ・アプリケーションからnewCommEvent アクションを起動して、着信コールについてFusionアプリケーションに通知します。 Fusionアプリケーションは、名前と着信電話番号を含むダイアログ・ボックスをレンダリングします。 |
startCommEvent | パートナ・アプリケーションは、コールがCTIサプライヤまたはFusionアプリケーション(エージェント別)から切断されるたびに、このアクションを起動できます。 |
outboundCommError | パートナ・アプリケーションは、このアクションを起動して、アウトバウンド・イベントの開始中にエラーが発生したことをFusionアプリケーションに通知できます。 |
getConfiguration | パートナ・アプリケーションは、このアクションを起動して、ツールバーがFusionアプリケーションでサポートされている機能を評価できるようにする構成情報を取得できます。 |
disableFeature | ツールバーで機能が実装されていないため、使用可能な機能のサブセットを無効にする必要があることをFusionアプリケーションに通知します。 |
readyForOperation | ツールバーが操作可能な状態であることをFusionアプリケーションに通知します。 |
アクションを起動するコードの例を次に示します:
// Step 1: Get the proper context
const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext();
const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext;
// Step 2: Create the request object
const request: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('<Action Name>');
// Set request object properties
// Step 3: Invoke the API
phoneContext.publish(request).then((res: IOperationResponse) => {
// response after firing the action
}).catch(() => {
})
イベント
エージェントがFusionアプリケーションでアクションを実行するたびに、FusionアプリケーションはMCAライブラリを介してイベントを生成し、これらのイベントをパートナ・アプリケーションでリスニングできます。
パートナ・アプリケーションがFusionアプリケーションでエージェントによって実行されたアクションをリスニングする必要がある場合、イベントAPIを使用します。
たとえば、Fusionアプリケーションは、onOutgoingEventを使用してFusionアプリケーションからアウトバウンド・コールが開始されるとイベントを呼び出します。
イベント | 説明 |
---|---|
onToolbarInteractionCommand |
Fusionアプリケーションでコールを受信すると、エージェントはそれを受け入れる、拒否または切断できます。onToolbarInteractionCommandは、エージェントのアクション(受入れ、拒否または切断)に基づいてFusionアプリケーションから起動されます。
|
onDataUpdated | このイベントは、FusionアプリケーションのDataUpdate イベントをリスニングするために使用されます。 このイベントは、ラップ・アップ詳細とともにwrapup がペイロードとして保存されるときにも起動されます。 |
onOutgoingEvent | Fusionアプリケーションからアウトバウンド・コールが開始されるたびに、このイベントが起動され、パートナ・アプリケーションはこのイベントをリスニングし、アウトバウンド・コールを行うようCTIサプライヤに通知できます。 |
onToolbarAgentCommand | このイベントは、相互作用コマンドをCTIからアプリケーションに渡すために使用されます。 |
イベントをサブスクライブするコードの例を次に示します:
// Step 1: Get the proper context
const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext();
const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext;
// Step 2: Create the request object
const request: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('<Event Name>');
// Set request object properties
// Step 3: Invoke the API
phoneContext.subscribe(request, (response: IEventResponse) => {
// subscription response
});
onDataUpdated
イベントをリスニングするサンプル・コードを次に示します:
// Step 1: Get the proper context
const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext();
const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext;
// Step 2: Create the request object
const request: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onDataUpdated');
// Set request object properties
request.setAppClassification('ORA_SERVICE');
// Step 3: Invoke the API
phoneContext.subscribe(request, (response: IEventResponse) => {
// subscription response
const data = response.getResponseData();
console.log("onDataUpdated Response: ", dataUpdateResponse);
});
シナリオ
CTIアプリケーションの基本的なシナリオは次のとおりです:
- エージェントが通話を実行または受理できるようにします
- 着信コールの処理
- アウトバウンド・コールの処理
パートナ・アプリケーションをMCAアプリケーションとして初期化する方法
- UEF (ui-events-framework) JavaScriptライブラリをパートナ・アプリケーションにインジェクトします。 ライブラリをアプリケーションに注入するコードは次のとおりです:
// Step 1: Include the javascript library in partner application <script src="https://static.oracle.com/cdn/ui-events-framework/libs/ui-events-framework-client.js"></script>
- 次の行を使用して、UEFライブラリを初期化します:
// Step 2: Initialize the library from partner application const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MCA_APP', 'v1');
UEFを初期化するためのJavaScriptコードは次のとおりです:
// Step 2: Initialize the library from partner application const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MCA_APP', 'v1');
シナリオ1: エージェントが通話を実行または受理できるようにします
Fusionアプリケーション・エージェントにサインインすると、自身がコールを受入または実行できるようになります。 このためには、agentStateEventアクションを使用します。 パートナ・アプリケーションから次のコードを実行して、エージェントを使用可能にできます:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null
// Step 1: Get the proper context
const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext();
const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext;
// Step 2: Create the request object
const requestObject: IMcaAgentStateEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('agentStateEventOperation') as IMcaAgentStateEventActionRequest;
// Set request object properties
requestObject.setEventId('1');
requestObject.setIsAvailable(true);
requestObject.setIsLoggedIn(true);
requestObject.setState('AVAILABLE');
requestObject.setStateDisplayString('Idle');
// Step 3: Invoke the API
phoneContext.publish(requestObject).then((operationResponse: IMcaAgentStateEventActionResponse) => {
console.log('AGENT IS READY', operationResponse);
}).catch(() => {
})
JavaScriptコードは次のとおりです:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null
// Step 1: Get the proper context
const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext();
const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE');
// Step 2: Create the request object
const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('agentStateEventOperation');
// Set request object properties
requestObject.setEventId('1');
requestObject.setIsAvailable(true);
requestObject.setIsLoggedIn(true);
requestObject.setState('AVAILABLE');
requestObject.setStateDisplayString('Idle');
// Step 3: Invoke the API
phoneContext.publish(requestObject).then((operationResponse) => {
console.log('AGENT IS READY', operationResponse);
}).catch(() => {
});
イベントの実行後、「電話」アイコンにエージェントが使用可能であることが示されます。
シナリオ2: 着信コールの処理
このシナリオは、次の状態に分割できます:
- リング受信。
- Fusionアプリケーションでコール受入。
- Fusionアプリケーションでコール切断。
受信したリング
顧客がサービス・センター番号をコールしています。 Fusionアプリケーションは、Fusionアプリケーションに担当者レコードが存在するかどうかをチェックし、UIに着信コール・オファー通知も表示します。
次の図は、このシナリオで実行される一連のアクションを示しています:
- コールが最初にCTIサプライヤによって受信され、着信コールがあることをパートナ・アプリケーションに通知します。
-
パートナ・アプリケーションは、newCommEventアクションを起動することで、Fusionアプリケーションへの着信コールを通知できます。
パートナ・アプリケーションから次のコードを実行して、
newCommEvent
アクションを起動できます:// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('newCommEvent') as IMcaNewCommEventActionRequest; // Set request object properties // Set event ID as a unique identifier of the current call event requestObject.setEventId('1'); requestObject.getInData().setInDataValueByAttribute('SVCMCA_ANI', '62738490'); requestObject.getInData().setInDataValueByAttribute("SVCMCA_COMMUNICATION_DIRECTION", "ORA_SVC_INBOUND"); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse: IMcaNewComActionResponse) => { console.log('NEWCOMM FIRED', operationResponse); // Custom logic for handling the partner application UI }).catch(() => { })
JavaScriptは次のとおりです:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('newCommEvent'); // Set request object properties // Set event ID as a unique identifier of the current call event requestObject.setEventId('1'); requestObject.getInData().setInDataValueByAttribute('SVCMCA_ANI', '62738490'); requestObject.getInData().setInDataValueByAttribute("SVCMCA_COMMUNICATION_DIRECTION", "ORA_SVC_INBOUND"); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse) => { console.log('NEWCOMM FIRED', operationResponse); // Custom logic for handling the partner application UI }).catch(() => { });
ノート:setInDataValueByAttribute
ファンクションでは、システム・トークンにリストされている属性の標準リストを設定できます。 カスタム・トークンを渡すこともできます。 次に例を示します:requestObject.getInData().setInDataValueByAttribute("IVR_NUM_1", "TokenValue1");
- Fusionアプリケーションは、アクションを識別した後、担当者番号参照を実行し、アクション・レスポンスの担当者詳細を返します。
デフォルトの逆参照を構成するには、「参照フィルタの作成」を参照してください。
- Fusionアプリケーションは、ダイアログ・ボックスを介して着信コール・オファー通知についてエージェントに通知します。
- エージェントは、コールに応答または拒否できます。
コール受入
エージェントは、Fusionアプリケーションの「回答」ボタンをクリックしてコールを受け入れます。
次の図は、エージェントがFusionアプリケーションからのコールを受け入れるときに実行される一連のアクションを示しています。
- エージェントがFusionアプリケーションの「回答」ボタンをクリックすると、onToolbarInteractionCommandイベントが
accept
のコマンドで起動されます。パートナ・アプリケーションから次のコードを実行して、
onToolbarInteractionCommand
イベントをサブスクライブできます:// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand') as IMcaEventRequest; // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse: IMcaOnToolbarInteractionCommandEventResponse) => { const eventResponseDetails: IMcaOnToolbarInteractionCommandDataResponse = eventResponse.getResponseData(); const command: string = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call break; case "reject": // Notify CTI Vendor to disconnect the call break; } });
JavaScriptコードは次のとおりです:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand'); // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse) => { const eventResponseDetails = eventResponse.getResponseData(); const command = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call break; case "reject": // Notify CTI Vendor to disconnect the call break; } });
- パートナ・アプリケーションは、このイベントを受信し、イベントがコールを
accept
する場合、パートナ・アプリケーションはCTIサプライヤにコールを受け入れるように通知します。 - CTIサプライヤがパートナ・アプリケーションにコールの受入れを通知した後、パートナ・アプリケーションはstartCommEventアクションを起動できます。
パートナ・アプリケーションから次のTypescriptコードを実行して、
startCommEvent
アクションを起動できます:// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const request: IMcaStartCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('startCommEvent') as IMcaStartCommEventActionRequest; request.setAppClassification('ORA_SERVICE'); // Set event ID as a unique identifier of the current call event request.setEventId('1'); // Step 3: Invoke the API phoneContext.publish(request).then((operationResponse: IMcaStartComActionResponse) => { // Extract the required data from response and use for updating the partner app const contactName: string = operationResponse.getResponseData().getData()['SVCMCA_CONTACT_NAME']; // sample for getting the contact name }).catch(() => { });
JavaScriptコードは次のとおりです:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const request = uiEventsFrameworkInstance.requestHelper.createPublishRequest('startCommEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications request.setAppClassification('ORA_SERVICE'); // Set event ID as a unique identifier of the current call event request.setEventId('1'); // Step 3: Invoke the API phoneContext.publish(request).then((operationResponse) => { // Extract the required data from response and use for updating the partner app const contactName = operationResponse.getResponseData().getData()['SVCMCA_CONTACT_NAME']; // sample for getting the contact name }).catch(() => { });
- Fusionアプリケーションがこのアクションを識別すると、一致した担当者とエンゲージメント・パネルが、スクリーン・ポップのFusion構成管理で構成されたルールに基づいて開きます。
スクリーン・ポップ・ルールを構成するには、「サービス・センターのスクリーン・ポップ・ルールの構成」を参照してください。
Fusionアプリケーションでコール拒否
エージェントは、Fusionアプリケーションの「拒否」ボタンをクリックしてコールを拒否します。
次の図は、エージェントがFusionアプリケーションからのコールを拒否したときに実行される一連のアクションを示しています:
- エージェントがFusionアプリケーションの「回答」ボタンをクリックすると、onToolbarInteractionCommandイベントが
reject
のコマンドで起動されます。パートナ・アプリケーションから次のコードを実行して、onToolbarInteractionCommand
イベントをサブスクライブできます:ノート: 前のステップでサブスクリプションをすでに追加している場合は、次のコードをスキップして、追加した既存のサブスクリプションのreject
ケースにロジックを追加できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand') as IMcaEventRequest; // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse: IMcaOnToolbarInteractionCommandEventResponse) => { const eventResponseDetails: IMcaOnToolbarInteractionCommandDataResponse = eventResponse.getResponseData(); const command: string = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call break; case "reject": // Notify CTI Vendor to disconnect the call break; } });
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand'); // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse) => { const eventResponseDetails = eventResponse.getResponseData(); const command = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call break; case "reject": // Notify CTI Vendor to disconnect the call break; } });
- パートナ・アプリケーションは、このイベントを受信し、イベントがコールを拒否する場合、パートナ・アプリケーションは、コールを拒否するようにCTIサプライヤに通知します。
- CTIサプライヤがパートナ・アプリケーションにコールが拒否されたことを通知すると、パートナ・アプリケーションは
reject
の事由でcloseCommEventアクションを起動できます。パートナ・アプリケーションから次のコードを実行して、closeCommEventアクションを起動できます:
Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent') as IMcaCloseCommEventActionRequest; // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties, in this scenario we need to set the reason as reject requestObject.setReason("REJECT"); // Set event ID as a unique identifier of the current call event requestObject.setEventId('1'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse: IMcaCloseComActionResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { })
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties, in this scenario we need to set the reason as reject requestObject.setReason("REJECT"); // Set event ID as a unique identifier of the current call event requestObject.setEventId('1'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { });
- Fusionアプリケーションでこのアクションが識別されると、コール・ダイアログ・ボックスはUIから破棄されます。
Fusionアプリケーションからコール切断
会話が完了すると、エージェントはFusionの「コール終了」ボタンをクリックします。
- エージェントがFusionアプリケーションの「コール終了」ボタンをクリックし、onToolbarInteractionCommandイベントが
disconnect
のコマンドを使用して起動されます。パートナ・アプリケーションから次のコードを実行して、onToolbarInteractionCommand
イベントをサブスクライブできます:ノート: 前のステップでサブスクリプションをすでに追加している場合は、次のコードをスキップして、追加した既存のサブスクリプションのdisconnect
ケースにロジックを追加できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand') as IMcaEventRequest; // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse: IMcaOnToolbarInteractionCommandEventResponse) => { const eventResponseDetails: IMcaOnToolbarInteractionCommandDataResponse = eventResponse.getResponseData(); const command: string = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call break; case "reject": // Notify CTI Vendor to disconnect the call break; } });
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand'); // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse) => { const eventResponseDetails = eventResponse.getResponseData(); const command = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call break; case "reject": // Notify CTI Vendor to disconnect the call break; } });
- パートナ・アプリケーションは、このイベントを受信し、イベントがコールを切断する場合、パートナ・アプリケーションは、CTIサプライヤにコールの切断を通知します。
- CTIサプライヤがパートナ・アプリケーションにコールが切断されたことを通知すると、パートナ・アプリケーションは
closeCommEvent
アクションをWRAPUP
として起動できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent') as IMcaCloseCommEventActionRequest; // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties requestObject.setReason("WRAPUP"); // Set event ID as a unique identifier of the current call event requestObject.setEventId('1'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse: IMcaCloseComActionResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { })
次に、JavaScriptの例を示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties requestObject.setReason("WRAPUP"); // Set event ID as a unique identifier of the current call event requestObject.setEventId('1'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { });
- Fusionアプリケーションは、このアクションを識別すると、UIにラップ・アップ・ウィンドウをレンダリングします。
シナリオ3: アウトバウンド・コール
- アウトバウンド・コールを開始します。
- 通話は顧客によって受け入れられます。
- コールがエージェントまたは顧客によって切断されます。
- 通話は顧客によって拒否されます。
アウトバウンド・コールの開始
エージェントがFusionアプリケーションから電話番号をクリックし、コール状態が鳴っています。
- エージェントは、電話番号をクリックしてFusionアプリケーションからアウトバウンド・コールを開始し、onOutgoingEventが起動します。
パートナ・アプリケーションから次のコードを実行して、
onOutgoingEvent
イベントをサブスクライブできます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onOutgoingEvent') as IMcaEventRequest; // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); let outboundSubscriptionResponse: IMcaonOutgoingEventResponse; // Step 3: Invoke the API phoneContext.subscribe(requestObject, async (eventResponse: IMcaonOutgoingEventResponse) => { // Use the event response to get the phone number and invoke the initiate call api of CTI vendor // Keep the outbound subscription response in a global variable. The outData needs to be set while firing newCommEvent and startCommEvent actions outboundSubscriptionResponse = eventResponse; });
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onOutgoingEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); let outboundSubscriptionResponse // Step 3: Invoke the API phoneContext.subscribe(requestObject, async (eventResponse) => { // Use the event response to get the phone number and invoke the initiate call api of CTI vendor // Keep the outbound subscription response in a global variable. The outData needs to be set while firing newCommEvent and startCommEvent actions outboundSubscriptionResponse = eventResponse; });
- このイベントをリスニングするパートナ・アプリケーションは、CTIサプライヤにコールを開始するよう通知します。
- パートナ・アプリケーションは、newCommEventアクションを公開して、コールの開始をFusionアプリケーションに通知します。
パートナ・アプリケーションから次のコードを実行して、
newCommEvent
アクションを起動できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('newCommEvent') as IMcaNewCommEventActionRequest; // Set request object properties // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent requestObject.setEventId('1'); // outboundSubscriptionResponse is the variable having the subscription response of onOutGoing event const customerInData = { ...outboundSubscriptionResponse.getResponseData().getOutData(), 'callData': { "phoneLineId": "1", "eventId": outboundSubscriptionResponse.getResponseData().getOutData().SVCMCA_CALL_ID, }, 'SVCMCA_COMMUNICATION_DIRECTION': 'ORA_SVC_OUTBOUND', 'SVCMCA_WRAPUP_TIMEOUT': '', 'appClassification': '' }; for (let key in customerInData) { requestObject.getInData().setInDataValueByAttribute(key, customerInData[key]); } // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse: IMcaNewComActionResponse) => { // Handle the custom logic for UI updates here }).catch(() => { })
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('newCommEvent'); // Set request object properties // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent requestObject.setEventId('1'); // outboundSubscriptionResponse is the variable having the subscription response of onOutGoing event const customerInData = { ...outboundSubscriptionResponse.getResponseData().getOutData(), 'callData': { "phoneLineId": "1", "eventId": outboundSubscriptionResponse.getResponseData().getOutData().SVCMCA_CALL_ID, }, 'SVCMCA_COMMUNICATION_DIRECTION': 'ORA_SVC_OUTBOUND', 'SVCMCA_WRAPUP_TIMEOUT': '', 'appClassification': '' }; for (let key in customerInData) { requestObject.getInData().setInDataValueByAttribute(key, customerInData[key]); } // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse) => { // Handle the custom logic for UI updates here }).catch(() => { });
- Fusionアプリケーションからのアクション・レスポンスには、パートナ・アプリケーションがUIをレンダリングするために使用できる担当者詳細があります。
顧客が受入したコール
- 顧客が着信コールを受け入れ、CTIサプライヤがパートナ・アプリケーションに通知します。
- パートナ・アプリケーションは、startCommEventアクションを公開して、Fusionアプリケーションに通知します。
パートナ・アプリケーションから次のコードを実行して、
startCommEvent
アクションを起動できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const request: IMcaStartCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('startCommEvent') as IMcaStartCommEventActionRequest; // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications request.setAppClassification('ORA_SERVICE'); // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent request.setEventId('1'); // Set values from outData of outboundSubscriptionResponse variable to startCommEvent request object for (const property in outboundSubscriptionResponse.getResponseData().getOutData()) { request.getInData().setInDataValueByAttribute(property, outboundSubscriptionResponse.getResponseData().getOutData()[property]); } // Step 3: Invoke the API phoneContext.publish(request).then((operationResponse: IMcaStartComActionResponse) => { // Extract the required data from response and use for updating the partner app const contactName: string = operationResponse.getResponseData().getData()['SVCMCA_CONTACT_NAME']; // sample for getting the contact name }).catch(() => { });
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const request = uiEventsFrameworkInstance.requestHelper.createPublishRequest('startCommEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications request.setAppClassification('ORA_SERVICE'); // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent request.setEventId('1'); // Set values from outData of outboundSubscriptionResponse variable to startCommEvent request object for (const property in outboundSubscriptionResponse.getResponseData().getOutData()) { request.getInData().setInDataValueByAttribute(property, outboundSubscriptionResponse.getResponseData().getOutData()[property]); } // Step 3: Invoke the API phoneContext.publish(request).then((operationResponse) => { // Extract the required data from response and use for updating the partner app const contactName = operationResponse.getResponseData().getData()['SVCMCA_CONTACT_NAME']; // sample for getting the contact name }).catch(() => { });
startCommEvent
を完了すると、パートナ・アプリケーションは、進行中のコールを表示するために必要に応じてUIを更新できます。
エージェントまたは顧客から切断されたコール
- エージェントは、
disconnect
のコマンドを使用してonToolbarInteractionCommandイベントを起動するFusionアプリケーションからのコールを終了します。パートナ・アプリケーションから次のコードを実行して、onToolbarInteractionCommand
イベントをサブスクライブできます:ノート: 前のステップでサブスクリプションをすでに追加している場合は、次のコードをスキップして、追加した既存のサブスクリプションのdisconnect
ケースにロジックを追加できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand') as IMcaEventRequest; // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse: IMcaOnToolbarInteractionCommandEventResponse) => { const eventResponseDetails: IMcaOnToolbarInteractionCommandDataResponse = eventResponse.getResponseData(); const command: string = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call (In this use-case your logic should be here) break; case "reject": // Notify CTI Vendor to reject the call break; } });
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand'); // Step 3: Invoke the API phoneContext.subscribe(requestObject, (eventResponse) => { const eventResponseDetails = eventResponse.getResponseData(); const command = eventResponseDetails.getCommand(); switch (command) { case "accept": // Notify CTI Vendor to accept the call break; case "disconnect": // Notify CTI Vendor to disconnect the call (In this use-case your logic should be here) break; case "reject": // Notify CTI Vendor to reject the call break; } });
- このイベントをリスニングするパートナ・アプリケーションは、CTIサプライヤに通話の切断を通知することで、イベントを処理します。
- コールが切断されると、パートナ・アプリケーションはcloseCommEventを
wrapup
という理由でFusionアプリケーションに公開します。Typescriptの例を次に示します:// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent') as IMcaCloseCommEventActionRequest; // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties, in this scenario we need to set the reason as Wrapup requestObject.setReason("WRAPUP"); // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent requestObject.setEventId("1"); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse: IMcaCloseComActionResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { })
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties, in this scenario we need to set the reason as Wrapup requestObject.setReason("WRAPUP"); // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent requestObject.setEventId("1"); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { });
- Fusionアプリケーションは、ラップ・アップ・フローを実行し、ノートを表示します。
CloseCommEvent
レスポンスで、パートナ・アプリケーションは必要に応じてUIを更新します。
顧客による通話拒否
- 顧客が着信コールを拒否し、CTIサプライヤがパートナ・アプリケーションに通知します。
- パートナ・アプリケーションは、UIを更新し、
closeCommEvent
をFusionアプリケーションに公開します。パートナ・アプリケーションから次のコードを実行して、
closeCommEvent
アクションを起動できます。Typescriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext: IMultiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext: IPhoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE') as IPhoneContext; // Step 2: Create the request object const requestObject: IMcaNewCommEventActionRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent') as IMcaCloseCommEventActionRequest; // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties, in this scenario we need to set the reason as reject requestObject.setReason("REJECT"); // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent requestObject.setEventId("1"); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse: IMcaCloseComActionResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { })
JavaScriptの例を次に示します:
// Please make sure uiEventsFrameworkInstance object is initialized successfully and it is not null // Step 1: Get the proper context const multiChannelAdaptorContext = await uiEventsFrameworkInstance.getMultiChannelAdaptorContext(); const phoneContext = await multiChannelAdaptorContext.getCommunicationChannelContext('PHONE'); // Step 2: Create the request object const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('closeCommEvent'); // Refer https://docs.oracle.com/en/cloud/saas/fusion-service/fairs/application-classification-code.html#s20059918 for the list of supported app classifications requestObject.setAppClassification('ORA_SERVICE'); // Set request object properties, in this scenario we need to set the reason as reject requestObject.setReason("REJECT"); // Set event ID as a unique identifier of the current call event. You can also use SVCMCA_CALL_ID from subscription response of onOutgoingEvent requestObject.setEventId("1"); // Step 3: Invoke the API phoneContext.publish(requestObject).then((operationResponse) => { console.log('closeCommEvent fired', operationResponse); }).catch(() => { });
- パートナ・アプリケーションがUIを更新して、エージェントが使用可能であることを示します。
closeCommEventの理由
次の表に、closeCommEvent
アクションでサポートされる理由を示します。
closeCommEvent理由 | 説明 |
---|---|
WRAPUP | 確立されたコールは終了しましたが、まとめが必要です。 エージェントは、コール後処理詳細の入力を求められます。 |
ENDCOMMUNICATION | 確立されたコールは終了しますが、まとめは必要ありません。 |
ERROR | コールを確立中にエラーが発生しました。 アウトバウンド・ダイヤル失敗に使用されます。 |
REJECT | コールが拒否されました。 |
TIMEDOUT | コールがリング・タイムアウトになりました。 |
ABANDONED | エージェントが応答する前に着信コールがハングアップしました。 |
MISSED | 電話がかかってきませんでした。 これは、コールの確立に失敗するより具体的な理由がない場合のキャッチ・オールです。 |
CANCELED | アウトバウンド・ダイヤル試行が取り消されました。 |
TRANSFERRED | コールが転送されたため終了しました。 |
CONFERENCE | 電話会議が終了しました。 |
LOST | コールが中止されました。 |