1. How do I use Computer Telephony Integration (CTI)?
  2. Make an outbound call in Genesys

Make an outbound call in Genesys

The following flow diagram shows the sequence of operations performed once an agent starts an outbound call from the Fusion application:

The following flow diagram shows the sequence of operations performed once an agent starts an outbound call from the Fusion application:

The outbound call flow in Genesys.

  1. When the agent starts an outbound call from the Fusion application by clicking on the phone number, the onOutgoingEvent event is fired.
  2. The onOutgoingEvent event listener in your media toolbar application receives this event and notifies your microservice to start an outbound call.
  3. Your microservice starts the call by creating request for making a call using PSDK.
  4. If the request is successful, the EventRinging event is fired from Genesys and propagated to your media toolbar application through the microservice.
  5. When the RequestMakeCall request succeeds, the EventRinging message is propagated from Genesys through your microservice to your media toolbar application.
  6. When the EventEstablished message is received by the media toolbar application, the newCommEvent action notifies the Fusion application.
  7. The Fusion application show the dialing panel when the newCommEvent action is received.

Agent starts an outbound call from fusion application

Agent starts an outbound call from the Fusion application by clicking the phone number, and the onOutgoingEvent event is fired.

Notify Genesys to start a call

The onOutgoingEvent event listener in your media toolbar application receives this event and notifies your microservice to start an outbound call. You can update the makeOutboundCall function as shown in the following example to notify your microservice to start a call:

public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "makeCall",
            "toNumber": phoneNumber,
            "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 starting a call

The microservice uses PSDK for creating requests for making a call using com.genesyslab.platform.voice.protocol.tserver.requests.party.RequestMakeCall request class. If the request succeeds, the EventRinging message is received, and when the customer responds, the EventEstablished message will be received by your microservice.

Microservice receives EventRinging message

Once the request to start the outbound call succeeds, the Genesys server responds with the EventRinging message and it propagated it to your media toolbar application through the microservice.

Call newCommEvent from media toolbar application

Once you receive the EventRinging message from your microservice, you can call the newCommEvent action by executing the function incomingCallHandler in 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);
            VendorHandler.connectionId = jsonMessage.connectionId;
        } else if (jsonMessage.eventName === "EventReleased") {
            // Genesys notifies that the call is disconnected
            this.integrationEventsHandler.callHangupHandler(jsonMessage.eventId);
        }
        console.log("Message is received");
    }

The Fusion application displays the dialing panel

The Fusion application shows the dialing notification once the newCommEvent action is received.

Complete code

Here's the complete code of of the vendorHandler.ts file for starting an outbound 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
            this.integrationEventsHandler.callHangupHandler(jsonMessage.eventId);
        }
        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> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "makeCall",
            "toNumber": phoneNumber,
            "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 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> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "Reject",
            "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 hangupCall(): Promise<void> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Content-type', 'application/json');
        const message: any = {
            "type": "Reject",
            "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);
    }
}

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. To start an outbound call, open the contact from your Fusion application and click the phone number, which starts the outbound call.