DocumentationAPI Reference

Top bar apps (Support)

Introduction

This document outlines Zendesk’s design recommendations for top bar apps to help developers create a consistent experience with the rest of Zendesk’s products. This document is written whether or not you are using Garden, Zendesk’s design system, as many of these principles apply even if you are using your own design system or UI components.

Where do top bar apps live

Top bar apps are located in one of Zendesk's most prized positions in Support.

Top bar apps gives Agents the ability to improve their workflow with minimal distraction so they can focus on their work. The app location persists across Support much like a global setting.

Agents can click on any one of the apps in the top bar navigation whenever they need, without it taking over their workspace.

Top bar apps are useful to help amplify the way Agents work today.

For apps that don’t require a full page view or a lot of screen real estate, top bar is a good choice of location for an Agent. If an app requires more focus time and input, this is where we recommend using the sidebar location.

How are they accessed

Top bar apps are installed directly into Admin Centre once an Agent installs it from the Zendesk Marketplace. Apps can also be uploaded privately via the Admin Centre.

Apps are available immediately in Support for Agents to begin using right away.

One of the benefits of using Top Bar Apps is they can be re-ordered positioned in a way that makes sense to a workspace.

Come one come all to the Marketplace

Top Bar Apps are found in the app directory on the Zendesk Marketplace for Admins to research, browse and install.

While we currently do not support filtering by location, Admins can sort through apps on the Marketplace by product: e.g Support, Ticketing system.

Where are the apps saved?

Once the app is installed, Admins can access installed apps in the Admin Centre under “Zendesk Support apps”.

Reordering of apps

While Agents do not have access to customise the order of how their apps are positioned in Support, Admins will be able to do this via the Admin Centre.

Mind the margin

While it may not directly impact the way you design your app. It is recommended to be mindful that the position of your app can change at any time. If an Agent chooses to position your app on the right hand side, consider the effects of the margin on the right hand side of the Support interface.

App position: Second from the right-hand side

App position: right-hand side

General layout

Top bar layouts use uniform elements and spacing to encourage consistency across platforms, environments, and screen sizes.

Icon

Your logo plays an important part of your brand identity. We’ve put together tried and tested tips for the most successful icon published in Support. Follow these guidelines below and you’ll be well on your way.

Outer icon size

Logo size, artboard

Logo size, padding

Logo size, height/width

Icon states
Default
Hover
Active

Do’s and Don’ts

The icon we set for your logo will be white

We have chosen white to ensure a consistent colour across all the apps in the Top Bar Navigation. Have a think about which logo type you choose as your main icon and keep in mind it will be white that sits on a grey background.

Help your logo appear as it is

Setting your logo within a square shape will give your icon the best chance of appearing to scale (and not distorted).

Aim for simplicity

You’ll see in the example below simple shapes work better for your icon than a detailed design. Especially when the icon A simple icon design is much clearer and more recognizable at a smaller scale.

Aim for consistency

Along with the icon you set for your top bar app, you have the ability to provide an image of your logo to sit within the top header of the app. Consider using similar colours and help tie the branding together. Another consideration is to ensure any shapes you have in your logo that overlap, may get lost once the logo is published given the size of the logo is quite small.

Container

The anatomy of a container window will help you better understand how the structure is created. We’ve created 3 container sizes to help you decide which will work best for your app and set you up for success.

Small

Width Size: 270 pixels

Each app will have a formal header, which consists of your app title and icon.

Font styling H3
Text styling #2F3941
Background colour #F7F7F7

Your logo will sit to the right of the header. Aim for a logo variation that is easy to digest when small.

Size 25 x 25px
File type PNG
Max file size 15kb

Container

Background colour #FFFFFF
Width 270 px
Height Auto
Max Height: 490 px
Long height may make it challenging for your customers by having to scroll

Medium

Width size: 360 pixels

Header

Each app will have a formal header, which consists of your app title and icon.

Font styling H3
Text styling #2F3941
Background colour #F7F7F7

Logo

Your logo will sit to the right of the header. Aim for a logo variation that is easy to digest when small.

Size 25 x 25px
File type PNG
Max file size 15kb

Container

Background colour #FFFFFF
Width 360 px
Height Auto
Max Height: 490 px
Long height may make it challenging for your customers by having to scroll

Large

Width size: 640 pixels

Header

Each app will have a formal header, which consists of your app title and icon.

Font styling H3
Text styling #2F3941
Background colour #F7F7F7

Logo

Your logo will sit to the right of the header. Aim for a logo variation that is easy to digest when small.

Size 25 x 25px
File type PNG
Max file size 15kb

Container

Background colour #FFFFFF
Width 640 px
Height Auto
Max Height: 490 px
Long height may make it challenging for your customers by having to scroll

Dos and Don’ts

Consider the components in your large format layout

Making use of a two column grid for the large container, will maximise the screen real estate that you have. When people are using your app they will be scrolling less.

Further reading