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.

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

Currently, for this module, only Click events and Change events are supported.

Click events

These events occur when a user clicks a button or link on the page. The event.helper.getData() method returns an empty JSON for most of these events, the only exception being timer events.

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 cti_sidebar placeholder, the app can react to the cti.triggerDialer event when the corresponding event trigger occurs.

Event name	Event trigger
cti.triggerDialer	When a user clicks the phone number that is displayed on any of the following pages of the product UI: Ticket details page > Requester Information widget Requester details page

cti.triggerDialer

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.

Sample code

Sample payload

{
 //Configure event listener and subscribe to event
  //Register callback


client.events.on('cti.triggerDialer', eventCallback);
var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  console.log(`Clicked phone number: ${data.number}`);
// App logic
  };
}

Change details page events

Event name	Event trigger
Click events
change.submitNote	When a user clicks the Note Submit button.
change.startTimer	When a user clicks the Start Timer button.
change.stopTimer	When a user clicks the Stop Timer button.
change.updateTimer	When a user clicks the Update Timer button.
change.deleteTimer	When a user clicks the Delete Time Entry button.
Change events
change.priorityChanged	When a user changes the priority of a change in the change properties.
change.statusChanged	When a user changes the status of a change in the change properties.
change.groupChanged	When a user changes the group assigned to a change.
change.agentChanged	When a user changes the agent assigned to a change.
change.typeChanged	When a user changes the type of a change in the change properties.
change.impactChanged	When a user changes the impact of a change in the change properties.
change.riskChanged	When a user changes the risk of a change in the change properties.
change.departmentChanged	When a user changes the department of a change in the change properties.
change.categoryChanged	When a user changes the category of a change in the change properties.
change.subCategoryChanged	When a user changes the sub-category of a change in the change properties.
change.itemChanged	When a user changes the category item of a change in the change properties.
change.propertiesUpdated	When a user updates any change property and clicks the update button.
change.plannedStartDateChanged	When a user changes the planned start date of a change in the change properties.
change.plannedEndDateChanged	When a user changes the planned end date of a change in the change properties.

New change page events

Event name	Event trigger
Change events
change.priorityChanged	When a user changes the priority of a change in the change properties.
change.statusChanged	When a user changes the status of a change in the change properties.
change.groupChanged	When a user changes the group assigned to a change.
change.agentChanged	When a user changes the agent assigned to a change.
change.typeChanged	When a user changes the type of a change in the change properties.
change.impactChanged	When a user changes the impact of a change in the change properties.
change.riskChanged	When a user changes the risk of a change in the change properties.
change.departmentChanged	When a user changes the department of a change in the change properties.
change.categoryChanged	When a user changes the category of a change in the change properties.
change.subCategoryChanged	When a user changes the sub-category of a change in the change properties.
change.itemChanged	When a user changes the category item of a change in the change properties.
change.propertiesUpdated	When a user updates any change property and clicks the update button.
change.plannedStartDateChanged	When a user changes the planned start date of a change in the change properties.
change.plannedEndDateChanged	When a user changes the planned end date of a change in the change properties.

Event and payload descriptions

change.submitNote

Use the sample code shown on the right pane to enable your app to react when a user clicks the Note Submit button.

Sample code

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

change.startTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks on the Start Timer button to start the timer from the TIME ENTRIES widget. It is also triggered when the user adds a time entry and clicks the Save button.

Sample code

Payload

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

change.stopTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks on the Stop button to stop a running timer.

Sample code

Payload

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

change.updateTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user updates an existing time entry by clicking the Update button.

Sample code

Payload

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

change.deleteTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when user clicks on the Delete button to delete an existing time entry.

Sample code

Payload

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

change.priorityChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the priority of a change in the change properties.

Sample code

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

change.statusChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the status of a change in the change properties.

Sample code

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

change.groupChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the group assigned to a change.

Sample code

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

change.agentChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the agent assigned to a change.

Sample code

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

change.typeChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the type of a change in the change properties.

Sample code

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

change.impactChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the impact of a change in the change properties.

Sample code

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

change.riskChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the risk of a change in the change properties.

Sample code

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

change.departmentChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the department of a change in the change properties.

Sample code

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

change.categoryChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the category of a change in the change properties.

Sample code

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

change.subCategoryChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the sub-category of a change in the change properties.

Sample code

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

change.itemChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the category item of a change in the change properties.

Sample code

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

change.propertiesUpdated

Use the sample code shown on the right pane to enable your app to react when a user updates any change property and clicks the UPDATE button.

Sample code

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

change.plannedStartDateChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the planned start date of a change in the change properties.

Sample code

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

change.plannedEndDateChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the planned end date of a change in the change properties.

Sample code

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("change.plannedEndDateChanged", 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

Common event

cti.triggerDialer

Change details page events

New change page events

Event and payload descriptions

change.submitNote

change.startTimer

change.stopTimer

change.updateTimer

change.deleteTimer

change.priorityChanged

change.statusChanged

change.groupChanged

change.agentChanged

change.typeChanged

change.impactChanged

change.riskChanged

change.departmentChanged

change.categoryChanged

change.subCategoryChanged

change.itemChanged

change.propertiesUpdated

change.plannedStartDateChanged

change.plannedEndDateChanged

Tutorials

Sample apps

Guides

Blogs

Assist catalog

Events

Use events methodOn this page

Common event

cti.triggerDialer

Change details page events

New change page events

Event and payload descriptions

change.submitNote

change.startTimer

change.stopTimer

change.updateTimer

change.deleteTimer

change.priorityChanged

change.statusChanged

change.groupChanged

change.agentChanged

change.typeChanged

change.impactChanged

change.riskChanged

change.departmentChanged

change.categoryChanged

change.subCategoryChanged

change.itemChanged

change.propertiesUpdated

change.plannedStartDateChanged

change.plannedEndDateChanged

Use events method