Apps generally consist of two parts, the "target" and the "frame". These describe where your app is placed within Deskpro, including what controls are available to you for your chosen target(s), as well as where your app UI will be presented.

The "frame" is where your app actually runs and is somewhat isolated from Deskpro itself, whereby it can receive events from Deskpro and send commands back. These events and and commands are described by our apps SDK.

Ok, so let's take a look at the anatomy of a typical Deskpro app target:

In this example we're looking at a "ticket" target, or in other words, an app that appears next to a ticket view and receives information about the ticket itself. Here's a summary of the app features:

• App tab - the app tab displays the app icon and badge count, and reveals the app when clicked

• App icon - this is the icon.svg located in the root of your app package

• Badge count - the badge count is the number that sits next to the icon in the app tab. This number is set from your app, and in this example indicates the number of Shortcut stories associated with a Deskpro ticket

• App elements - these are controls appearing in the app header that are registered by your app's code. These controls include call to action buttons, dropdown menus, etc.

• App title - the title defined by your app manifest, it can also be overridden by your app code

• App header - this contains your app's title as well as any elements registered by your app

• App frame - this is the area of the target where your app code actually runs, and the app UI is displayed

It is also possible to add target actions, described in your app manifest. App actions allow you to "mount" controls elsewhere in Deskpro. In this case, we're going to mount a "ticket_additions" target action that allows you to link a Shortcut story from the ticket actions menu.

Upon clicking a target action, an event will be sent to your app which you can then act on. In this case, clicking on the "Shortcut Story" button might route your app to a different screen. This particular target action also shows the app icon, which is located in the root of your app package.