Front-end events are actions on the product UI, such as button clicks and changes/updates to the UI field values. Events method is an interface that the developer platform provides, to enable your app to react to front-end events.
To enable your app to react to front-end events, in the app.js file,
- Subscribe to the app.initialized event, through an event listener. When the app is initialized, the parent application passes a client reference to the app.
- After app initialization,
- Use the client reference, subscribe to <Event name> and register a callback method to be executed when the event occurs.
- Define the callback method.
When the event occurs, a payload is passed to the callback method. Let us call this payload event. event.type returns the name of the event. The event.helper.getData() helper method returns a JSON object that contains information pertaining to the event. Your app logic can process this data into meaningful results.
Front-end events are of the following types: Click events, Change events, Intercept events.
Currently, for this module, only one click event is supported.
Intercept events
These are events that are paused, while the event listener and the corresponding callback run. The app can choose to allow the original event to complete or block the event.
To enable your app to intercept an event, after app initialization,
- Use the client reference, subscribe to event, register a callback method to be executed when the event occurs, and set intercept as true.
- Define the callback method.
- To allow the event to proceed, use the event.helper.done() helper method.
- To prevent the event from completion, use the event.helper.fail(‘errorMessage’) helper method.
- To obtain data pertaining to the event, use the event.helper.getData() helper method. If your app is intercepting a click event, the method returns an empty JSON.
Common event
If your app is built to be deployed on the left_nav_cti placeholder, the app can react to the calling event when the corresponding event trigger occurs.
| Event name | Event trigger |
|---|---|
| calling | When a user clicks the call icon or phone number link that is displayed on any of the following pages of the product UI:
|
calling
Use the sample code shown on the right pane > Sample code tab, to enable your app to react to user clicks such as the click on a call icon or phone number, on the UI.
Conversation editor page events
| Event name | Event trigger |
|---|---|
| Intercept events | |
| chatConversation.onSendMessage | When an agent clicks the Send button. The event payload is the chatConversation.onSendMessage object. |
Event and payload descriptions
chatConversation.onSendMessage
Use the sample code shown on the right pane > Sample code tab, to enable your app to respond when an agent clicks the Send button in the conversation reply editor for reply messages or email editor for reply emails and forward emails.
Note:The chatConversation.onSendMessage method is only triggered when the send button is clicked on the reply editors of conversations and emails and not on the email conversation creation editor.