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.

This section,

Lists, page-wise, 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 an empty JSON for most of these events, the only exception being timer and cti.triggerDialer 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.

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

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 call icon or phone number link that is displayed on any of the following pages of the product UI: Ticket details page > CONTACT DETAILS widget Ticket list page > Contact hover card New ticket page > CONTACT DETAILS widget Contact list page > Contact hover card Contact details page > Contact header and DETAILS widget

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();
  // App logic
  };
}

Ticket details page events

Event name	Event trigger
Click events
ticket.replyClick	When a user clicks the Reply button to open the editor window.
ticket.sendReply	When a user clicks the Send button.
ticket.forwardClick	When a user clicks the Forward button to open the editor window.
ticket.conversationForward	When a user clicks the Forward icon in the conversation.
ticket.forward	When a user clicks the Forward button inside the editor window, the ticket or conversation is forwarded.
ticket.notesClick	When a user clicks the Notes button to open the editor window.
ticket.addNote	When a user clicks the Add Note option from the editor window, a private or public note is added.
ticket.closeTicketClick	When a user clicks the Close button located on the top navigation bar of the Ticket details page.
ticket.deleteTicketClick	When a user clicks the Delete button located on the top navigation bar of the Ticket details page.
ticket.previousTicketClick	When a user clicks the previous ticket icon at the top right of the Ticket details page.
ticket.nextTicketClick	When a user clicks the next ticket icon at the top right of the Ticket details page.
ticket.startTimer	When a user clicks the Start or Add 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.
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 of the ticket.
Intercept events
ticket.closeTicketClick	When a user clicks the Close button located on the top navigation bar of the Ticket details page.
ticket.deleteTicketClick	When a user clicks the Delete button located on the top navigation bar of the Ticket details page.
ticket.propertiesUpdated	When a user updates any ticket property and clicks the Update button on the Ticket details page.
ticket.sendReply	When a user clicks the SEND button on the Ticket details page.

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 a ticket is assigned.
ticket.typeChanged	When a user changes the type of a ticket.

Event and payload descriptions

ticket.replyClick

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 Reply button that opens the editor window.

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.sendReply

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 Send button.

Sample code

Payload

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

ticket.forwardClick

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 Forward button that opens the editor window.

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
  // App logic
  };
}

ticket.conversationForward

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 Forward icon in the conversation that opens the editor window.

Sample code

Payload

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

ticket.forward

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 Forward button in the editor window to forward the ticket or conversation.

Sample code

Payload

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

ticket.notesClick

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 Add note button that opens the editor window.

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.addNote

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 Add Note button in the editor window, which adds a private or public note to the ticket.

Sample code

Payload

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

ticket.closeTicketClick

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 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.deleteTicketClick

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 located as a menu item in the Ticket details page.

Sample code

Payload

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

ticket.previousTicketClick

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 Previous 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.nextTicketClick

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 Next 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.startTimer

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 Start Timer button to start the timer from the TIME LOGS widget. It is also triggered when the user adds a time entry and clicks the Save button.

Sample code

Sample 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.stopTimer

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

Sample 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.updateTimer

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

Sample 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.deleteTimer

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

Sample 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.priorityChanged

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

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.statusChanged

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

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.groupChanged

Use the sample code shown on the right pane > Sample code tab, to enable your app to react twhen a user changes the group assigned to a ticket.

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.agentChanged

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user changes the agent assigned to a ticket.

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.typeChanged

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

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.closeTicketClick

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 Close button located on the top navigation bar of the Ticket details page.

Sample code

{
  //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.deleteTicketClick

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 the Delete button located as a menu item in the Ticket details page.

Sample code

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

ticket.propertiesUpdated

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user updates any ticket property and clicks the Update button located in the PROPERTIES section of 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.sendReply

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 Send button in the editor window.

Sample code

Sample payload

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

Ticket details page events

New ticket page events

Event and payload descriptions

ticket.replyClick

ticket.sendReply

ticket.forwardClick

ticket.conversationForward

ticket.forward

ticket.notesClick

ticket.addNote

ticket.closeTicketClick

ticket.deleteTicketClick

ticket.previousTicketClick

ticket.nextTicketClick

ticket.startTimer

ticket.stopTimer

ticket.updateTimer

ticket.deleteTimer

ticket.priorityChanged

ticket.statusChanged

ticket.groupChanged

ticket.agentChanged

ticket.typeChanged

ticket.closeTicketClick

ticket.deleteTicketClick

ticket.propertiesUpdated

ticket.sendReply

Tutorials

Sample apps

Guides

Blogs

Assist catalog

Events

Use events methodOn this page

Common event

cti.triggerDialer

Ticket details page events

New ticket page events

Event and payload descriptions

ticket.replyClick

ticket.sendReply

ticket.forwardClick

ticket.conversationForward

ticket.forward

ticket.notesClick

ticket.addNote

ticket.closeTicketClick

ticket.deleteTicketClick

ticket.previousTicketClick

ticket.nextTicketClick

ticket.startTimer

ticket.stopTimer

ticket.updateTimer

ticket.deleteTimer

ticket.priorityChanged

ticket.statusChanged

ticket.groupChanged

ticket.agentChanged

ticket.typeChanged

ticket.closeTicketClick

ticket.deleteTicketClick

ticket.propertiesUpdated

ticket.sendReply

Use events method