UI guidelines

Important

The guidelines here are not exhaustive. Hosts are expected to follow the terms of the Cloud Storage Partner Program contract with respect to Office Online integration.

Requirements

The following guidelines are required as part of Office Online integration.

  1. Do not display any UI on or around the Office Online editor. The Office Online editors must always be displayed ‘edge-to-edge’, with no surrounding UI. The editor cannot be ‘light-boxed’ or integrated as a component in host UI. The editor is a standalone application. Note that the Office Online viewer can be ‘light-boxed’ or otherwise embedded in your application. However, if the user transitions to the editor, the editor must be edge-to-edge.
  2. Use Microsoft-provided application and file type icons. See Application and file type icons for more information.
  3. Provide favicons for the Office Online applications. Whenever the editor is displayed or the viewer is displayed full-window/full-tab, the favicon for the page should be set to the appropriate favicon. The preferred method is to use the URLs provided in WOPI discovery. See Favicon URLs for more information.
  4. Use Office Online application names in UI that activates Office Online. For example, if you have UI in your application that reads, Open, this UI should read Open in PowerPoint Online or Open in Office Online.

Other recommendations

While the following guidelines are not required, Office Online strongly recommends partners

  1. Provide support for sharing within Office Online. Office Online provides a mechanism to share documents with other users directly within the Office Online applications. You should take advantage of this capability so that users can access sharing controls directly within Office Online. See FileSharingPostMessage and FileSharingUrl for more information.

  2. Provide breadcrumb and breadcrumb URL values. Breadcrumbs are very helpful to users, because it helps them understand where their document is, as well as how to get back to where they were. See Breadcrumbs for more information.

  3. Provide an in-app Edit in Browser button. If you are using the Office Online viewer and the current user has permissions to edit the document, you should always provide a HostEditUrl so that the Edit in Browser button is always displayed. This helps provide a more seamless transition for users.

    See also

    You can also use the EditModePostMessage property to receive a PostMessage when the Edit in Browser button is clicked, so you can handle the transition to edit mode yourself.

  4. Include the document name in the HTML title tag so it displays in the browser tab/window text. This is especially important in cases where users may open multiple documents in different browser tabs/windows.

Application and file type icons

As part of the Cloud Storage Partner Program, Microsoft will provide a ‘branding toolkit’ that includes proper file type and application icons in various sizes, as well as vector-based image formats for re-sizing.

Tip

The branding toolkit can be found in the Office 365 Cloud Storage Partner Program Yammer group, in the Network Resources section in the right sidebar. All O365 Cloud Storage partners should have access to this Yammer group.

You should use these icons as follows:

  1. When displaying an Office file, either individually or as part of a list of files, use the file type icons. Do not use the application icons for this purpose.
  2. When displaying a button or other UI element that opens an Office Online application, use the application icons. For example, if you display an Open in Word Online button, you should use the Word application icon.

Important

If you re-size or otherwise modify the provided icons, you must use the vector source files to maintain the high image quality of the icons.