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) { |
conversation.onSendClick | When a user clicks the Send button, Enter to send a message, or the Send button in FAQs. |
var eventCallback = function (event) { |
conversation.onCobrowseClick | When an agent clicks the Cobrowse button. |
var eventCallback = function (event) { |
conversation. onCannedResponseClick |
When an agent clicks the Canned Response button. |
var eventCallback = function (event) { |
conversation.onAttachFAQClick | When an agent clicks the FAQs button. |
var eventCallback = function (event) { |
conversation.onAttachFileClick | When an agent clicks the Attach File button. |
var eventCallback = function (event) { |
conversation.onChooseFileClick | When a user clicks the Choose File button. |
var eventCallback = function (event) { |
conversation.onQuickAccessClick | When an agent clicks the Quick Access button. |
var eventCallback = function (event) { |
conversation.onAttachImageClick | When a user clicks the Attach Image button. |
var eventCallback = function (event) { |
conversation.onEmojiClick | When a user clicks the Emoji button. |
var eventCallback = function (event) { |
conversation.onResolveClick | When an agent clicks the Resolve button. |
var eventCallback = function (event) { |
conversation. onResolveAndCreateTicketFDClick |
When an agent clicks the Resolve And Create Ticket Freshdesk button. |
var eventCallback = function (event) { |
conversation. onResolveAndCreateTicketFSClick |
When an agent clicks the Resolve And Create Ticket Freshsales button. |
var eventCallback = function (event) { |
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) |
user.onSaveNameClick | When an agent changes a user’s name and clicks Save. |
var propertyChangeCallback = function (event) |
user.onSavePhoneClick | When an agent changes a user’s phone number and clicks Save. |
var propertyChangeCallback = function (event) |
user.onSaveEmailClick | When an agent changes a user’s email address and clicks Save. |
var propertyChangeCallback = function (event) |
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"); |
conversation.onResolveClick | When an agent clicks the Resolve button. |
var eventCallback = function (event) {
console.log(event.type + " event occurred"); |
conversation.onReopenClick | When an agent clicks the Reopen button. |
var eventCallback = function (event) {
console.log(event.type + " event occurred"); |
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 } ] } ] } } |
Take a look at the Intercepting Events Freshdesk app for a demonstration of this feature.