Build secure end-user apps

You can build such an app (securely) for our customer’s support portal (end)users and submit the app as a Freshworks app or a Custom app.

Prerequisites: NVM, Node, and Freshworks CLI.

To create an app that is deployed on the support portal:

1. From the command line, navigate to an empty directory in which you want to create the app.
2. Run the following command.

   fdk create

3. A prompt to choose a product is displayed.
4. Select freshdesk and press Enter. A prompt to choose a template is displayed.
5. Select your_first_visitor_app. A new app is created based on the your_first_visitor_app template. The directory/file structure is as follows:

   ├── README.md
   ├── visitor-app
   │     ├── index.html
   │     ├── scripts
   │     │       └── app.js
   │     └── styles
   │             ├── images
   │             │        └── icon.svg
   │             └── style.css
   ├── config
   │       └── iparams.json
   └── manifest.json

The visitor-app directory contains the files required to render the front-end component of an app. For more information on the files created, see Create an App.

The Freshworks developer platform offers the following placeholders to render apps on the customer’s support portal.

The following image shows a customised support portal with an app for end user’s rendered on the Ticket Details page:

portal_tickets_details_sidebar - For the app to be rendered on the right side-bar of the customer’s support portal - Ticket Details page, in manifest.json configure the location as follows.

The following image shows a customised support portal with an app for end users rendered on the New Ticket page:

portal_tickets_new_sidebar - For the app to be rendered on the right side-bar of the customer’s support portal - New Ticket page, in manifest.json configure the location as follows.

You can use the interface methods to enable an app to trigger certain actions on the customer’s support portal user interface.

You can use the following methods to display a confirmation dialog box or notification on the customer’s support portal:

• showConfirm
• showNotify

The method displays a confirmation dialog box. The method displays a specified message; by default, the method displays the Save and Cancel buttons along with the message.

The message and the labels corresponding to the save and cancel buttons can be configured as shown in the following code.

The method displays a notification on the customer’s support portal UI.

• Hide ticket fields
• Show ticket fields
• Disable ticket fields
• Enable ticket fields
• Set a ticket field as a mandatory field
• Set the options for a drop-down/select ticket field
• Set the value of a ticket field

Hides a specified ticket field on the Customer support portal - Ticket Details.

List of ticket fields that you can hide by using the hide method:

Displays a specified ticket field on the Customer support portal - Ticket Details.

List of ticket fields that you can display by using the show method:

Disables data entry for a specified ticket field on the Customer support portal - Ticket Details.

List of ticket fields for which you can disable data entry:

Enables data entry for a specified ticket field on the Customer support portal - Ticket details.

List of ticket fields for which you can enable data entry:

Displays an asterisk next to the field label and makes the field a mandatory field.

List of ticket fields that you can set as mandatory fields:

On the Customer support portal - New Ticket page, identifies a drop-down/select field by the field’s id and sets the field’s options to the values specified in the value array.

List of ticket fields that you can set as mandatory fields:

On the Customer support portal - New Ticket page, identifies a field by the field’s id and sets the field’s value to the specified value.

List of ticket fields that you can set as mandatory fields:

• Hide ticket fields
• Show ticket fields
• Disable ticket fields
• Enable ticket fields
• Set a ticket field as a mandatory field
• Set the options for a drop-down/select ticket field
• Set the value of a ticket field

Hides a specified ticket field on the Customer support portal - New Ticket page.

List of ticket fields that you can hide by using the hide method:

Displays a specified ticket field on the Customer support portal - New Ticket page.

List of ticket fields that you can display by using the show method:

Disables data entry for a specified ticket field on the Customer support portal - New Ticket page.

List of ticket fields for which you can disable data entry:

Enables data entry for a specified ticket field on the Customer support portal - New Ticket page.

List of ticket fields for which you can enable data entry:

Displays an asterisk next to the field label and makes the field a mandatory field.

List of ticket fields that you can set as mandatory fields:

On the Customer support portal - New Ticket page, identifies a drop-down/select field by the field’s id and sets the field’s options to the values specified in the value array.

List of ticket fields that you can set as mandatory fields:

On the Customer support portal - New Ticket page, identifies a field by the field’s id and sets the field’s value to the specified value.

List of ticket fields that you can set as mandatory fields:

You can use the events methods to enable apps to react to UI events that occur in the Customer support portal’s UI. The events include button clicks or changes and updates to field values. You can register event listeners that invoke callback methods when an event occurs. Some events can be intercepted and your app can decide to allow or prevent the event from completing.

To register an event listener:

1. From the app's root directory (visitor-app), navigate to app.js.

2. Specify the event name, associate the callback method, and define the callback method as follows:

Note:For a list of all possible <eventName> values, see Ticket Details page - Possible events and their triggers and New Ticket page - Possible events and their triggers.

When an event occurs, the callback method is invoked and an event payload is passed to the method. The payload is a JavaScript object and contains the type attribute that specifies the name of the event. Some events also send event specific data to the callback method. You can retrieve the data by using the event.helper.getData(); method. For events that do not send any data to the callback methods, event.helper.getData(); returns an empty JSON.

Note:No event specific data is passed to the callback method and if used, event.helper.getData(); returns an empty JSON.

event.helper.getData(); returns a JSON object with the following attributes.

{
  "field": "requester",
  "oldValue": "old_req@email.com",
  "newValue": "new_req@email.com"
}

