Accept incoming call in Genesys

Your media toolbar application listens to different events published from the microservice.

There are three ways to accept a call:

1. From your media toolbar application.
2. From your Fusion application.
3. From your softphone configured for Genesys.

The following flow diagram shows the sequence of operations performed once an agent accepts an incoming call from media toolbar or from the Fusion application:

Scenario 1 and 2: Accept call from media toolbar and Fusion applications

1. An agent can accept the call either from the Fusion application or from the media toolbar application. When agent clicks the Answer button in the Fusion application, the onToolbarInteractionCommand event is fired with the command as accept. When the agent accepts the call from media toolbar application,your microservice is notified that the call is accepted.
2. The media toolbar application receives this event and if the event is to accept a call, your microservice is notified to accept the call.
3. When your microservice receives this notification, it requests the Genesys server to accept the call using the com.genesyslab.platform.voice.protocol.tserver.requests.party.RequestAnswerCall request.
4. When the RequestAnswerCall request is success, the EventEstablished message is propagated from Genesys through your microservice to your media toolbar application.
5. The media toolbar application receives the EventEstablished message through the web socket and fires the startCommEvent action.
6. When 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.

Agent accepts the call either from Fusion or from the media toolbar application

The incoming call notification is shown in your media toolbar and your Fusion application. You can answer the call by accepting it from anywhere.

Notify your microservice to accept the call

When the agent answers the call from media toolbar application or from the Fusion application, the microservice is notified that the agent has accepted the call. To enable this, you must update your acceptCall function in the vendorHandler.ts file as shown in the following example:

public async acceptCall(): Promise<void> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "Accept",
            "connectionId": VendorHandler.connectionId
        };
        const request: Request = new Request(`${VendorHandler.REST_ENDPOINT_URL}`, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(message)
        }) as Request;
        await fetch(request);
    }

Microservice creates request for accepting the call

The microservice then uses the PSDK to create request for answering the call.

Microservice receives EventEstablished message

Once the request for answering the call succeeds, the Genesys server responds with the EventEstablished message which is propagated to your media toolbar application through the microservice.

Call the startCommEvent from media toolbar application

When the EventEstablished message is received through the web socket, the callAcceptedHandler function is called from the integrationEventsHandler.ts file as shown in the following example:

public webSocketOnMessage(event: MessageEvent): void {
        const jsonMessage = JSON.parse(event.data);
        console.log(jsonMessage);
        if (jsonMessage.eventName === "EventRegistered") {
            // Genesys notifies that the agent is ready
            this.integrationEventsHandler.makeAgentAvailable();
        } else if (jsonMessage.eventName === "EventRinging") {
            // Show incoming call notification
            this.integrationEventsHandler.incomingCallHandler(jsonMessage.ANI, jsonMessage.eventId);
            VendorHandler.connectionId = jsonMessage.connectionId;
        } else if (jsonMessage.eventName === "EventEstablished") {
            // Genesys notifies that the call is accepted
            this.integrationEventsHandler.callAcceptedHandler(jsonMessage.eventId);
        } else if (jsonMessage.eventName === "EventReleased") {
            // Genesys notifies that the call is disconnected
        }
        console.log("Message is received");
    }

Call is accepted in Fusion application

Your Fusion application shows the call is accepted and the media toolbar application UI updated.

Scenario 3: Accept call from softphone

When the agent accepts the call from softphone, the EventEstablished event sends and accepted notification. You can add logic for handling call accepted scenario in the EventEstablished event.

The following flow diagram shows the sequence of operations performed once an agent accepts an incoming call from the softphone:

1. When an agent accepts the call from the softphone application, the Genesys server is notified to accept the call and when the call accept succeeds, the Genesys server sends the EventEstablished message to your microservice and your microservice propagates this message to your media toolbar application through the web socket.
2. The media toolbar application receives this event, and fires the startCommEvent action.
3. 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.

Microservice propagates EventEstablished message to your media toolbar application

When the agent accepts the call from the softphone application, the Genesys server is notified to accept the call, and once the call is accepted, the Genesys server sends the EventEstablished message to your microservice and your microservice propagates this message to your media toolbar application through the web socket.

Call the startCommEvent from media toolbar application

When the EventEstablished message is received through the web socket, the callAcceptedHandler function is called from the integrationEventsHandler.ts file as shown in the following example:

