1. Computer Telephony Integration (CTI)の使用方法
  2. Fusionアプリケーションまたはツールバー・アプリケーションからの着信コールを受け入れます
機械翻訳について

Fusionアプリケーションまたはツールバー・アプリケーションからの着信コールを受け入れます

メディア・ツールバー・アプリケーションおよびFusionアプリケーションで着信コール通知を設定したので、メディア・ツールバー・アプリケーションおよびFusionアプリケーションからの着信コール通知の受け入れを設定します。

対応するUI(顧客360、サービス・リクエストの詳細など)をスクリーン・ポップして、コール中にエージェントを支援できます。 次の設定タスクを設定したら、着信コールを受け入れることができます。

タスクの概要

次に、必要な作業の概要を示します:
  • パート1: メディア・ツールバー・アプリケーションからの着信コールの受入
    1. 「受入」ボタンのクリック・イベントのイベント・ハンドラを追加します。
    2. callAcceptedEventHandlerファンクションを定義します。
    3. ファンクションacceptIncomingCall in integrationActionHandler.tsファイルを定義します。
    4. CTIサプライヤのSDKに基づいて、vendorHandler.tsファイルにacceptCall()関数を実装します。
    5. ファンクションnotifyCallAcceptedToFusion in fusionHandler.tsファイルを定義します。
  • 第2部: Fusionアプリケーションからの着信コールの受入れ
    1. FusionHandler クラスにsubscribeToToolbarInteractionCommandsFromFusionというメソッドを追加し、onToolbarInteractionCommandイベントにサブスクライブするロジックを記述します。
    2. integrationEventsHandler.tsファイルのmakeAgentAvailable関数から関数をコールします。
    3. integrationEventsHandler.tsファイルでファンクションlistenToToolbarInteractionCommandsFromFusionを定義します。

パート1: メディア・ツールバー・アプリケーションからの着信コールの受入

エージェントが「Accept」ボタンをクリックすると、コール・パネル・コンポーネントは、コンポーネントがロードされているコンテナに通知するイベントを起動します。 この場合は、コンポーネントがメディア・ツールバー・アプリケーションにロードされます。 拒否ボタンを選択すると、イベントも同様に起動されます。

また、対応するUI(顧客360、サービス・リクエスト詳細など)の画面ポップアップが表示され、コール中にエージェントが役立ちます。

コンテナから、これらのイベントを処理するためにイベント・ハンドラを定義する必要があります。

次の図は、エージェントがメディア・ツールバー・アプリケーションからの呼び出しを受け入れるときに実行される一連のアクションを示しています:

メディア・ツールバーのシナリオからの着信コールの受け入れを示す図。

エージェント・コール・フローは次のとおりです:

  1. エージェントは、メディア・ツールバー・アプリケーションから「回答」ボタンをクリックします。
  2. パートナ・アプリケーションは、サプライヤ固有のAPIをコールしてコールを受け入れるようにCTIサプライヤに通知します。
  3. CTIサプライヤがパートナ・アプリケーションにコールの受入れを通知すると、パートナ・アプリケーションはstartCommEventアクションを起動できます。
  4. Fusionアプリケーションがこのアクションを識別すると、一致した担当者とエンゲージメント・パネルが、スクリーン・ポップのFusion構成管理で構成されたルールに基づいて開きます。

    スクリーン・ポップ・ルールを構成するには、「スクリーン・ポップ・ページを構成するにはどうすればよいですか。」を参照してください。

    次のステップでは、これをツールバー・アプリケーションに実装する方法を示します:

1. 「受入れ」ボタンのクリック・イベントのイベント・ハンドラを追加

index.htmlファイルの次の例のように、コール・パネル・コンポーネントで「受入れ」ボタンをクリックしたイベント・ハンドラを追加します:

<oj-bind-if test="[[callContext().state === 'RINGING' || callContext().state === 'ACCEPTED']]">
    <call-panel call-context="[[callContext]]"
                on-accept-button-clicked="[[ callAcceptedEventHandler ]]"></call-panel>
</oj-bind-if>

2. callAcceptedEventHandler関数の定義

次の例に示すように、appController.tsファイルでcallAcceptedEventHandler関数を定義します。 callAcceptedEventHandler関数は、integrationActionHandlerで定義される他の2つの関数 acceptIncomingCallと、appController.ts自体で定義される updateCallPanelStateを内部的にコールします。 

//.....
import "oj-c/button";
// ....
  
