Freshworks Developer Docs | Use events method

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,
1. Use the client reference, subscribe to <Event name> and register a callback method to be executed when the event occurs.
2. 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.

For a demonstration of this feature, take a look at the events method sample app.

This section,

Lists, page-wise, all the front-end events to which the app can react.method.

Provides sample payloads that are passed to the callback methods, when the events occur.
Describes the payload attributes.

Front-end events are of the following types: Click events, Change events, Intercept events.

Currently, for Freshsales Classic, only Change events 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.

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.

SAMPLE APP.JS

  /*Configure event listener, register callback, set intercept to true*/
client.events.on("chatConversation.onSendMessage", eventCallback, {intercept: true});
  /*Define callback*/
var eventCallback = function (event) {
  console.log(event.type + " event occurred");
    /*Obtain data for event*/
  var event_data = event.helper.getData();
    /*Insert your app logic
    As part of app logic, allow the original event to continue*/
  event.helper.done();
    /*As part of app logic, prevent the original event from completing*/
  event.helper.fail(‘errorMessage’);
};

Lead details page events

Event name	Event trigger
lead.update	When a user updates a lead.

Contact details page events

Event name	Event trigger
contact.update	When a user updates a contact.

Deal details page events

Event name	Event trigger
deal.update	When a user updates a deal.

Sales account details page events

Event name	Event trigger
account.update	When a user updates an account.

Conversation editor page events

Event name	Event trigger
chatConversation.onSendMessage	When an agent clicks the Send button. The event payload is the chatConversation.onSendMessage object.

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.

Sample code

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("lead.update", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

contact.update

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user updates a contact.

Sample code

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("contact.update", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

deal.update

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user updates a deal.

Sample code

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("deal.update", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

account.update

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user updates a sales account.

Sample code

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("account.update", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

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.

Sample code

Sample payload

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("chatConversation.onSendMessage", eventCallback, {intercept: true});
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

Tutorials

Sample apps

Guides

Blogs

Assist catalog

Events

Use events method

Lead details page events

Contact details page events

Deal details page events

Sales account details page events

Conversation editor page events

Event and payload descriptions

lead.update

contact.update

deal.update

account.update

chatConversation.onSendMessage

Tutorials

Sample apps

Guides

Blogs

Assist catalog

Events

Use events methodOn this page

Lead details page events

Contact details page events

Deal details page events

Sales account details page events

Conversation editor page events

Event and payload descriptions

lead.update

contact.update

deal.update

account.update

chatConversation.onSendMessage

Use events method