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 Change events and one click event (calling) are supported.
Change events
These events occur when a user changes the value of a field on the UI.
Note:User need not submit the modified value for the event listeners to pick up the event and execute the callback; merely changing the values is sufficient for the event trigger.
The event.helper.getData() method returns a JSON that contains the old and new values of the changed field.
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.
Lead details page events
| Event name | Event trigger |
|---|---|
| lead.update | When a user updates a lead. |
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. |
| Change events | |
| chatConversation.propertiesLoaded | When an agent,
|
Event and payload descriptions
lead.update
Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user updates a lead.
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 either the conversation reply editor or email editor.
Note:The chatConversation.onSendMessage method triggers only when the Send button is clicked in reply editors for conversations and emails; it does not trigger for new email conversation creation.
chatConversation.propertiesLoaded
Important:This event is not supported for a stand-alone Freshsales Classic subscription account.
Use the sample code shown on the right pane > Sample code tab, to enable your app to react when an agent,
- collapses and then reopens the conversation properties widget.
- navigates from one conversation to another.
- updates values within the conversation properties widget.