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.triggerDialerFreshserviceFreshservice for MSPs

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
  };
}

Ticket details page events

Event name	Event trigger
Click events
ticket.propertiesLoaded	When the ticket properties are loaded.
ticket.replyClick	When a user clicks the Reply button.
ticket.forwardClick	When a user clicks the Forward button.
ticket.notesClick	When a user clicks the Add note button.
ticket.submitClick	When a user clicks the Send button after selecting one of these options - Reply/Forward/Add Note.
ticket.closeTicketClick	When a user clicks the Close button.
ticket.previousTicketClick	When a user clicks the Back icon.
ticket.nextTicketClick	When a user clicks the Forward icon button.
ticket.taskAdded	When a user clicks the Add task button.
ticket.startTimer	When a user clicks the Start Timer button.
ticket.stopTimer	When a user clicks the Stop Timer button.
ticket.updateTimer	When a user clicks the Update Timer button.
ticket.deleteTimer	When a user clicks the Delete Time Entry button.
ticket.moveWorkspaceClick	When a user clicks the Move button of a ticket in a Freshservice product. When a user clicks the Change client button of a ticket associated with the Default client in a Freshservice for MSPs product
Change events
ticket.priorityChanged	When a user changes the priority of a ticket.
ticket.statusChanged	When a user changes the status of a ticket.
ticket.groupChanged	When a user changes the group to which a ticket is assigned.
ticket.agentChanged	When a user changes the agent to whom the ticket is assigned.
ticket.typeChanged	When a user changes the type in the ticket properties.
ticket.urgencyChanged	When a user changes the urgency of a ticket in the ticket properties.
ticket.impactChanged	When a user changes the impact of a ticket in the ticket properties.
ticket.departmentChanged	When a user changes the department of a ticket in the ticket properties.
ticket.categoryChanged	When a user changes the category of a ticket in the ticket properties.
ticket.subCategoryChanged	When a user changes the sub-category of a ticket in the ticket properties.
ticket.itemChanged	When a user changes the category item of a ticket in the ticket properties.
ticket.propertiesUpdated	When a user updates any ticket property and clicks the Update button on the Ticket details page.
ticket.assetAssociated	When a user associates an asset to a ticket.
ticket.problemAssociated	When a user associates a problem to a ticket.
ticket.changeAssociated	When a user associates a change to a ticket
ticket.childticketAssociated	When a user adds a child ticket to a ticket.

New ticket page events

Event name	Event trigger
Change events
ticket.priorityChanged	When a user changes the priority of a ticket.
ticket.statusChanged	When a user changes the status of a ticket.
ticket.groupChanged	When a user changes the group to which a ticket is assigned.
ticket.agentChanged	When a user changes the agent to whom the ticket is assigned.
ticket.urgencyChanged	When a user changes the urgency of a ticket in the ticket properties.
ticket.impactChanged	When a user changes the impact of a ticket in the ticket properties.
ticket.departmentChanged	When a user changes the department of a ticket in the ticket properties.
ticket.categoryChanged	When a user changes the category of a ticket in the ticket properties.
ticket.subCategoryChanged	When a user changes the sub-category of a ticket in the ticket properties.
ticket.itemChanged	When a user changes the category item of a ticket in the ticket properties.
ticket.requesterChanged	When a user changes/adds the requester to a ticket.
ticket.subjectChanged	When a user changes the subject of a ticket.

Event and payload descriptions

ticket.propertiesLoadedFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when ticket properties are loaded. This event is needed when the code uses ticket interface APIs along with ticket_background location.

Sample code

Payload

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

ticket.replyClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Reply button of a ticket.

Sample code

Payload

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

ticket.forwardClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Forward button of a ticket.

Sample code

Payload

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

ticket.notesClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Add note button of a ticket.

Sample code

Payload

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

ticket.submitClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Send button of a ticket after selecting one of these options - Reply/Forward/Add Note.

Sample code

Payload

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

ticket.closeTicketClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Close button located on the top navigation bar of the Ticket Details page.

Sample code

Payload

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

ticket.previousTicketClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Back icon located at the top right of the Ticket Details page.

Sample code

Payload

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

ticket.nextTicketClickFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Forward icon located at the top right of the Ticket Details page.

Sample code

Payload

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

ticket.taskAddedFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Add task button.

Sample code

Payload

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

