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:
- Your Genesys server notifies an incoming call to your microservice by firing an
EventRinging
event along withEventData
as payload. TheEventData
payload consists of call specific details. - The web socket
onmessge
listener in your toolbar application receives thisEventRinging
event propagated from the microservice along with the EventData payload. - The newComm event is fired from your toolbar application.
- 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.
-
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 EventRingin
g 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.