Interface Method

You can use Interface methods to trigger user interface actions on the Inbox page. With these methods, an app can control the visibility of conversation properties, hide or disable buttons, and show dialog boxes and notifications.

Inbox Page

Show Modal - Opens a Modal dialog box in an IFrame to display HTML content to agents.

Note:
Events methods and Interface methods are not supported within the Modal IFrame.

Copied Copy 
1
2
3
4
5
6
7
8
client.interface.trigger("showModal", {
    title: "Sample Modal",
    template: "modal.html"
  }).then(function(data) {
  // data - success message
  }).catch(function(error) {
  // error - error object
  });

Note:
1) The template field is mandatory, if left empty an error message is displayed.
2) The title field is optional and supports only 30 characters, the rest is truncated. The default title is Modal dialog.

To send data from template.html to the modal, add an additional parameter data as shown in the following code.

template.html

Copied Copy 
1
2
3
4
5
6
7
8
9
client.interface.trigger("showModal", {
  title: "Sample Modal",
  template: "modal.html",
  data: {name: "James", email: "James@freshworks.com"}
}).then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

The data can be retrieved inside the modal by using the context method.

modal.html

Copied Copy 
1
2
3
4
5
6
client.instance.context().then(function(context){
console.log(context)
/* Output: { instanceId: "modalinstanceID", location: "location", parentId: "parentinstanceID", modalData: {name: "James", email: "James@freshworks.com"} } */
}.catch(function(error) {
// error - error object
}));

You can transfer data from the modal back to the parent window (or any other location of the same app) by using the Instance method.

If the modal includes Data methods, you need to include the following Freshclient link in the Modal IFrame.

modal.html

Copied Copy 
1
<script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>

Show Confirm - Shows a confirmation dialog with title, message, saveLabel, and cancelLabel to agents. By default, the dialog shows Save and Cancel buttons, you can use saveLabel and cancelLabel to modify the button labels.

Note: Timeout for confirmation dialog is 10 seconds.

Sample confirmation dialog with default buttons

Copied Copy 
1
2
3
4
5
6
7
8
9
client.interface.trigger("showConfirm", {
title: "Sample Confirm",
message: "Are you sure you want to save the changes?"
/*"title" and "message" should be plain text.*/
}).then(function(result) {
/* "result" will be either "Save" or "Cancel" */
}).catch(function(error) {
// error - error object;
});

Note:
1) The template field is mandatory, if left empty an error message is displayed.
2) The title field is optional and supports only 30 characters, the rest are truncated. The default title is Modal dialog.
3) The message field supports a maximum of 100 characters.
4) The saveLabel and cancelLabel fields support a maximum of 11 characters.

Sample confirmation dialog with saveLabel and cancelLabel

Copied Copy 
1
2
3
4
5
6
7
8
9
client.interface.trigger("showConfirm", {
title: "Sample Confirm",
message: "Do you want to save the changes?", saveLabel: "save", cancelLabel: "ignore"
/*"title" and "message" should be plain text.*/
}).then(function(result) {
/* "result" will be either "save" or "ignore" */
}).catch(function(error) {
// error - error object;
});

Note:
1) The message field is mandatory, if left empty an error message is displayed.
2) The type field is mandatory, if left empty an error message is displayed.
3) The title field is optional and supports only 30 characters, the rest are truncated. The default title is Confirmation title.
4) The message field supports a maximum of 100 characters.
5) For an invalid type, an error message, "Unsupported notification type", will be displayed.

Show Notifications - Shows the Alert notification.

Sample alert notification

Copied Copy 
1
2
3
4
5
6
7
8
9
client.interface.trigger("showNotify", {
  type: "alert", title: "Alert",
  message: "This is a sample alert notification."
/* The "message" should be plain text */
}).then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Show Dialog - Shows a dialog box to a user with title and template in an IFrame.

Note:
Show dialog supports all methods except Events methods and Interface methods. Also, you can transfer data from the dialog to the app and vice versa by using the Instance method.

Copied Copy 
1
2
3
4
5
6
7
8
9
10
client.interface.trigger("showDialog", {
  title: "Sample Dialog",
  template: "dialog.html"
  /*"title" should be plain text.*/
  /*"dialog.html" is the "template" within "<yourproject>/app" directory.*/
  }).then(function(data) {
  // data - success message
  }).catch(function(error) {
  // error - error object
  });

