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 all the front-end events to which the app can react.

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

Click events

These events occur when a user clicks a button or link on the page. The event.helper.getData() method returns the currentCall object for most of these events.

Change events

These events occur when a user changes the value of a field on the UI.

The event.helper.getData() method returns a JSON object that contains the modified values.

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("call.saveAndClose", 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’);
};

conversation_card and widget_conversation_card events

Event name	Event trigger
Click events
call.holdToggled	When an agent holds or releases a call.
call.muteToggled	When an agent mutes or unmutes a call.
call.recordingStarted	When an agent manually starts call recording.
call.recordingPaused	When an agent pauses call recording.
call.recordingResumed	When an agent resumes call recording.
Change events
agent.statusChanged	When an agent’s status is changed.
call.ended	When a call is disconnected.
call.contactEdited	When an agent links another contact to a current call.
call.linkedToAnotherContact	When an agent links another contact to a current call
Intercept events
call.saveAndClose	When an agent clicks the Save and close button.

Event and payload descriptions

call.holdToggled

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click that puts a call on hold or releases a call on hold.

Sample code

Payload

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

call.muteToggled

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click that puts a call on mute or releases a call from mute.

Sample code

Payload

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

call.recordingStarted

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click that starts call recording.

Sample code

Payload

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

call.recordingPaused

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click that pauses call recording.

Sample code

Payload

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

call.recordingResumed

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click that resumes call recording after a pause.

Sample code

Payload

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

agent.statusChanged

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user (agent/admin) changes the agent’s status.

Sample code

Payload

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

call.Ended

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

Sample code

Payload

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

call.contactEdited

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when the app user edits the contact details of the contact involved in the call.

Important:Only an app deployed at coversation_card can react to this event.

Sample code

Payload

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

call.linkedToAnotherContact

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

Sample code

Payload

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

call.saveAndClose

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when the app user clicks the Save and Close button in the coversation_card or widget_conversation_card.

Sample code

Payload

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("call.saveAndClose", eventCallback);
  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

conversation_card and widget_conversation_card events

Event and payload descriptions

call.holdToggled

call.muteToggled

call.recordingStarted

call.recordingPaused

call.recordingResumed

agent.statusChanged

call.Ended

call.contactEdited

call.linkedToAnotherContact

call.saveAndClose

Tutorials

Sample apps

Guides

Blogs

Assist catalog

Events

Use events methodOn this page

conversation_card and widget_conversation_card events

Event and payload descriptions

call.holdToggled

call.muteToggled

call.recordingStarted

call.recordingPaused

call.recordingResumed

agent.statusChanged

call.Ended

call.contactEdited

call.linkedToAnotherContact

call.saveAndClose

Use events method