class RootViewModel {
    // ....
  
    constructor() {
        // ....
    };
 
    public callAcceptedEventHandler: (event: any) => void = (event:  any): void => {
        this.integrationActionHandler.acceptIncomingCall(this.callContext().eventId).then(() => {
            this.updateCallPanelState('ACCEPTED');
        }).catch(() => {
            console.log("Error: Unable to accept the call.")
        });
    }
 
    //...
  }
     
}

3. integrationActionHandler.tsファイルにファンクションacceptIncomingCallを定義

acceptIncomingCallファンクションには、コールを受け入れるようにCTIサプライヤに通知するロジックが含まれています。また、このファンクションには、startCommEventアクションを起動してコールが受け入れられることをFusionアプリケーションに通知するロジックが含まれています。 

import { IntegrationEventsHandler } from "./integrationEventsHandler";
import { ICtiVendorHandler } from "./vendor/ICtiVendorHandler";
import { VendorHandler } from "./vendor/vendorHandler";
import { FusionHandler } from "./fusion/fusionHandler";
  
export class IntegrationActionHandler {
    private vendor: ICtiVendorHandler;
    private integrationEventsHandler: IntegrationEventsHandler;
  
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.vendor = new VendorHandler();
        this.integrationEventsHandler = integrationEventsHandler;
    }
 
    //....
 
    public async acceptIncomingCall(eventId: string): Promise<IMcaStartCommEventOutData> {
        await this.vendor.acceptCall();
        const startCommResponseFromFusion: IMcaStartCommEventOutData = await FusionHandler.notifyCallAcceptedToFusion(eventId);
        return startCommResponseFromFusion;
    }
 
}

4. CTIプロバイダのSDKに基づいて、vendorHandler.tsファイルにacceptCall()関数を実装

CTIサプライヤのドキュメントを参照して、コールの受入れに使用するAPIを特定してください。 vendorHandler.tsファイルにロジックを追加できます: 

import { ICtiVendorHandler } from './ICtiVendorHandler';
   
export class VendorHandler implements ICtiVendorHandler {
    // ....
    public async acceptCall() {
        // TODO: call the vendor specific api to accept a call
    }
    // ....
}

5. fusionHandler.tsファイルにファンクションnotifyCallAcceptedToFusionを定義

fusionHandler.tsから、startCommEventアクションを起動してコールが受け入れられることをFusionアプリケーションに通知します。

export class FusionHandler {
    private static engagementContext: IEngagementContext;
    // ....
    public static async notifyCallAcceptedToFusion(eventId: string): Promise<IMcaStartCommEventOutData> {
        let request: IMcaStartCommEventActionRequest = FusionHandler.frameworkProvider.requestHelper.createPublishRequest('startCommEvent') as IMcaStartCommEventActionRequest;
        const newCommResponse: any = FusionHandler.callToNewCommResponseMap.get(eventId);
        if (newCommResponse) {
            for (const property in newCommResponse) {
                request.getInData().setInDataValueByAttribute(property, newCommResponse[property]);
            }
        }
        //TODO pass unique identifier from your CTI data
        request.setEventId(eventId);
        request.setAppClassification(FusionHandler.appClassification);
        const operationResponse: IMcaStartComActionResponse = await FusionHandler.phoneContext.publish(request) as IMcaStartComActionResponse;
        FusionHandler.engagementContext = operationResponse.getResponseData().getEngagementContext();
        return operationResponse.getResponseData().getOutData();
    }
    // ...
}

第2部: Fusionアプリケーションからの着信コールの受入れ

エージェントがFusionコール通知から「受理」ボタンをクリックすると、メディア・ツールバー・アプリケーションとCTIサプライヤに、エージェントがコールを受け入れたことを通知する必要があります。 これを処理するには、Fusionシナリオから受け入れられたコールを使用する必要があります。 次の図は、エージェントがFusionアプリケーションからのコールを受け入れるときに実行される一連のアクションを示しています:

Fusionアプリケーション・シナリオからの受入れコールを示す図。

  1. エージェントがFusionアプリケーションの「回答」ボタンをクリックすると、onToolbarInteractionCommandイベントがコマンドにacceptとして起動されます。
  2. パートナ・アプリケーションは、このイベントを受信し、イベントがコールを受理する場合、パートナ・アプリケーションは、CTIサプライヤにコールを受理するように通知します。
  3. CTIサプライヤがパートナ・アプリケーションにコールの受入れを通知すると、パートナ・アプリケーションは startCommEventアクションを起動します。
  4. Fusionアプリケーションでこのアクションが識別されると、一致した担当者とエンゲージメント・パネルは、スクリーン・ポップのFusion構成管理で構成されたルールに基づいて開きます。

    スクリーン・ポップ・ルールを構成するには、「スクリーン・ポップ・ページを構成するにはどうすればよいですか。」を参照してください。