public webSocketOnMessage(event: MessageEvent): void {
        const jsonMessage = JSON.parse(event.data);
        console.log(jsonMessage);
        if (jsonMessage.eventName === "EventRegistered") {
            // Genesys notifies that the agent is ready
            this.integrationEventsHandler.makeAgentAvailable();
        } else if (jsonMessage.eventName === "EventRinging") {
            // Show incoming call notification
            this.integrationEventsHandler.incomingCallHandler(jsonMessage.ANI, jsonMessage.eventId);
            VendorHandler.connectionId = jsonMessage.connectionId;
        } else if (jsonMessage.eventName === "EventEstablished") {
            // Genesys notifies that the call is accepted
            this.integrationEventsHandler.callAcceptedHandler(jsonMessage.eventId);
        } else if (jsonMessage.eventName === "EventReleased") {
            // Genesys notifies that the call is disconnected
        }
        console.log("Message is received");
    }

Call is accepted in Fusion application

Your Fusion application will show that the call is accepted and the media toolbar application UI will be updated.

Complete Code

Here's the complete code for the vendorHandler.ts file for accepting an incoming call.

import { ICtiVendorHandler } from './ICtiVendorHandler';
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    public static connectionId: string;
    private static REST_ENDPOINT_URL: string = 'http://localhost:8087/genesys/events';
    private static WS_ENDPOINT_URL: string = 'ws://localhost:8087/genesysWs';
    private integrationEventsHandler: IntegrationEventsHandler;
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.integrationEventsHandler = integrationEventsHandler;
    }
 
    public async webSocketOnOpenHandler(): Promise<void> {
        console.log("WebSocket opened");
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "initialize"
        };
        const request: Request = new Request(`${VendorHandler.REST_ENDPOINT_URL}`, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(message)
        }) as Request;
        await fetch(request);
    }
    public webSocketErrorHandler(error: any): void {
        console.log("WebSocket error", error);
    }
    public webSocketCloseHandler(event: Event): void {
        console.log("WebSocket is closed", event);
    }
 
    public webSocketOnMessage(event: MessageEvent): void {
        const jsonMessage = JSON.parse(event.data);
        console.log(jsonMessage);
        if (jsonMessage.eventName === "EventRegistered") {
            // Genesys notifies that the agent is ready
            this.integrationEventsHandler.makeAgentAvailable();
        } else if (jsonMessage.eventName === "EventRinging") {
            // Show incoming call notification
            this.integrationEventsHandler.incomingCallHandler(jsonMessage.ANI, jsonMessage.eventId);
            VendorHandler.connectionId = jsonMessage.connectionId;
        } else if (jsonMessage.eventName === "EventEstablished") {
            // Genesys notifies that the call is accepted
            this.integrationEventsHandler.callAcceptedHandler(jsonMessage.eventId);
            VendorHandler.connectionId = jsonMessage.connectionId;
        } else if (jsonMessage.eventName === "EventReleased") {
            // Genesys notifies that the call is disconnected
        }
        console.log("Message is received");
    }
    public async makeAgentAvailable(): Promise<void> {
        let webSocket: WebSocket = new WebSocket(`${VendorHandler.WS_ENDPOINT_URL}`);
        webSocket.onopen = this.webSocketOnOpenHandler.bind(this);
        webSocket.onmessage = this.webSocketOnMessage.bind(this);
        webSocket.onclose = this.webSocketCloseHandler.bind(this);
        webSocket.onerror = this.webSocketErrorHandler.bind(this);
    }
 
    public async makeAgentUnavailable(): Promise<void> {
        // TODO: call the vendor specific api to make the agent available
    }
    public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
        // TODO: call the vendor specific api to make the make an outbound call
    }
    public async acceptCall(): Promise<void> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "Accept",
            "connectionId": VendorHandler.connectionId
        };
        const request: Request = new Request(`${VendorHandler.REST_ENDPOINT_URL}`, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(message)
        }) as Request;
        await fetch(request);
    }
    public async rejectCall(): Promise<void> {
        // TODO: call the vendor specific api to reject a call
    }
    public async hangupCall(): Promise<void> {
        // TODO: call the vendor specific api to hangup a call
    }
}

Verify your progress

After finishing these steps, use OJET server to start you application and sign in to your Fusion application. Open the media toolbar and make your agent available for calls by clicking on the Agent Availability button. Then, start a call to your customer care number. You'll receive the incoming call notification in your media toolbar application and in your Fusion application window. You can accept the call from your media toolbar application or from your Fusion application or from your softphone application. Once you accept the call, your media toolbar state will change to the ACCEPTED state and the engagement is opened in your Fusion application.