CTI is a framework that enables you to build and integrate your telephone system with Freshdesk. To bring in the functionalities of your telephony system, you will have to create a custom app. You can then render this custom app inside an iframe and enable your agents to pick up calls from any page inside Freshdesk.

You (or your developer) can refer to this page to jump-start creation of apps and use the available placeholder to have it rendered inside an iframe. You will have to handle the app attributes inside the app manifest itself as there is no specific Admin page in CTI. For fetching ticket, contact, or any contextual data that your agents will need to use in the app, you can make use of the Freshdesk APIs. The height, and width (maximum of 500px) of the iframe is customizable. The default value is 400px.

Note: Freshcaller cannot be enabled when the CTI app is enabled

After handling the authentication, you can create your app the way you want it to function, and use the location o render the app. Install the app from under Admin > Support Operations > Apps > Custom apps tab.

Placeholder details:

The placeholder will hold only one app and will only help in loading the app

  • Location name: cti_global_sidebar

  • The placeholder has to be provided in the addon-area component

  • The placeholder will give the logged-in agent’s id as context

Available events:

The following table lists the available APIs:

To: Use API
Open the iframe client.interface.trigger('show', {id: 'softphone'})
Open ticket inside freshdesk client.interface.trigger('click', {id: 'ticket', value: 2 })
Open contact inside freshdesk client.interface.trigger('click', {id: 'contact', value: 1 });
Close the iframe client.interface.trigger('hide', {id: 'softphone'})

Sample Manifest:

  • Location name: cti_global_sidebar, which has iframe URL and icon for CTI

  • Customizable width and height. If not provided, default width and height will be taken ie. 400px

"product": {
    "freshdesk": {
      "location": {
        "cti_global_sidebar": {
          "url": "myfirstapp.html",
          "icon": "logo.svg"

Dimension of the icon: svg 20*20 (width*height)