Add a call transcript, show suggestions, and summarizations in Genesys

For Genesys transcripts, it's assumed that you'll be providing the transcript text for the ongoing conversation through a websocket.

This section expects, you'll be sending the transcription results from your transcription service as shown in the following example:

INSERT GRAPHIC

The transcription results from the transcription service should follow this format:

{
    "role": "AGENT" OR "END_USER", // Notifies fusion whether to render this transcript as Agent message or End user message.
    "transcript": "Hello", // The message to be rendered.
    "final": true OR false, // If final is set as false, a transcription in progress animation will be shown in Fusion.
    "messageId" :"12345" 

}

Setup Steps

1. In your vendorHandler.ts file, initialize the following class variables:

   export class VendorHandler implements ICtiVendorHandler {
       // ...
       private static TRANSCRIPT_ENDPOINT_URL: string = 'ws://localhost:8080/transcriptResult'; // Your endpoint that sends transcript results
       private static messageIds: string[] = [];
       // ...
   }

2. In makeAgentAvailable function of vendorHandler.ts file, initialize the websocket as shown in the following example:

   public async makeAgentAvailable(): Promise<void> {
           //....
    
           // Transcript result web socker
           let transcriptWebsocket: WebSocket = new WebSocket(`${VendorHandler.TRANSCRIPT_ENDPOINT_URL}`);
           transcriptWebsocket.onopen = this.transcriptWebSocketOnOpenHandler.bind(this);
           transcriptWebsocket.onmessage = this.transcriptWebSocketOnMessage.bind(this);
           transcriptWebsocket.onclose = this.transcriptWebSocketCloseHandler.bind(this);
           transcriptWebsocket.onerror = this.transcriptWebSocketErrorHandler.bind(this);
       }

3. Define the above event listeners as shown in the following example:

   public async transcriptWebSocketOnOpenHandler(): Promise<void> {
           console.log("WebSocket opened");
       }
       public transcriptWebSocketErrorHandler(error: any): void {
           console.log("WebSocket error", error);
       }
       public transcriptWebSocketCloseHandler(event: Event): void {
           console.log("WebSocket is closed", event);
       }
    
       public transcriptWebSocketOnMessage(event: MessageEvent): void {
           const jsonMessage = JSON.parse(event.data);
           console.log(jsonMessage);
           if (jsonMessage.eventName === "TranscriptResult") {
               await this.handleTranscriptResponseFromSpeechService(event);
           }
       }

4. Define the function handleTranscriptResponseFromSpeechService:

   private async handleTranscriptResponseFromSpeechService(event: any): Promise<void> {
           let state = "STARTED";
           const responseFromServer = JSON.parse(event.data);
           const role: string = responseFromServer.role == 'AGENT' ? 'AGENT' : 'END_USER'
           if (responseFromServer.final) {
               state = "CLOSED"
           } else {
               if (VendorHandler.messageIds.includes(responseFromServer?.messageId))  {
                   state = "INPROGRESS";
               } else {
                   VendorHandler.messageIds.push(responseFromServer?.messageId)
               }
           }
           await this.integrationEventsHandler.addRealTimeTranscript(responseFromServer?.messageId, responseFromServer?.transcript, role, state);
       }

Verify your progress

Once you complete these steps, use OJET serve 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. Now, start a call to your customer care number. You'll receive the incoming call notification in your media toolbar application and in your Fusion window. You can accept the call from your media toolbar application or from your Fusion application. Once the conversation is started, you can see the real-time transcripts are getting rendered in the Fusion engagement panel.