App UI

Freshdesk is built on the Bootstrap framework. This simplifies building the frontend for your app since you can reuse the code snippets from the components provided by Bootstrap and still adhere to Freshdesk’s design principles. Some guidelines for building a good Freshdesk app are:

  1. Any app you create using the following Placeholder APIs - sidebar, requestorInfo, belowRequestorInfo - must have the CSS class widget in its block level element such as <div>, <section> in your template.html. If you do not include the widget class when using these APIs, your app will not match Freshdesk’s design and will not be approved for publishing on the Marketplace.

    template.html
    Copied Copy
    1
    2
    3
    <div class="widget" id="example_id"> //app code </div>
    app.js
    Copied Copy
    1
    appPlaceholder.ticket.sidebar(jQuery(this.$container));
    template.html npm install http://dl.freshdev.io/sdk/frsh-sdk-1.0.0.tgz -g app.js appPlaceholder.ticket.sidebar(jQuery(this.$container));

    Or

    Copied Copy
    1
    appPlaceholder.ticket.belowRequestorInfo(jQuery(this.$container));
    Or

    Copied Copy
    1
    appPlaceholder.contact.sidebar(jQuery(this.$container));
  2. If you use the navBarList() API, your app can have only anchor tag and it should be as follows - without any special stylings/classes.
    template.html
    Copied Copy
    1
    <a href="#">My New App</a>
    app.js
    Copied Copy
    1
    appPlaceholder.ticket.navBarList(jQuery(this.$container));
  3. If you use the Requester Info tab to display your app, it should look like the following.
    template.html
    Copied Copy
    1
    2
    3
    4
    <a href="#contact_info_salesforce" data-tab-icon="tab"><img src="" width="16" height="16"></a> <div id="contact_info_salesforce" class="requester_tab" style="display: none;" data-tab-content="tabContent"> Saul </div>
    app.js
    Copied Copy
    1
    appPlaceholder.ticket.requestorInfoTab(jQuery(this.$container));

Log in with your Freshdesk account

Enter your helpdesk URL to proceed to login

Proceed

By clicking "Proceed", you agree to our Terms of Use.