Make an outbound call in Amazon

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

1. Agent starts an outbound call from the Fusion application by clicking 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 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. Once the RequestMakeCall request is success, the EventRinging message is propagated from Genesys through your microservice to your media toolbar application.
6. Once the EventEstablished message is received by the media toolbar application, the newCommEvent action is started to notify Fusion application.
7. The Fusion application will show the dialing panel once this newCommEvent action is received.

Agent starts an outbound call from fusion application

The 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 to create requests for making a call using the com.genesyslab.platform.voice.protocol.tserver.requests.party.RequestMakeCall request class. If the request is successful, 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 for starting outbound call is success, the Genesys server responds with the EventRinging message and it will be propagated to your media toolbar application through the microservice.

Start the newCommEvent from media toolbar application

When 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");
    }

Fusion will show dialing panel

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

Complete code

Here's the complete code 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.