Placeholder API
Placeholder APIs allow you to position your app in specific locations on certain pages. Using these APIs ensures that even if the underlying page changes or is restructured, your app will be displayed in the way you intended without any breakage.
Note:
If you are building an app to share on the Marketplace, you MUST use the placeholder APIs to display the app.
Ticket Details Page

-
appPlaceholder.ticket.navBarList() - The app will be displayed as a new option in the dropdown list under the “More” button in the top navigation bar.
template.html
Copied Copy1<a href='#' target='_self | _blank | default '>My New Option</a> app.js
appPlaceholder.ticket.navBarList(jQuery(this.$container)); -
appPlaceholder.ticket.sidebar() - The app will be displayed at the bottom of the sidebar on the right after the “Ticket Properties” section.
template.html
Copied Copy123456<div class="widget" id="example_id"> <h3>My App</h3> <div class="content"> <!-- your app html goes here --> </div> </div> app.js
appPlaceholder.ticket.sidebar(jQuery(this.$container)); -
appPlaceholder.ticket.requestorInfo() - The app will be displayed inside the Requestor Info box. This location is typically used to place remote assistance apps such as Google Hangouts for support to easily get in touch with the customer.
template.html
Copied Copy123456<div class="widget" id="example_id"> <h3>My App</h3> <div class="content"> <!-- your app html goes here --> </div> </div> app.js
appPlaceholder.ticket.requestorInfo(jQuery(this.$container)); -
appPlaceholder.ticket.belowRequestorInfo() - The app will be displayed right underneath the Requestor Info section but above the Ticket Properties section in the sidebar on the right.
template.html
Copied Copy123456<div class="widget" id="example_id"> <h3>My App</h3> <div class="content"> <!-- your app html goes here --> </div> </div> app.js
appPlaceholder.ticket.belowRequestorInfo(jQuery(this.$container)); -
appPlaceholder.ticket.requestorInfoTab() - The app will be displayed as a tab in the Requestor Info section. Please note that this API can be used only for apps that enrich contact data, such as CRM apps.
template.html
Copied Copy123456<a href="#my_div" data-tab-icon="tab"> <img src="{{'icon.png' | asset_url}}" width="16" height="16"> </a> <div id="my_div" class="requester_tab" data-tab-content="tabContent" style="display:none;"> <p class="red">Tab Works</p> </div> app.js
appPlaceholder.ticket.requestorInfoTab(jQuery(this.$container));
Contact Details Page

template.html
Copied Copy1 2 3 4 5 6 | <div class="widget" id="example_id"> <h3>My App</h3> <div class="content"> <!-- your app html goes here --> </div> </div> |