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.

Click events

These events occur when an agent 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.

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("conversation.onResolveClick", 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 left_nav_cti placeholder, the app can react to the calling event when the corresponding event trigger occurs.

Event name	Event trigger
calling	When a user clicks the call icon or phone number link that is displayed on any of the following pages of the product UI: Contact list page > Contact hover card > Make call widget Contact list page > Work phone field Contact details page > Work phone and Mobile fields Contact details page > Make call widget

calling

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("calling", eventCallback);
  var eventCallback = function (event) {
  //Retrieve event data
  var data = event.helper.getData();
  // App logic
  };
}

Conversation editor page event

Event name	Event trigger
Click events
conversation.onPrivateNoteClick	When an agent clicks the Private Note button.
conversation.onSendClick	When a user clicks the Send button, Enter to send a message, or the Send button in FAQs.
conversation.onCobrowseClick	When an agent clicks the Cobrowse button.
conversation. onCannedResponseClick	When an agent clicks the Canned Response button.
conversation.onAttachFAQClick	When an agent clicks the FAQs button.
conversation.onAttachFileClick	When an agent clicks the Attach File button.
conversation.onChooseFileClick	When a user clicks the Choose File button.
conversation.onQuickAccessClick	When an agent clicks the Quick Access button.
conversation.onAttachImageClick	When a user clicks the Attach Image button.
conversation.onEmojiClick	When a user clicks the Emoji button.
conversation.onResolveClick	When an agent clicks the Resolve button.
conversation. onResolveAndCreateTicketFDClick	When an agent clicks the Resolve And Create Ticket Freshdesk button.
conversation. onResolveAndCreateTicketFSClick	When an agent clicks the Resolve And Create Ticket Freshsales button.
Intercept events
conversation.onSendMessage	When an agent clicks the Send button. The event payload is the conversation.onSendMessage object.
conversation.onResolveClick	When an agent clicks the Resolve button.
conversation.onReopenClick	When an agent clicks the Reopen button.

User details page events

Event name	Event trigger
Change events
user.saveCustomPropertyClick	When an agent changes a user property and clicks Save.
user.onSaveNameClick	When an agent changes a user’s name and clicks Save.
user.onSavePhoneClick	When an agent changes a user’s phone number and clicks Save.
user.onSaveEmailClick	When an agent changes a user’s email address and clicks Save.

Event and payload descriptions

conversation.onPrivateNoteClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Private Note button.

Sample code

Payload

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

conversation.onSendClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Send button, Enter to send a message, or the Send button in FAQs.

Sample code

Payload

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

conversation.onCobrowseClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent click on the Co-browse button.

Sample code

Payload

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

conversation.onCannedResponseClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent click on the Canned Response button.

Sample code

Payload

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

conversation.onAttachFAQClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent click on the FAQs button.

Sample code

Payload

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

conversation.onAttachFileClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Attach File button.

Sample code

Payload

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

conversation.onChooseFileClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Choose File button.

Sample code

Payload

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

conversation.onQuickAccessClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Quick Access button.

Sample code

Payload

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

conversation.onAttachImageClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Attach Image button.

Sample code

Payload

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

conversation.onEmojiClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Emoji button.

Sample code

Payload

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

conversation.onResolveClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Resolve button.

Sample code

Payload

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

conversation.onResolveAndCreateTicketFDClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Resolve And Create Ticket Freshdesk button.

Sample code

Payload

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

conversation.onResolveAndCreateTicketFSClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Resolve And Create Ticket Freshsales button.

Sample code

Payload

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

conversation.onSendMessage

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Send button.

Sample code

Sample payload

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

conversation.onResolveClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Resolve button.

Sample code

Payload

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

conversation.onReopenClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to an agent's click on the Reopen button.

Sample code

Payload

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

user.saveCustomPropertyClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when an agent changes a user property and clicks Save.

Sample code

Payload

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

user.onSaveNameClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when an agent changes a user's name and clicks Save.

Sample code

Payload

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

user.onSavePhoneClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when an agent changes a user's phone number and clicks Save.

Sample code

Payload

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

user.onSaveEmailClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when an agent changes a user's email address and clicks Save.

Sample code

Payload

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

calling

Conversation editor page event

User details page events

Event and payload descriptions

conversation.onPrivateNoteClick

conversation.onSendClick

conversation.onCobrowseClick

conversation.onCannedResponseClick

conversation.onAttachFAQClick

conversation.onAttachFileClick

conversation.onChooseFileClick

conversation.onQuickAccessClick

conversation.onAttachImageClick

conversation.onEmojiClick

conversation.onResolveClick

conversation.onResolveAndCreateTicketFDClick

conversation.onResolveAndCreateTicketFSClick

conversation.onSendMessage

conversation.onResolveClick

conversation.onReopenClick

user.saveCustomPropertyClick

user.onSaveNameClick

user.onSavePhoneClick

user.onSaveEmailClick

Tutorials

Sample apps

Guides

Blogs

Assist catalog

Events

Use events methodOn this page

Common event

calling

Conversation editor page event

User details page events

Event and payload descriptions

conversation.onPrivateNoteClick

conversation.onSendClick

conversation.onCobrowseClick

conversation.onCannedResponseClick

conversation.onAttachFAQClick

conversation.onAttachFileClick

conversation.onChooseFileClick

conversation.onQuickAccessClick

conversation.onAttachImageClick

conversation.onEmojiClick

conversation.onResolveClick

conversation.onResolveAndCreateTicketFDClick

conversation.onResolveAndCreateTicketFSClick

conversation.onSendMessage

conversation.onResolveClick

conversation.onReopenClick

user.saveCustomPropertyClick

user.onSaveNameClick

user.onSavePhoneClick

user.onSaveEmailClick

Use events method