1. How do I use Computer Telephony Integration (CTI)?
  2. Set up toggle Agent Availability in Genesys

Set up toggle Agent Availability in Genesys

The following flow diagram shows the sequence of operations performed once agent marks themselves available by clicking the toggle Agent Availability button in the media toolbar application:

Toggle Agent Availability in Genesys.

Overview

Here's an overview of the sequence of operations performed once an agent marks themselves as available by clicking the toggle Agent Availability button in the media toolbar application:

  1. The agent clicks the Toggle Agent Availability button on the media toolbar.
  2. Media toolbar application starts a web socket connection to your Java microservice.
  3. The microservice accepts the connection and listens for web socket messages.
  4. If the web socket connection is successful from your media toolbar application, it notifies your microservice to register an agent.
  5. When your microservice receives this notification, Your microservice should:
    1. Register a DN for your agent to use by using the com.genesyslab.platform.voice.protocol.tserver.requests.dn.RequestRegisterAddress request
    2. Sign in your agent using the com.genesyslab.platform.voice.protocol.tserver.requests.agent.RequestAgentLogin.RequestAgentLogin request
    3. Once the login is success, EventRegistered event is fired from your microservice.
  6. When the RequestRegisterAddress request is success, the EventRegistered message is propagated from Genesys through your microservice to your media toolbar application.
  7. After the EventRegistered event is received in your media toolbar application, the agentStateEvent UEF operation is launched to make the agent state available.
  8. Finally, the Fusion application identifies the action, and the agent state is made as available in Fusion also.

Agent clicks the toggle Agent Availability button on the media toolbar

First the agent clicks the Agent Availability button on the media toolbar to become available.

Media toolbar application starts a web socket connection to your Java microservice

The microservice publishes events through a web socket. You need to initialize this web socket in your media toolbar application as your first step. This can be done when the agent selects the Agent Availability button in your application. Here are some examples:

Define static variables in the vendorHandler.ts file for keeping the microservice endpoint URLs as shown in the following example:

export class VendorHandler implements ICtiVendorHandler {
    private static REST_ENDPOINT_URL: string = 'http://localhost:8087/genesys/events';
    private static WS_ENDPOINT_URL: string = 'ws://localhost:8087/genesysWs';
}

You can initialize the web socket from makeAgentAvailable function in your vendorHandler.ts file as shown in the following example:

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

Define webSocketOnOpenHandler, webSocketCloseHandler, webSocketErrorHandler and webSocketOnMessage functions as:

public async webSocketOnOpenHandler(): Promise<void> {
    console.log("WebSocket opened");
}
public webSocketErrorHandler(error): void {
    console.log("WebSocket error", error);
}
public webSocketCloseHandler(event: Event): void {
    console.log("WebSocket is closed", event);
}
public webSocketOnMessage(event: MessageEvent): void {
    // webSocketOnMessage function acts as the listener for events published from the Java Microservice.
    const jsonMessage = JSON.parse(event.data);
    console.log(jsonMessage);
    if (jsonMessage.eventName === "EventRegistered") {
        // Genesys notifies that the agent is ready through the Java microservice
    } else if (jsonMessage.eventName === "EventRinging") {
        // Show incoming call notification
    } 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 webSocketOnMessage function acts as the listener for events published from the Java microservice.

The microservice accepts the connection and listens for web socket messages and notifies your microservice to register an agent

After making a successful web socket connection from your media toolbar application, you need to notify the microservice to register an agent. This can be done from the webSocketOnOpenHandler function. Update your webSocketOnOpenHandler function as shown below to notify your microservice to register the agent by firing a REST API call:

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

Microservice creates request for registering an agent through PSDK and notifies that the Agent is registered

The microservice uses PSDK for creating requests. After the request for registering an agent succeeds, the Genesys server responds with the EventRegistered event which propagates to your media toolbar application through the microservice.

Microservice receives EventRegistered message

Once the request for registering the DN succeeds the Genesys server responds with the EventRegistered message which is propagated to your media toolbar application through the microservice.

Invoke agentStateEvent from media toolbar application

When the EventRegistered event is received through web socket, the makeAgentAvailable function in started 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
        } 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");
    }

Agent state is enabled in the Fusion application

You'll see the agent state as enabled in the Fusion application.

Complete code

Here's the complete code of the vendorHandler.ts file for making the agent status as available.

import { ICtiVendorHandler } from './ICtiVendorHandler';
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    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
        } 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. You'll see that the button color changes to and the phone icon status in the Fusion application is changed to Available.