Events Method

You can use these methods to enable apps to react to events that occur in the user interface of a page. This includes button clicks, changes, and updates to field values. You can register event listeners that are invoked when an event occurs. Some events can be intercepted and an app can decide to allow or prevent the event from completing.

Event Payload
When the callback method is invoked, an event payload is passed to it. The payload is a JavaScript object which contains a type field and data object. 

1
2
3
4
5
// event_type contains the name of the event
var event_type = event.type;

// event_data is a JSON whose value depends on the type of event
var event_data = event.helper.getData();
Click Events

These events occur when an agent clicks a button or link. The helper method event.helper.getData() returns an empty JSON for most of these events.

EVENT NAME DESCRIPTION SAMPLE CODE
conversation.onPrivateNoteClick When an agent clicks the Private Note button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onPrivateNoteClick", eventCallback);

conversation.onSendClick When a user clicks the Send button, Enter to send a message, or the Send button in FAQs.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onSendClick", eventCallback);

conversation.onCobrowseClick When an agent clicks the Cobrowse button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onCobrowseClick", eventCallback);

conversation.
onCannedResponseClick 		When an agent clicks the Canned Response button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.
onCannedResponseClick", eventCallback);

conversation.onAttachFAQClick When an agent clicks the FAQs button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onAttachFAQClick", eventCallback);

conversation.onAttachFileClick When an agent clicks the Attach File button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onAttachFileClick", eventCallback);

conversation.onChooseFileClick When a user clicks the Choose File button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onChooseFileClick", eventCallback);

conversation.onQuickAccessClick When an agent clicks the Quick Access button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onQuickAccessClick", eventCallback);

conversation.onAttachImageClick When a user clicks the Attach Image button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onAttachImageClick", eventCallback);

conversation.onEmojiClick When a user clicks the Emoji button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onEmojiClick", eventCallback);

conversation.onResolveClick When an agent clicks the Resolve button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.onResolveClick", eventCallback);

conversation.
onResolveAndCreateTicketFDClick 		When an agent clicks the Resolve And Create Ticket Freshdesk button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.
onResolveAndCreateTicketFDClick", eventCallback);

conversation.
onResolveAndCreateTicketFSClick 		When an agent clicks the Resolve And Create Ticket Freshsales button.

var eventCallback = function (event) {
console.log(event.type + " event occurred");
};
client.events.on("conversation.
onResolveAndCreateTicketFSClick", eventCallback);

Take a look at the Simple Events API Freshdesk app for a demonstration of this feature.

Change Events

These events occur when an agent changes a value on the user interface. The event is triggered even if the value is not successfully submitted. The helper method event.helper.getData() returns a JSON that contains the new value of the changed field. 

1
2
3
{
  "new": <new_value>
}

EVENT NAME DESCRIPTION SAMPLE CODE
user.saveCustomPropertyClick When an agent changes a user property and clicks Done.

var propertyChangeCallback = function (event)
// code to be executed when the user property is changed.
{
var event_data = event.helper.getData();
console.log(event.type + " data changed to " + event_data.key + event_data.value);
};
client.events.on("user.saveCustomPropertyClick", propertyChangeCallback);

user.onSaveNameClick When an agent changes a user’s name and clicks Save.

var propertyChangeCallback = function (event)
// code to be executed when the user name is changed.
{
var event_data = event.helper.getData();
console.log(event.type + " data changed to " + event_data.new);
};
client.events.on("user.onSaveNameClick", propertyChangeCallback);

user.onSavePhoneClick When an agent changes a user’s phone number and clicks Save.

var propertyChangeCallback = function (event)
// code to be executed when the user phone number is changed.
{
var event_data = event.helper.getData();
console.log(event.type + " data changed to " + event_data.new);
};
client.events.on("user.onSavePhoneClick", propertyChangeCallback);

user.onSaveEmailClick When an agent changes a user’s email address and clicks Save.

var propertyChangeCallback = function (event)
// code to be executed when the user email address is changed.
{
var event_data = event.helper.getData();
console.log(event.type + " data changed to " + event_data.new);
};
client.events.on("user.onSaveEmailClick", propertyChangeCallback);

Intercept Events

These are click events that are paused while the event listener executes. The listener can choose to either allow the original event to complete or it can block the event. 

1
2
3
4
5
// To allow the original event to continue
event.helper.done()

// To prevent the original event from completing
event.helper.fail(‘errorMessage’)

The errorMessage is a string that is displayed as an error notification to the user. The helper method event.helper.getData() returns an empty JSON for intercepting click events while other intercepting events return a payload.

EVENT NAME DESCRIPTION SAMPLE CODE
conversation.onSendMessage When an agent clicks the Send button. The event payload is the conversation.onSendMessage object.

var eventCallback = function (event) { console.log(event.type + " event occurred");
// To allow the original event to continue event.helper.done()
// To prevent the original event from completing event.helper.fail(‘errorMessage’) }; client.events.on("conversation.onSendMessage", eventCallback, {intercept: true});

conversation.onResolveClick When an agent clicks the Resolve button.

var eventCallback = function (event) { console.log(event.type + " event occurred");
// To allow the original event to continue event.helper.done()
// To prevent the original event from completing event.helper.fail(‘errorMessage’) }; client.events.on("conversation.onResolveClick", eventCallback, {intercept: true});

conversation.onReopenClick When an agent clicks the Reopen button.

var eventCallback = function (event) { console.log(event.type + " event occurred");
// To allow the original event to continue event.helper.done()
// To prevent the original event from completing event.helper.fail(‘errorMessage’) }; client.events.on("conversation.onReopenClick", eventCallback, {intercept: true});


The helper method event.helper.getData() returns the following JSON.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
    "conversation": {
      "id": "d00d99dd-7132-4572-a5bd-3e8dd9322dff",
      "url": "http://localhost:4200/a/587545534469/inbox/0/0/conversation/278338226596645?dev=true",
      "app_id": "c69641e9-8a85-4da1-858e-77169b0c76a7",
      "channel_id": "b0247bdb-2796-4489-bd0a-09c22b5440dc",
      "status": "NEW",
      "messages": [
        {
          "id": "84a44c22-6e37-4711-bbbb-b49d581b706f",
          "app_id": "c69641e9-8a85-4da1-858e-77169b0c76a7",
          "actor_id": "e957f3f6-0e33-488f-aa2f-f96103c5ae89",
          "channel_id": "b0247bdb-2796-4489-bd0a-09c22b5440dc",
          "conversation_id": "d00d99dd-7132-4572-a5bd-3e8dd9322dff",
          "message_type": "Normal",
          "actor_type": "Agent",
          "created_time": "2019-10-14T07:55:59.658Z",
          "message_parts": [
            {
              "text": {
                "content": "hello"
              }
            },                     "image":  {
                           "url": "https://fc-use1-00-pics-bkt-00.s3.amazonaws.com/9b…bcf6d7fb24fa31e7898d7fcd801/img_1572675892672.png"
                       },
                       {
                         "content": "bh3f2d4g8g",
                         "contentType": "application/vnd.openxmlformats-officedocument.presentationml.presentation"
                         "fileContentType": "application/vnd.openxmlformats-officedocument.presentationml.presentation"
                        "fileExtension": "pptx"
                        "fileHash": "bh3f2d4g8g"
                        "fileName": "84.pptx"
                        "fileSize": 518470
                        "fragmentType": 6
                        "position": 0
                       }        ]
        }
      ]
    }
  }
EXPAND ↓

Take a look at the Intercepting Events Freshdesk app for a demonstration of this feature.