1: FusionHandlerクラスにメソッドsubscribeToToolbarInteractionCommandsFromFusionを追加し、onToolbarInteractionCommandイベントをサブスクライブするロジックを記述

通話の受入れ、拒否、切断などのエージェントの相互作用は、UEF APIを介して onToolbarInteractionCommandイベントにサブスクライブすることで識別できます。 イベント・レスポンスは、Fusionアプリケーション・ウィンドウでエージェントによって実行される操作に関する情報で構成されます。 次の例に示すように、onToolbarInteractionCommandイベントのファンクションをfusionHandler.tsファイルに追加します: 

export class FusionHandler {
    // ....
    public static subscribeToToolbarInteractionCommandsFromFusion(callback: Function): void {
        const request: IMcaEventRequest = FusionHandler.frameworkProvider.requestHelper.createSubscriptionRequest('onToolbarInteractionCommand') as IMcaEventRequest;
        FusionHandler.phoneContext.subscribe(request, (eventResponse: IEventResponse) => {
            const eventResponseDetails: IMcaOnToolbarInteractionCommandDataResponse = (eventResponse as IMcaOnToolbarInteractionCommandEventResponse).getResponseData();
            callback(eventResponseDetails.getCommand());
        });
    }
    // ....
  
}

Fusionアプリケーション・ウィンドウからイベントを受信すると、コールバック関数に eventTypeを渡してコールバック関数が実行されます。

2. integrationEventsHandler.tsのmakeAgentAvailable関数から前述の関数をコール

onToolbarInteractionCommandイベント・サブスクリプションは、エージェントが使用可能になった初期ステップ中に追加する必要があります。 そのため、エージェントを使用可能にすると、subscribeToToolbarInteractionCommandsFromFusionがコールされます。 コールバック関数は、引数としてsubscribeToToolbarInteractionCommandsFromFusion関数にも渡されます。 コールバック関数は、 interactionEventsHandler.tsファイル自体で定義する必要がある別の関数listenToToolbarInteractionCommandsFromFusionをコールします。 

export class IntegrationEventsHandler {
    // ....
    public async makeAgentAvailable(): Promise<void> {
        try {
            await FusionHandler.makeAgentAvailable();
            FusionHandler.subscribeToToolbarInteractionCommandsFromFusion((command: string) => { this.listenToToolbarInteractionCommandsFromFusion(command); });
            this.ctiAppViewModel.agentState(true);
        } catch (err) {
            console.log("Error while making agent available", err)
        }
    }
    // ....
  
}

3. integrationEventsHandler.tsでファンクションlistenToToolbarInteractionCommandsFromFusionを定義

この関数は、パラメータとしてコマンド変数を取ります。 コールが受け入れられると、コマンド変数に渡される値はacceptです。 この場合、callAcceptedEventHandlerファンクションが起動され、これはappControllerで定義され、vendorHandler.tsファイルのacceptCall ファンクションがコールされ、startCommEventアクションがコールされ、コールがACCEPTEDのコール・パネル・コンポーネントUIも更新されます。 

export class IntegrationEventsHandler {
    // ....
    public listenToToolbarInteractionCommandsFromFusion(command: string): void {
        switch (command) {
            case "accept":
                 this.ctiAppViewModel.callAcceptedEventHandler(null);
                break;
        }
    }
    // ....
  
}

進捗の確認

前述のステップを完了したら、OJETサービスを使用してアプリケーションを起動し、Fusionアプリケーションにサインインします。 メディア・ツールバーを開き、エージェントの使用可ボタンをクリックして、エージェントがコールに使用できるようにします。 カスタマ・ケア番号へのコールを開始します。 メディア・ツールバー・アプリケーションおよびFusionアプリケーション・ウィンドウで着信コール通知を受信します。 このコールは、メディア・ツールバー・アプリケーションまたはFusionアプリケーションから受け入れることができます。 コールを受け入れると、メディア・ツールバーの状態がACCEPTED状態に変更され、エンゲージメントがFusionアプリケーションで開きます。