Amazonでのエージェント可用性の切替えの設定

エージェントを使用可能にして使用不可にするには、Amazon ConnectストリームAPIのコア・オブジェクトでintCCPメソッドを使用する必要があります。

Streams APIの初期化は、すべてが正しく設定されていること、およびイベントをリスニングできることを確認するための最初のステップです。

次のフロー図は、メディア・ツールバー・アプリケーションで「エージェント可用性」ボタンを切り替えることで、エージェントが自分が使用可能としてマークされると実行される一連の操作を示しています:

Amazonのエージェント可用性の切替え機能。

エージェントは、メディアtoolbaRの「エージェント可用性」ボタンを切り替えます。
Amazon Connect CCPを初期化し、Amazon Connect Streams APIでエージェント・オブジェクトのsetState関数をコールします。
Amazon Connectは、エージェントの状態を更新し、プロミスを解決します。
メディア・ツールバーからagentStateEventOperationを起動して、Fusionアプリケーションのエージェント・ステータスを更新します。
エージェントの状態は、Fusionアプリケーションで更新されます。

VendorHandlerクラスを更新してAmazon Connect Streams APIをコールし、使用可能なエージェントを切り替えます

amazon-connect-streamsのインポートを追加: import "amazon-connect-streams";

次の例に示すように、次のプロパティを追加し、コンストラクタの接続プロパティを更新します:

import { ICtiVendorHandler } from './ICtiVendorHandler';
import "amazon-connect-streams";
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    private connect: any;
    private agent: any;
    private contact: any;
    private integrationEventsHandler: IntegrationEventsHandler;
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.integrationEventsHandler = integrationEventsHandler;
        this.connect = (window as any)["connect"];
    }
//....
}

codeInitializing を指定してvendorHandlerクラスsrc/ts/cti/vendor/vendorHandler.tsにメソッドを作成します。StreamのAPIは、すべてが正しく設定されていて、イベントをリスニングできることを確認するための最初のステップです。

// Intialize Amazon connect ccp
private init() {
    const containerDiv = document.getElementById("amazon-connect-cca-container");
    this.connect.core.initCCP(containerDiv, {
        ccpUrl: 'https://cti-amazon-connect-demo.my.connect.aws/ccp-v2', // REQUIRED
        loginPopup: true, // optional, defaults to `true`
        loginPopupAutoClose: true, // optional, defaults to `false`
        loginOptions: {
            // optional, if provided opens login in new window
            autoClose: true, // optional, defaults to `false`
            height: 600, // optional, defaults to 578
            width: 400, // optional, defaults to 433
            top: 0, // optional, defaults to 0
            left: 0, // optional, defaults to 0
        },
        region: "eu-west-2", // REQUIRED for `CHAT`, optional otherwise
        softphone: {
            // optional, defaults below apply if not provided
            allowFramedSoftphone: true, // optional, defaults to false
            disableRingtone: false, // optional, defaults to false
        },
        pageOptions: {
            //optional
            enableAudioDeviceSettings: false, //optional, defaults to 'false'
            enableVideoDeviceSettings: false, //optional, defaults to 'false'
            enablePhoneTypeSettings: true, //optional, defaults to 'true'
        },
        ccpAckTimeout: 5000, //optional, defaults to 3000 (ms)
        ccpSynTimeout: 3000, //optional, defaults to 1000 (ms)
        ccpLoadTimeout: 10000, //optional, defaults to 5000 (ms)
    });
}

agentSubscribeを初期化するメソッドを追加します。これは、エージェントの初期化時にコールされるメソッドです。エージェントがすでに初期化されている場合、コールは同期され、コールバックはただちに呼び出されます。それ以外の場合は、最初のエージェント・データがアップストリームから受信されたときにコールバックが行われます。このコールバックは、Agent APIオブジェクトとともに提供されます。このAPIオブジェクトは、new connect.Agent()を使用して初期化の完了後いつでも作成できます。
```
private subscribeForAmazonEvents() {
    this.connect.agent((agent: any) => {
        this.agent = agent;
        let state = this.agent.getAgentStates()[0];
        this.agent.setState(state);
    });
}
```

