1. How do I use the UI Events Framework?
  2. Handle incoming calls

Handle incoming calls

This scenario can divided into four states.

  1. Call received
  2. Call accepted from Fusion
  3. Call rejected from Fusion
  4. Call disconnected from Fusion

Call received

During this state, a customer is calling a service center number and phone line is ringing.

A graphic showing the ring received scenario.

This scenario goes this way:
  1. The call is first received by the CTI supplier which notifies the partner application that there's an incoming call.
  2. The partner application notifies the Fusion application of the incoming call by firing the newCommEvent action.

    The following code can be executed from the partner application to fire a newCommEvent action:

    // 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
requestObject.setEventId('1');
requestObject.getInData().setInDataValueByAttribute('SVCMCA_ANI', phoneNumber);
requestObject.getInData().setInDataValueByAttribute("SVCMCA_COMMUNICATION_DIRECTION", "ORA_SVC_INBOUND");
requestObject.setAppClassification('ORA_SERVICE');

// Step 3: Invoke the API
phoneContext.publish(requestObject).then((operationResponse: IMcaNewComActionResponse) => {
    // Custom logic for handling the partner application UI
}).catch(() => {
})
  3. Once the Fusion application identifies this action, it performs the contact number lookup and return the contact details in the action response.
  4. Finally the Fusion application notifies the agent about the incoming call through a dialog box.
  5. At this point, the agent can either answer or decline the call.

Call accepted from Fusion

In this scenario the agent clicks the Answer button, accepting the call. A graphic showing the call accepted scenario.

  1. When the agent clicks the Answer button in the Fusion application, the onToolbarInteractionCommand event is fired with the command as accept.

    Here's the code to listen to the onToolbarInteractionCommand event. This code can be executed from the partner application to subscribe to onToolbarInteractionCommand event:

    // 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;
        }
}).catch(() => {
})
  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 can fire the startCommEvent action.

    The following code can be executed from the partner application to fire a startCommEvent action:

    // 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');
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(() => {
});
  4. Once the Fusion application identifies this action, the matched contact and an engagement panel will be opened based on the rules configured in the Fusion configuration management for the screen pop.

Call rejected from Fusion

In this scenario, the agent clicks the Decline button to reject the call.

A graphic showing the call rejected scenario
  1. When the agent clicks the Answer button in the Fusion application, the onToolbarInteractionCommand event is fired with command as reject.
    The following code can be executed from the partner application to subscribe to the onToolbarInteractionCommand event:
    // 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;
        }
}).catch(() => {
})
  2. The partner application receives this event and if the event is to reject a call, the partner application notifies the CTI supplier to reject the call.
  3. Once the CTI supplier notifies the partner application that the call is rejected, the partner application can fire the closeCommEvent action with reason as REJECT.

    The following code can be executed from the partner application to fire a closeCommEvent action:

    // 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;
// Set request object properties, in this scenario we need to set the reason as reject
requestObject.setReason("REJECT");

// Step 3: Invoke the API
phoneContext.publish(requestObject).then((operationResponse: IMcaCloseComActionResponse) => {
    console.log('closeCommEvent fired', operationResponse);
}).catch(() => {
})
  4. Once the fusion application identifies this action, the call dialog box will be discarded from the UI.

Call disconnected from Fusion

In this scenario, the agent clicks the End Call button in Fusion when the conversation is complete.

A graphic showing the call disconnected scenario.

  1. When the agent clicks the End Call button in the Fusion application, the onToolbarInteractionCommand event is fired with the disconnect command.

    The following code can be executed from the partner application to subscribe to the onToolbarInteractionCommand event:

    // 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;
        }
}).catch(() => {
})
  2. The partner application receives this event and if the event is to disconnect a call, the partner application notifies the CTI supplier to disconnect the call.
  3. Once the CTI supplier notifies the partner application that the call is disconnected, the partner application can fire the closeCommEvent action.
    // 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;
// Set request object properties
requestObject.setReason("WRAPUP");

// Step 3: Invoke the API
phoneContext.publish(requestObject).then((operationResponse: IMcaCloseComActionResponse) => {
    console.log('closeCommEvent fired', operationResponse);
}).catch(() => {
})
  4. Once the Fusion application identifies this action, it renders the wrap up window in the UI.