Accept an incoming call from the Fusion application or toolbar application

Now that you've set up incoming call notifications in your media toolbar application and Fusion application, now you set up accepting them from the media toolbar application and your Fusion application.

You can screen pop the corresponding UI (Customer 360, Service request details,and so on) to help the Agent during the call. Once you do the setup the following setup tasks, you can accept the incoming calls.

Overview of the tasks

Here's an overview of what you need to do:

• Part 1: Accepting incoming calls from your media toolbar application
  1. Add an event handler for the Accept button click event.
  2. Define the callAcceptedEventHandler function.
  3. Define the function acceptIncomingCall in integrationActionHandler.ts file.
  4. Implement the acceptCall() function in the vendorHandler.ts file based on your CTI supplier's SDK.
  5. Define the function notifyCallAcceptedToFusion in fusionHandler.ts file.
• Part 2: Accepting incoming calls from the Fusion application
  1. Add a method called subscribeToToolbarInteractionCommandsFromFusion in the FusionHandler class and write the logic to subscribe to onToolbarInteractionCommand event.
  2. Call the function from the makeAgentAvailable function in the integrationEventsHandler.ts file.
  3. Define the function listenToToolbarInteractionCommandsFromFusion in the integrationEventsHandler.ts file.

Part 1: Accepting incoming calls from your media toolbar application

Once the agent clicks on the Accept button, the call-panel component fires an event notifying its container where the component is loaded. In our case, the component is loaded in the media toolbar application. An event is similarly fired when the Reject button is selected.

Also, a screen pop of the corresponding UI (Customer 360, Service request details, and so on) appears to help the agent during the call.

From the container, an event handler must be defined to handle these events.

The following diagram shows the sequence of actions to be performed when the agent accepts the call from the media toolbar application:

Here's the agent call flow:

1. The agent clicks on the Answer button from the media toolbar application.
2. The Partner application notifies the CTI supplier to accept the call by calling the supplier-specific APIs.
3. Once the CTI supplier notifies the partner application that the call is accepted, the partner application can fire the startCommEvent action.
4. Once the Fusion application identifies this action, the matched contact and an engagement panel is opened based on the rules configured in the Fusion configuration management for the screen pop.

   To configure the screen pop rules, see How do I configure screen pop pages?.

   The following steps show you how to implement this in your toolbar application:

1. Add an event handler for the accept button click event

Add the Accept button clicked event handler in call-panel component as in the following example of the index.html file:

<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. Define callAcceptedEventHandler function

Define the callAcceptedEventHandler function in the appController.ts file as shown in the following example. The callAcceptedEventHandler function internally calls two other functions, acceptIncomingCall, which is defined in integrationActionHandler, and updateCallPanelState, which is defined in appController.ts itself.

//.....
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. Define the function acceptIncomingCall in integrationActionHandler.ts file

The acceptIncomingCall function contains the logic to notify your CTI supplier to accept the call and also it contains the logic to notify the Fusion application that the call is accepted by firing the startCommEvent action.

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. Implement acceptCall() function in vendorHandler.ts file based on your CTI provider's SDK

See your CTI supplier's documentation to identify the API used to accept a call. You can add the logic in the vendorHandler.ts file:

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

5. Define function notifyCallAcceptedToFusion in fusionHandler.ts file

From the fusionHandler.ts, you notify the Fusion application that the call is accepted by firing the startCommEvent action.

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();
    }
    // ...
}

Part 2: Accepting incoming calls from the Fusion application

Now, when an agent clicks the Accept button from the Fusion call notification, you need to notify your media toolbar application and your CTI supplier that the call is accepted by the agent. You need to use the call accepted from the Fusion scenario to handle this. The following diagram shows the sequence of actions to be performed when an agent accepts the call from the Fusion application:

1. When the agent clicks the Answer button in the Fusion application, the onToolbarInteractionCommand event is fired with the command as accept.
2. The partner application receives this event and if the event is to accept a call, the partner application notifies the CTI supplier to accept the call.
3. Once the CTI supplier notifies the partner application that the call is accepted, the partner application fires the startCommEvent action.
4. Once the Fusion application identifies this action, the matched contact and an engagement panel are opened based on the rules configured in the Fusion configuration management for the screen pop.

   To configure the screen pop rules, see How do I configure screen pop pages?.

1: Add a method subscribeToToolbarInteractionCommandsFromFusion in the FusionHandler class and write the logic to subscribe to the onToolbarInteractionCommand event

The agent's interactions, such as accepting, rejecting, and disconnecting phone calls can be identified by subscribing to the onToolbarInteractionCommand event through the UEF API. The event response consists of information about the operations performed by the agent in the Fusion application window. Add a function for the onToolbarInteractionCommand event in the fusionHandler.ts file as shown in the following example:

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());
        });
    }
    // ....
  
}

When an event is received from the Fusion application window, it will execute a callback function by passing the eventType to the callback function.

2. Call the above function from makeAgentAvailable function in integrationEventsHandler.ts

The onToolbarInteractionCommand event subscription must be added during the initial step when an agent is made available. So, subscribeToToolbarInteractionCommandsFromFusion is called when making an agent available. A callback function is also passed as an argument to the subscribeToToolbarInteractionCommandsFromFusion function. The callback function calls another function listenToToolbarInteractionCommandsFromFusion which must be defined in the interactionEventsHandler.ts file itself.

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. Define the function listenToToolbarInteractionCommandsFromFusion in integrationEventsHandler.ts

This function takes a command variable as a parameter. When a call is accepted, the value passed for the command variable is accept. During this case, callAcceptedEventHandler function is launched, which is defined in appController and this will in turn call the acceptCall function in your vendorHandler.ts file and call the startCommEvent action and also updates the call-panel component UI that a call is ACCEPTED.

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

Verify your progress

Once you complete the above steps, use the OJET serves to start your application and sign in to your Fusion application. Open the media toolbar and make your agent available for calls by clicking Agent Availability button. Start a call to your customer care number. You'll receive the incoming call notification in your media toolbar application and your Fusion application window. You can accept the call from your media toolbar application or your Fusion application. Once you accept the call, your media toolbar state will be changed to ACCEPTED state and the engagement will be opened in your Fusion application.