Web apps

You can make web apps suitable with Teams' social and collaborative features, by properly integrating them with Teams.

The different types of apps which you can integrate with Teams are as follows:

  • Standalone apps: A stand alone app is a single-page or large, and complex app. The user can use some aspects of it in Teams.
  • Collaboration apps: An app already built for the social and collaborative features inherent to Teams.
  • SharePoint: A SharePoint page you want to surface in Teams.

You can map and follow the appropriate guideline applicable to your integration scenario. This document gives an overview of Teams capabilities, share-point requirements for file and data storage, API requirements, authentication and deep-linking of your app with Teams.

Get to know Teams platform capabilities

Integration scenarios: Standalone apps, collaboration apps, SharePoint

Your Teams app must include required and expected collaborative features. To work with app integration, it is important to familiarize with Teams development terminology.

Common app features Teams platform capabilities
Embedded webpage, homepage, or webview Tabs
Share shortcuts and extensions Messaging extensions
Action shortcuts and extensions Messaging extensions
Chatbots Bots
Channel notifications Bots
Incoming webhooks
Office 365 Connectors
Message external services Bots
Outgoing webhooks
Modals Task modules
Content-rich cards Adaptive Cards

Determine a subset of functionality

Integration scenarios: Standalone apps

Integrating all features of an existing application into Teams often leads to a forced or unnatural user experience, particularly in larger apps. Start with the most impactful features and those that integrates more naturally with Teams. You can allow users to launch the main app and access its full set of features.

Prerequisites to integrate your app with Teams Following are the prerequisites to integrate your app with Teams.

  1. Map your app's use cases to Teams platform capabilities.
  2. Determine your app's entry points. Is it for personal use, collaboration, or both?

Understand SharePoint requirements and options

Integration scenarios: SharePoint

To integrate an existing SharePoint page as a Teams tab, you must consider the following:

  • It must be a modern SharePoint online page.
  • Only personal tabs are supported. You cannot integrate your page as a channel tab.

Alternatively, you can build a Teams tab using the SharePoint Framework.

Aim towards multi-tenancy

Integration scenarios: Standalone apps, collaboration apps, SharePoint

If your app is used by multiple organizations, consider multi-tenant hosting that makes your product scalable and greatly simplify the distribution.

Review your APIs

Integration scenarios: Standalone apps, collaboration apps

You must make your app's existing APIs and data structures support the app when integrating with Teams. To extend the support, you must augment the APIs and data structures with contextual information about Teams for identity mapping, deep-link support, and incorporating Microsoft Graph.

Learn more about getting context for your Teams tab or bot.

Understand authentication options

Integration scenarios: Standalone apps, collaboration apps, SharePoint

Azure Active Directory (AD) is the identity provider for Teams. If your app uses a different identity provider, you must either do an identity mapping exercise or combine with Azure AD.

Teams has single sign-on (SSO) mechanisms with Azure AD for third-party apps. It also provides the guidance for authentication flows to other identity providers using standards such as OAuth and Open ID Connect, known as OIDC.

For SharePoint pages, you can only use SSO and cannot add another Azure AD ID if you want SSO to work for another app as the ID is the SharePoint app.

Learn more about authentication in Teams.

Follow Teams design guidelines

Integration scenarios: Standalone apps, collaboration apps

Ensure to follow Teams design guidelines to make your app native to Teams. You cannot migrate an existing app content to a Teams tab. For more information on app design, see Fluent Design System.

Maximize deep linking

Integration scenarios: Standalone apps, collaboration apps, SharePoint

You can create links to information and features within Teams. Use deep links to link your app with Teams as they tie together multiple pieces of an app for a more native Teams experience.

Be smart when messaging users

Integration scenarios: Standalone apps, collaboration apps, SharePoint

Use a bot in your Teams app for multi-threaded conversation, as it offers more flexibility than a webhook.

Bots also allow you to send proactive messages to individual users or channels. The proactive messages are unprompted messages triggered by an outside event and not a message sent to a bot. For example, your bot sends a welcome message when it is installed or a new user joins a channel.

Sending proactive messages requires Teams-specific identifiers. You can capture the information by fetching roster or user profile data, subscribing to conversation events, or using Microsoft Graph.

Do not spam users with excessive messages. If the Teams capability supports it, the users can configure notification settings for your app.
Following is an example of a notification message: Don't send me unprompted messages.

Use SharePoint for file and data storage

Integration scenarios: Standalone apps, collaboration apps, SharePoint pages

When a team is created, a SharePoint site collection is also provisioned to support file and data storage for that team. Your app must leverage this feature if it interacts with files. Use the site collection to store raw data in SharePoint Lists and Excel.

See also

Integrate web apps