Events

When the Call Summary and Call Tagging user interface needs to request data or perform an action in the CTI backend, it raises an SDK Event that the Partner Application must listen for.

For example, when an agent puts a call on hold in the Call Summary and Call Tagging user interface , the application would raise an event to request that the Partner Application place the call on hold. Similarly, when agent requests to summarize the call, the application requests the text transcript from the Partner Application by raising an event.

The Partner Application listens for these events and performs the requested action, typically using CTI-provided APIs, and responds by invoking appropriate operations with the requested data.

Supported events include:

• serviceGuideCti:agent:status:update
• serviceGuideCti:call:disconnect
• serviceGuideCti:call:mute
• serviceGuideCti:call:unmute
• serviceGuideCti:call:hold
• serviceGuideCti:call:resume
• serviceGuideCti:request:transcript
• serviceGuideCti:call:wrapUp
• serviceGuideCti:agent:logout

To streamline the event emitting mechanism and provide a consistent way to respond to these events, the Service Guide SDK is defined as an instance of the EventEmitter class. Additionally, all of these events are wrapped inside a single event that is emitted by the SDK and targeted to the CTI iFrame. Implementers can listen for a single event and inspect the event details to know which specific event has been requested.

This example shows how to handle events using an SDK instance that was initialized in an earlier code snippet and shows how to invoke another operation on the SDK in response to an event:

// SDK Loading and Initialization code
...
 
// Assuming the SDK instance is named "serviceGuideSdk"
 
// Read all CTI specific event names
const events = serviceGuideSdk.getCtiSdkEvents();
 
// "serviceGuideSdk.getSdkEventName()" gives the single, wrapper event name.
// Since the SDK is an "EventEmitter" instance, you can directly call ".on()" function to subscribe to it.
 
serviceGuideSdk.on(serviceGuideSdk.getSdkEventName(), async ({eventName, payload}) => {
 
    // "eventName" will contain the actual name of the event listed above that was emitted by Service Guide.
 
     switch (eventName) {
 
          case events.updateAgentStatus: // Refers to the constant defined by Service Guide SDK for the "serviceGuideCti:agent:status:update" event.
               // Assuming CTI vendor has below API
               if(payload.data.isAgentReady) {
                 try {
                   const response = await ctiSdk.ApiClient.markUserReady({...});
                   if(response.ok) {
                      // Now let Service Guide know that the agent status has been updated to "ready"
                      serviceGuideSdk.Ui.agentStatusUpdated({ data: {isAgentReady: true} });
                   }
                 } catch (error) {
                   // Error occurred while updating the agent status in the backend. Let Service Guide know with an error payload.
                   serviceGuideSdk.Ui.agentStatusUpdated({ error: {isError: true, message: 'READY_STATUS_UPDATE_FAILED'} });
                 }
               } else {
                 try {
                   const response = await ctiSdk.ApiClient.markUserBusy({...});
                   if(response.ok) {
                      // Now let Service Guide know that the agent status has been marked as "busy"
                      serviceGuideSdk.Ui.agentStatusUpdated({ data: {isAgentReady: false} });
                   }
                 } catch (error) {
                   // Error occurred while updating the agent status in the backend. Let Service Guide know with an error payload.
                   serviceGuideSdk.Ui.agentStatusUpdated({ error: {isError: true, message: 'NOT_READY_STATUS_UPDATE_FAILED'} });
                 }
               }
               break;
 
          case events.disconnectCall:
                    // disconnect the call and invoke "endCallSession" operation to let Service Guide know.
               break;
 
          case events.requestTranscript:
               // Assuming CTI vendor has below API to get Agent transcript
               const agentTranscript = await ctiSdk.ApiClient.getInternalTranscript(payload.data.callId);
 
               // Assuming CTI vendor has below API to get Customer transcript             
               const customerTranscript = await ctiSdk.ApiClient.getExternalTranscript(payload.data.callId);
 
               // map the CTI provided transcript in to the necessary format that Service Guide understands,
               // i.e. an array of elements containing "text", "offsetMs" and "channel" properties
 
               const mappedAgentTranscript = mapToOperationFormat(agentTranscript);
               const mappedCustomerTranscript = mapToOperationFormat(customerTranscript);
 
               // Provide the transcript to Service Guide as part of "transcriptReceived" operation
               serviceGuideSdk.Ui.transcriptReceived({
                    data: {
                        agentTranscripts: mappedAgentTranscript,
                        customerTranscripts: mappedCustomerTranscript
                    }
               });
               break;
          ...
     }
});
 
// You can also take modularized approach and define multiple "handlers" to handle specific event
 
serviceGuideSdk.on(serviceGuideSdk.getSdkEventName(), handleAgentStatusUpdate);
serviceGuideSdk.on(serviceGuideSdk.getSdkEventName(), handleTranscriptGeneration);
...
 
// and define individual handlers above as
const handleAgentStatusUpdate = async ({eventName, payload}) => {
    if (eventName === events.updateAgentStatus) {
        ... // update agent status and let Service Guide know.
    }
});
 
const handleTranscriptGeneration = async ({eventName, payload}) => {
    if (eventName === events.requestTranscript) {
        ... // Retrieve the transcripts and send them to Service Guide.
    }
});
   

{
    data: {
         isAgentReady: boolean
    }
}

{
    data: {
       callId: string
   }
}

{
    data: {
       callId: string
   }
}

{
    data: {
       callId: string
   }
}

{
    data: {
       callId: string
   }
}

{
    data: {
       callId: string
   }
}

{
    data: {
       callId: string
   }
}

{
    data: {
        callId: string,
       agentNotes: string,
       tags: array<string>
    }
}