Interface Methods

You can use the interface methods to enable an app to trigger certain actions on the Freshcaller web user interface. The interface methods are not available on the Freshcaller widget.

Show Modal

The method opens a modal dialog box in an IFrame to display HTML content to agents. Events methods and interface methods are not supported within the Modal IFrame.


Notes:
  • In the following code, the template field is mandatory. If no value is specified, an error message is displayed when the method is run.
  • The title field is optional and supports 30 characters; beyond that the title is truncated. The default title is Sample Modal.
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
  });

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

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
  });

To retrieve the data within the modal dialog box, in the modal.html file, use the context method as shown in the following code.

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

If the modal dialog box includes data methods, in the modal.html file, include the following fresh_client link.

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

Show Confirmation

The method displays a confirmation dialog box to agents with a message and the save and cancel buttons. The message and labels corresponding the save and cancel buttons can be configured as shown in the following code. By default, the dialog box displays the OK and Cancel buttons.
Timeout for the confirmation dialog box is 10 seconds.

Sample Confirmation Dialog Box with Default Buttons

Notes:
  • In the following code, the message field supports a maximum of 100 characters; beyond that the message is truncated.
  • The saveLabel and cancelLabel fields support a maximum of 11 characters.
Copied Copy 
1
2
3
4
5
6
7
8
9
10
client.interface.trigger("showConfirm", {
    message: "Are you sure you want to save the changes?",
    saveLabel: “OK”,
    cancelLabel: “Cancel”
  /*"message" should be plain text.*/
  }).then(function(result) {
  /* "result" will be either "OK" or "Cancel" */
  }).catch(function(error) {
  // error - error object;
  });

Show Notification

The method displays an alert notification on the user interface.

Sample Alert Notification

Note: In the following code, the message field supports a maximum of 100 characters; beyond that the message is truncated.

Copied Copy 
1
2
3
4
5
6
7
8
9
client.interface.trigger("showNotify", {
    type: "<error | warning | success>",
    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
  });