ticket.startTimerFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks 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("ticket.startTimer", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

ticket.stopTimerFreshserviceFreshservice for MSPs

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

Sample code

Payload

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

ticket.updateTimerFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click on the UPDATE button to update an existing time entry.

Sample code

Payload

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

ticket.deleteTimerFreshserviceFreshservice for MSPs

The event is triggered when a user deletes an existing time entry. Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click 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("ticket.deleteTimer", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

ticket.moveWorkspaceClickFreshserviceFreshservice for MSPs

Use the following sample code to enable your app to react when the user performs any of the following actions on the Ticket Details page:

Clicks the Move button of a ticket in a Freshservice product.
Clicks the Change client button of a ticket associated with the Default client in a Freshservice for MSPs product.

Sample code

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

ticket.priorityChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.statusChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.groupChangedFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane to enable your app to react twhen a user changes the group assigned to a ticket in the ticket properties.

Sample code

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

ticket.agentChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.typeChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.urgencyChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.impactChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.departmentChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.categoryChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.subCategoryChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.itemChangedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.propertiesUpdatedFreshserviceFreshservice for MSPs

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

Sample code

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

ticket.assetAssociatedFreshservice

Use the sample code shown on the right pane to enable your app to react when a user associates an asset to a ticket.

Sample code

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

ticket.problemAssociatedFreshservice

Use the sample code shown on the right pane to enable your app to react when a user associates a problem to a ticket.

Sample code

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

ticket.changeAssociatedFreshservice

Use the sample code shown on the right pane to enable your app to react when a user associates a change to a ticket.

Sample code

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

ticket.childticketAssociatedFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane to enable your app to react when a user adds a child ticket to a ticket.

Sample code

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

ticket.requesterChangedFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane to enable your app to react when a user changes/adds the requester to a ticket.

Sample code

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

ticket.subjectChangedFreshserviceFreshservice for MSPs

Use the sample code shown on the right pane to enable your app to react when a user changes the subject of a ticket.

Sample code

{
  //Configure event listener and subscribe to event
  //Register callback
  client.events.on("ticket.subjectChanged", 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 methodOn this page

Common event

cti.triggerDialerFreshserviceFreshservice for MSPs

Ticket details page events

New ticket page events

Event and payload descriptions

ticket.propertiesLoadedFreshserviceFreshservice for MSPs

ticket.replyClickFreshserviceFreshservice for MSPs

ticket.forwardClickFreshserviceFreshservice for MSPs

ticket.notesClickFreshserviceFreshservice for MSPs

ticket.submitClickFreshserviceFreshservice for MSPs

ticket.closeTicketClickFreshserviceFreshservice for MSPs

ticket.previousTicketClickFreshserviceFreshservice for MSPs

ticket.nextTicketClickFreshserviceFreshservice for MSPs

ticket.taskAddedFreshserviceFreshservice for MSPs

ticket.startTimerFreshserviceFreshservice for MSPs

ticket.stopTimerFreshserviceFreshservice for MSPs

ticket.updateTimerFreshserviceFreshservice for MSPs

ticket.deleteTimerFreshserviceFreshservice for MSPs

ticket.moveWorkspaceClickFreshserviceFreshservice for MSPs

ticket.priorityChangedFreshserviceFreshservice for MSPs

ticket.statusChangedFreshserviceFreshservice for MSPs

ticket.groupChangedFreshserviceFreshservice for MSPs

ticket.agentChangedFreshserviceFreshservice for MSPs

ticket.typeChangedFreshserviceFreshservice for MSPs

ticket.urgencyChangedFreshserviceFreshservice for MSPs

ticket.impactChangedFreshserviceFreshservice for MSPs

ticket.departmentChangedFreshserviceFreshservice for MSPs

ticket.categoryChangedFreshserviceFreshservice for MSPs

ticket.subCategoryChangedFreshserviceFreshservice for MSPs

ticket.itemChangedFreshserviceFreshservice for MSPs

ticket.propertiesUpdatedFreshserviceFreshservice for MSPs

ticket.assetAssociatedFreshservice

ticket.problemAssociatedFreshservice

ticket.changeAssociatedFreshservice

ticket.childticketAssociatedFreshserviceFreshservice for MSPs

ticket.requesterChangedFreshserviceFreshservice for MSPs

ticket.subjectChangedFreshserviceFreshservice for MSPs

Use events method