event.helper.getData(); returns a JSON object with the following attributes.

{
  "field": "requester",
  "oldValue": "old_req@email.com",
  "newValue": "new_req@email.com"
}

Note:No event specific data is passed to the callback method and if used, event.helper.getData(); returns an empty JSON.

Note:No event specific data is passed to the callback method and if used, event.helper.getData(); returns an empty JSON.

event.helper.getData(); returns a JSON object with the following attributes.

{
  "field": "requester",
  "oldValue": "old_req@email.com",
  "newValue": "new_req@email.com"
}

event.helper.getData(); returns a JSON object whose attributes contain the ticket details.

Sample data that event.helper.getData(); returns

{
  cf_dependent_field: "category 2"
  cf_level_2: "-1"
  cf_level_2585940: "-1"
  cf_nested_field: "category 2"
  cf_test: "true"
  cf_test_decimal: "1.10"
  cf_test_number: "12"
  description_html: ""
  email: "bob.tree@freshdesk.com"
  group_id: ""
  name: ""
  priority: "1"
  product_id: "2"
  responder_id: "23"
  status: "2"
  subject: "Order not received"
  ticket_type: "Order related"
}

You can use the data methods to retrieve information pertaining to the different entities on the Customer Support Portal.

You can use the following data methods to retrieve information about:

• portal
• user

An organization that uses Freshdesk can configure multiple Customer Support Portals based on factors such as the number of products or offerings the organization supports. The portal method returns the details of the support portal that the end user has logged into.

try{
  let data = await client.data.get("portal");
  // success
}catch(error){
// error
}

Attributes of the portal object

Returns details of the end user accessing the customer support portal.

try{
  let data = await client.data.get("user");
  // success
}catch(error){
// error
}

Attributes of the user object

You can use the following data methods to retrieve information about certain entities:

• ticket
• requester
• company
• group
• options

Returns the details of the ticket created by the end user.

try{
  let data = await client.data.get("ticket");
  // success
}catch(error){
// error
}

Attributes of the ticket object

Returns the details of the end user who has created a ticket in the Customer Support portal - Ticket Details Page.

try{
  let data = await client.data.get("requester");
  // success
}catch(error){
// error
}

Attributes of the requester object

Returns the details of the company or business for which the ticket is created in the Customer Support portal - Ticket Details Page.

try{
  let data = await client.data.get("company");
  // success
}catch(error){
// error
}

Attributes of the company object

Returns the details of the group to which the ticket created in the Customer Support portal - Ticket Details Page is assigned.

try{
  let data = await client.data.get("group");
  // success
}catch(error){
// error
}

Attributes of the group object

Returns all values that are set as drop-down options of the specified select or drop-down field, as an array.

try {
  let data = await client.data.get("status_options");
  //Success output
  //data: {status_options: ["open","resolved","closed","pending"]}
} catch (error) {
// error
}

You can use the following data methods to retrieve information about certain entities:

• ticket
• requester
• company
• group
• options

Returns the details of the ticket created by the end user in the Customer Support portal - New Ticket page.

try{
  let data = await client.data.get("ticket");
  // success
}catch(error){
// error
}

Attributes of the ticket object

Returns the details of the end user who has created a ticket in the Customer Support portal - New Ticket page.

try{
  let data = await client.data.get("requester");
  // success
}catch(error){
// error
}

Attributes of the requester object

Returns the details of the company or business for which the ticket is created in the Customer Support portal - New Ticket page.

try{
  let data = await client.data.get("company");
  // success
}catch(error){
// error
}

Attributes of the company object

Returns the details of the group to which the ticket created in the Customer Support portal - New Ticket page is assigned.

try{
  let data = await client.data.get("group");
  // success
}catch(error){
// error
}

Attributes of the group object

Returns all values that are set as drop-down options of the specified select or drop-down field, as an array.

try {
  let data = await client.data.get("status_options");
  //Success output
  //data: {status_options: ["open","resolved","closed","pending"]}
} catch (error) {
// error
}

1. From the command line, navigate to the directory that contains the app related files and run the following command.

   fdk run

2. Log in to your account’s Support portal.
3. To the account URL, append ?dev=true.
   Example URL: https://subdomain.freshdesk.com/helpdesk/tickets/1?dev=true
4. To allow the Chrome browser to connect to the test server that runs on HTTP,
   • On Chrome 79 and higher versions:
     1. Navigate to Settings -> Advanced -> Privacy and security -> Site settings -> Insecure content.
     2. In the Allow section, click Add and enter the Freshdesk account URL. Example URL: https://subdomain.freshdesk.com
   • On Chrome 78 and lower versions:
     1. In the address bar, if a shield icon is displayed, click the icon. A warning message is displayed as the Support portal runs on HTTPS and the test server runs on HTTP.This image shows an option to load unsafe scripts in browser.
     2. Click Load Unsafe Scripts to continue testing.
5. Navigate to the customer’s support portal - New Ticket page. If the app is created successfully, the app is rendered on the right side-bar, as shown in the image.This image shows the app rendered on the right side of the page.

Note:Before publishing the app to the marketplace, ensure that the app is validated and packed for submission. For more information, see Validate and pack.

To publish the app to the Freshworks Marketplace, navigate to the Freshdesk developer portal and upload the packed file as a Freshworks app or a Custom app.