Show incoming call notification in Genesys

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

The following flow diagram shows the sequence of operations performed when a customer dials your service center phone number from their phone:

1. Your Genesys server notifies an incoming call to your microservice by firing an EventRinging event along with EventData as payload. The EventData payload consists of call specific details.
2. The web socket onmessge listener in your toolbar application receives this EventRinging event propagated from the microservice along with the EventData payload.
3. The newComm event is fired from your toolbar application.
4. When the Fusion application identifies this action, it performs the contact number lookup and returns the contact details in the action response.

   To configure the default reverse look up to suit your requirements, see Create Lookup Filters.

5. Finally the Fusion application notifies the agent about the incoming call offer notification through a dialog box, and the agent can answer or decline the call.

Genesys server notifies an incoming call to your microservice by firing an EventRinging message

When an incoming call is received by Genesys, an EventRinging message is propagated to your media toolbar application through the microservice. The message will be having an EventData payload which consists of call specific details.

EventRinging message is received in your media toolbar application

The EventRinging message is received by your web socket listener in your media toolbar application.

Call the newCommEvent action from media toolbar application

When the EventRinging message is received through web socket, the incomingCallHandler 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
        } else if (jsonMessage.eventName === "EventReleased") {
            // Genesys notifies that the call is disconnected
        }
        console.log("Message is received");
    }

The Fusion application performs the contact number lookup

Once the newCommEvent action is received by the Fusion application, it performs the contact number lookup and returns the contact details in the action response. You can render your media toolbar application UI with the returned data.

Incoming call offer notification is shown in Fusion

On receiving the newCommEvent, the Fusion application also shows the incoming call offer notification in the UI.

Agent accepts or rejects the call

From the incoming call offer notification, agent can either answer or reject the call.

Complete code

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
        } 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> {
        // TODO: call the vendor specific api to accept a call
    }
    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

Sign in to your Fusion application and open the media toolbar. Click the Agent Availability button from your media toolbar application. Now, start a call to your customer care number. Your media toolbar state will be changed to RINGING state, and you'll see the incoming notification in your media toolbar application.