This section specifies the various locations where apps can be rendered on a page and how you can configure the manifest file. A single app can be rendered in multiple locations.

Note: Freshdesk apps are only supported in web applications and not in mobile applications.

Global Sidebar

full_page_app - The app icon is displayed in the global sidebar and when clicked occupies the entire viewport.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "full_page_app": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

Note:
1. The logo.svg file should have a resolution of 64 x 64px and fill value set to FFF.
2. You need to have CLI v4.4.1 or higher to use this feature.
3. Only one app can be active per app location.

cti_global_sidebar - The computer telephony integration (CTI) app location is available in the global sidebar, so a CTI app can be rendered in all pages. The default width and height of the app is 400px.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "cti_global_sidebar": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

Note:
1. The logo.svg file should have a resolution of 20 x 20px and fill value set to FFF.
2. Only one app can be active per app location. Also, using Freshchat counts as using the CTI location.

Ticket Details Page

ticket_sidebar - The app is displayed in the right sidebar on the Ticket Details page and is loaded only after you click the app icon.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "ticket_sidebar": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

Take a look at the Simple Request and Simple Data Storage apps which run in this location.

ticket_requester_info - The app is displayed on the Contact Details tab and is loaded as soon as the page loads.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
   "freshdesk": {
     "location": {
       "ticket_requester_info": {
         "url": "myfirstapp.html",
         "icon": "logo.svg"
        }
      }
    }
  }

ticket_top_navigation - The app is displayed on the top navigation bar on the Ticket Details page.

Note:
Only svg icons are supported, text cannot be added.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "ticket_top_navigation": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

Take a look at the Ticket Top Navigation app which runs in this location.

ticket_attachment - The app is displayed when you click the attachment icon in a ticket conversation editor on the Ticket Details page.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "ticket_attachment": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

ticket_conversation_editor - The app is displayed in the ticket conversation editor on the Ticket Details page.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "ticket_conversation_editor": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

ticket_background - This location is used for apps that run in the background of the Ticket Details page.

manifest.json

1
2
3
4
5
6
7
8
9
"product": {
    "freshdesk": {
      "location": {
        "ticket_background": {
          "url": "myfirstapp.html"
        }
      }
    }
  }

Take a look at the Ticket Background and Intercepting Events apps which run in this location.

time_entry_background - This location is used for apps that run in the background of the time entry modal.

manifest.json

1
2
3
4
5
6
7
8
9
"product": {
    "freshdesk": {
      "location": {
        "time_entry_background": {
          "url": "myfirstapp.html"
        }
      }
    }
  }

Contact Details Page

contact_sidebar - The app is displayed in the right sidebar on the Contact Details page and is loaded only after you click the app icon.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "contact_sidebar": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

contact_background - The app runs in the background of the Contact Details page.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "contact_background": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

Contact List Page

contact_list_background - This location is used for apps that run in the background of the Contact List page.

manifest.json

1
2
3
4
5
6
7
8
9
"product": {
    "freshdesk": {
      "location": {
        "contact_list_background": {
          "url": "myfirstapp.html"
        }
      }
    }
  }

New Ticket Page

new_ticket_requester_info - The app is displayed on the Contact Details tab on the New Ticket page.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "new_ticket_requester_info": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

new_ticket_background - The app runs in the background of the New Ticket page.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "new_ticket_background": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"
        }
      }
    }
  }

New Email Page

new_email_requester_info - The app is displayed on the Contact Details tab on the New Email page .

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "new_email_requester_info": {
          "url": "template.html",
          "icon": "icon.svg"
        }
      }
    }
  }

new_email_background - The apps runs in the background of the New Email page.

manifest.json

1
2
3
4
5
6
7
8
9
10
"product": {
    "freshdesk": {
      "location": {
        "new_email_background": {
          "url": "template.html",
          "icon": "icon.svg"
        }
      }
    }
  }