Top bar

The app appears as an icon on the right side of the bar along the top of the agent interface. Clicking the icon opens the app.

Example manifest

"location": {
  "support": {
    "top_bar": "assets/iframe.html"
  }
},

See Setting the app location.

In addition to the objects available in all locations, the following additional actions are available in this location:

• popover
• preloadPane
• iconSymbol

Events

In addition to the core events, the following events are available to an app in the top bar:

• pane.activated
• pane.deactivated

By default, the pane view of a nav bar or top bar app is only inserted into the DOM the first time the app is opened by the user. If you need to insert the pane into the DOM without making it visible, see the preloadPane action in the nav bar documentation.

Once the app pane is in the DOM, users can switch away and back to it.

pane.activated

Fires when the user returns to a top_bar or nav_bar app that's already been opened. It doesn't fire when the app is first displayed after loading. Consider using the app.registered event in that case.

client.on('pane.activated', function() {
  //handler code
});

pane.deactivated

Fires when the user switches away from your app and the app is no longer visible.

client.on('pane.deactivated', function() {
  //handler code
});

Actions

The following additional actions are available in this location:

• popover
• preloadPane
• iconSymbol

popover

You can use the popover API to show, hide, or resize top bar apps.

invoke

client.invoke('popover', {
  width: 400, // The special value auto is also allowed for the height property only
  height: 200
})

client.invoke('popover', 'show') // possible values: 'toggle', 'hide' or 'show'. Default: 'show'.

Note: The popover API only changes the size of the popover. It doesn't change the size of your iframe. The resize action changes the size of both the iframe and the popover for top bar apps.