Note:
1) The template field is mandatory, if left empty an error message is displayed.
2) The title field is optional and supports only 30 characters, the rest are truncated. The default title is Modal dialog.

Disable Assign to Group - Disables the Assign to Group button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("disable", {id: "assignGroup"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Enable Assign to Group - Enables the Assign to Group button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("enable", {id: "assignGroup"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Disable Assign to Team Member - Disables the Assign to Team member button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("disable", {id: "assignAgent"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Enable Assign to Team Member - Enables the Assign to Team member button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("enable", {id: "assignAgent"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Disable Resolve - Disables the Resolve button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("disable", {id: "resolveConversation"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Enable Resolve - Enables the Resolve button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("enable", {id: "resolveConversation"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Hide Attachment - Hides the Attachment button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("hide", {id: "addAttachment"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Show Attachment - Shows the Attachment button in the conversation panel

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("show", {id: "addAttachment"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Hide Add Image - Hides the Add Image button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("hide", {id: "addImage"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Show Add Image - Shows the Add Image button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("show", {id: "addImage"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Hide CoBrowse - Hides the CoBrowse button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("hide", {id: "coBrowse"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Show CoBrowse - Shows the CoBrowse button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("show", {id: "coBrowse"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Hide Emoji - Hides the Emoji button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("hide", {id: "emojiPicker"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Show Emoji - Shows the Emoji button in the conversation panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("show", {id: "emojiPicker"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Add Text in Message Editor - Adds text in the message editor in the currently open conversation window.

Copied Copy 
1
2
3
4
5
6
7
client.interface.trigger(
"setValue", {id: "editor", value: "Text to be inserted"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Clear Text in Message Editor - Clears existing content in the message editor in the currently open conversation window.

Copied Copy 
1
2
3
4
5
6
7
client.interface.trigger(
"clearValue", {id: "editor"})
.then(function(data) {
// data - success message
}).catch(function(error) {
// error - error object
});

Hide Field/Section - Hides a particular field/section on the information panel that is displayed at the right side of the Inbox page.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("hide", {id: "element"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

The following table lists fields/section that can be hidden.

Field/Section Syntax with the corresponding element name
Email

client.interface.trigger ("hide", {id: "userEmail"})
Phone

client.interface.trigger ("hide", {id: "userPhoneNumber"})
IP

client.interface.trigger ("hide", {id: "userIPAddress"})
Identifier

client.interface.trigger ("hide", {id: "userIdentifier"})
Location

client.interface.trigger ("hide", {id: "userLocation"})
User Properties

client.interface.trigger ("hide", {id: "userCustomProperties"})

Show Field/Section - Displays a particular field/section on the information panel.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("show", {id: "element"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

The following table lists fields/section that can be displayed.

Field/Section Syntax with the corresponding element name
Email

client.interface.trigger ("show", {id: "userEmail"})
Phone

client.interface.trigger ("show", {id: "userPhoneNumber"})
IP

client.interface.trigger ("show", {id: "userIPAddress"})
Identifier

client.interface.trigger ("show", {id: "userIdentifier"})
Location

client.interface.trigger ("show", {id: "userLocation"})
User Properties

client.interface.trigger ("show", {id: "userCustomProperties"})

Disable Email - Hides the Edit icon for the Email field.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("disable", {id: "userEmail"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

Enable Email - Displays the Edit icon for the Email field.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("enable", {id: "userEmail"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

Disable Phone - Hides the Edit icon for the Phone field.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("disable", {id: "userPhoneNumber"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

Enable Phone - Displays the Edit icon for the Phone field.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("enable", {id: "userPhoneNumber"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

Disable User Properties - Hides the Add icon for the User Properties section.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("disable", {id: "userCustomProperties"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});

Enable User Properties - Displays the Add icon for the User Properties section.

Copied Copy 
1
2
3
4
5
6
client.interface.trigger("enable", {id: "userCustomProperties"})
.then(function(data) {
  // data - success message
}).catch(function(error) {
  // error - error object
});