Ofﬁce Online Integration Documentation, Release 2016.01.27
1.11.3 UI integration
Ensure you follow theUIguidelinesas well as the terms of the Cloud Storage PartnerProgramcontract.
1.12 UI guidelines
Important: The guidelines here are not exhaustive. Hosts are expected to follow the terms of the Cloud Storage
PartnerProgram contract with respect to Ofﬁce Online integration.
1. Do not display any UI on or around the Ofﬁce Online editor. The Ofﬁce Online editors must always be
displayed ‘edge-to-edge’,with no surrounding UI. The editor cannotbe ‘light-boxed’or integrated as a compo-
nent in host UI. The editor is a standalone application. Note that the Ofﬁce Online viewer can be ‘light-boxed’
or otherwise embedded in your application. However, if the user transitions to the editor, the editor must be
2. Use Microsoft-provided application and ﬁle type icons. SeeApplicationandﬁletypeiconsfor more infor-
3. Provide favicons for the Ofﬁce Online applications. Whenever the editor is displayed or the viewer is dis-
played 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. SeeFaviconURLsfor more information.
4. Use Ofﬁce Online applicationnames in UI thatactivates Ofﬁce Online. For example,ifyouhave UIin your
application that reads,Open, this UI shouldread Open in PowerPoint Online or Open in Ofﬁce Online.
5. Provide support for sharing within Ofﬁce Online. Ofﬁce Online provides a mechanism to share documents
with other users directly within the Ofﬁce Online applications. You should take advantage of this capability
so that users can access sharing controls directly within Ofﬁce Online. SeeFileSharingPostMessageandFile-
6. Provide breadcrumband breadcrumb URL values. SeeBreadcrumbsfor more information.
7. Provide an in-app Edit inBrowser button. Ifyou are using the Ofﬁce Online viewer and the current userhas
permissions to edit the document, you should always provide aHostEditUrlso that the Edit in Browser button
is always displayed. This helps provide a more seamless transition forusers.
1.12.1 Application and ﬁle type icons
As partoftheCloud Storage PartnerProgram,Microsoft will providea ‘branding toolkit’ that includes properﬁle 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 Ofﬁce 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
You shoulduse these icons as follows:
1. When displaying an Ofﬁce ﬁle, either individually or as part of a list ofﬁles,use the ﬁle type icons. Do not use
the application icons forthis purpose.
2. When displayinga button or otherUIelement that opens anOfﬁce Onlineapplication, usethe application icons.
For example,if you display anOpen in Word Online button,you should use the Word application icon.
Chapter 1. How to read this documentation