エージェントの状態を更新するには、エージェントのsetStateメソッドを使用します。次の例に示すように、makeAgentAvailableメソッドを更新します:

public async makeAgentAvailable(): Promise<void> {
    if (!this.agent) {
        this.init();
        this.subscribeForAmazonEvents();
    } else {
        let state = this.agent.getAgentStates()[0];
        this.agent.setState(state);
    }
}

次の例に示すように、makeAgentUnavailableメソッドを更新します:

public async makeAgentUnavailable(): Promise<void> {
    let state = this.agent.getAgentStates()[1];
    this.agent.setState(state);
}

担当者コントロール・パネルをロードするためのdivの追加

<div id="amazon-connect-cca-container" style="height: 400px; width: 300"></div>

Stream APIの初期化時に、Amazon Contact Control Panel (CCP)がdiv内のiFrameに埋め込まれます。この例では、カスタム・コール・パネル・コンポーネントではなくCCPを使用しているため、コール・パネル・コンポーネントにdisplay noneスタイルを追加するか、次の例に示すようにindex.htmlのコール・パネルをコメント・アウトすることで、コール・パネルを非表示にできます:

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

完了コード

import { ICtiVendorHandler } from './ICtiVendorHandler';
import "amazon-connect-streams";
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    private connect: any;
    private agent: any;
    private contact: any;
    private integrationEventsHandler: IntegrationEventsHandler;
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.integrationEventsHandler = integrationEventsHandler;
        this.connect = (window as any)["connect"];
    }
    public async makeAgentAvailable(): Promise<void> {
        if (!this.agent) {
            this.init();
            this.subscribeForAmazonEvents();
        } else {
            let state = this.agent.getAgentStates()[0];
            this.agent.setState(state);
        }
    }
    public async makeAgentUnavailable(): Promise<void> {
        let state = this.agent.getAgentStates()[1];
        this.agent.setState(state);
    }
    public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
    }
    public async acceptCall(): Promise<void> {
    }
    public async rejectCall(): Promise<void> {
    }
    public async hangupCall(): Promise<void> {
    }
 
    // Intialize Amazon connect ccp
    private init() {
        const containerDiv = document.getElementById("amazon-connect-cca-container");
        this.connect.core.initCCP(containerDiv, {
            ccpUrl: 'https://cti-amazon-connect-demo.my.connect.aws/ccp-v2', // REQUIRED
            loginPopup: true, // optional, defaults to `true`
            loginPopupAutoClose: true, // optional, defaults to `false`
            loginOptions: {
                // optional, if provided opens login in new window
                autoClose: true, // optional, defaults to `false`
                height: 600, // optional, defaults to 578
                width: 400, // optional, defaults to 433
                top: 0, // optional, defaults to 0
                left: 0, // optional, defaults to 0
            },
            region: "eu-west-2", // REQUIRED for `CHAT`, optional otherwise
            softphone: {
                // optional, defaults below apply if not provided
                allowFramedSoftphone: true, // optional, defaults to false
                disableRingtone: false, // optional, defaults to false
            },
            pageOptions: {
                //optional
                enableAudioDeviceSettings: false, //optional, defaults to 'false'
                enableVideoDeviceSettings: false, //optional, defaults to 'false'
                enablePhoneTypeSettings: true, //optional, defaults to 'true'
            },
            ccpAckTimeout: 5000, //optional, defaults to 3000 (ms)
            ccpSynTimeout: 3000, //optional, defaults to 1000 (ms)
            ccpLoadTimeout: 10000, //optional, defaults to 5000 (ms)
        });
    }
 
    private subscribeForAmazonEvents() {
        this.connect.agent((agent: any) => {
            this.agent = agent;
            let state = this.agent.getAgentStates()[0];
            this.agent.setState(state);
        });
    }
}

進捗の確認

Fusionアプリケーションにサインインし、メディア・ツールバーを開きます。メディア・ツールバー・アプリケーションから「エージェント可用性」ボタンをクリックします。ボタンが色を変更し、Fusionアプリケーションの電話アイコンのステータスが「使用可能」に変わったことがわかります。