Build tabs for Teams
Tabs are client-aware webpages embedded in Microsoft Teams, Outlook, and Microsoft 365. They're simple HTML
Custom tabs are available in Government Community Cloud (GCC), GCC-High, and Department of Defense (DOD).
The following image shows static tabs:
The following image shows Contoso channel tabs:
There are few prerequisites that you must go through before working on tabs.
There are two types of tabs available in Teams, personal and group. Personal tabs are also known as static tabs. Personal (static) tabs, along with personal-scoped bots, are part of the personal apps that are scoped to a single user and pinned to the left navigation bar for easy access. Personal (static) tabs in personal scope continue to work the same way. However, you can now extend static tabs to group chat or meetings with a customizable experience.
You can extend static tabs to different scopes. Static tabs in chats or meetings behave more like apps, as you can pin only one tab per app. For example, you can only pin a single YouTube app tab in a meeting. Static tabs in meetings can also be pre-pinned in meetings by IT Admins.
Following image shows static tabs with customizable experience added to different contexts in Teams:
The following image shows a static tab in personal context in the Teams desktop client:
The following image shows a static tab in personal context in the Teams mobile client:
Following are a few benefits of static tabs in chats and meeting tabs:
Pinnable and instant: You can pin apps with static tabs from the add a tab + icon in chats and meetings. These tabs can be unpinned and don't have the mandatory configuration dialog, which allows you to create tabs that function more like apps.
Unified: You can create one static tab that work in personal and group scopes such as chat and meeting tabs.
Optional configuration: You can change the default URL in your tab instance by changing the
contentUrlproperty of your app after it's pinned in Teams.
Channel or group tabs also known as configurable tabs, deliver content to channels and group chats and is a way to create collaborative spaces around dedicated web-based content.
The following table helps you determine best fit for your app:
You can create a content page as part of a personal static tab, channel or group tab, or dialog (referred as task module in TeamsJS v1.x). You can create a configuration page that enables users to configure Microsoft Teams app and use it to configure a personal, channel, or group chat tab, a messaging extension, or a connector card for Microsoft 365 Groups. You can permit users to reconfigure your tab after installation and create a tab removal page for your application. When you build a Teams app that includes a tab, you must test how your tab functions on both the Android and iOS Teams clients. Your tab must get context through basic information, locale and theme information, and
subEntityId that identifies what is in the tab.
Posts and Files can't be moved from their positions.
The tab features are as follows:
- If a tab is added to an app that also has a bot, the bot is also added to the team.
- Awareness of Microsoft Entra ID of the current user.
- Locale awareness for the user to indicate language that is
- Single sign-on (SSO) capability, if supported.
- Ability to use bots or app notifications to deep link to the tab or to a sub-entity within the service, for example an individual work item.
- The ability to open a modal dialog from links within a tab.
- Reuse of SharePoint web parts within the tab.
Tabs user scenarios
Scenario: Bring an existing web-based resource inside Teams.
Example: You create a static tab in your Teams app that presents an informational corporate website to users.
Scenario: Add support pages to a Teams bot or messaging extension.
Example: You create static tabs that provide about and help webpage content to users.
Scenario: Provide access to items that your users interact with regularly for cooperative dialogue and collaboration.
Example: You create a channel or group tab with deep linking to individual items.
Understand how tabs work
You can use one of the following methods to create tabs:
Declare custom tab in app manifest
microsoftTeams.initialize() after your page loads. Teams displays your page and provides access to Teams-specific information, for example, the Teams client is running the dark theme.
Whether you choose to expose your tab within the channel or group, or personal scope, you must present an <iframe> HTML content page in your tab. For static tabs, the content URL is set directly in your Teams app manifest by the
contentUrl property in the
staticTabs array. Your tab's content is the same for all users.
Teams app doesn't recognize sub iframes. Therefore, it'll not load if there is an iframe within the tab app.
For channel or group tabs, you can also create an extra configuration page. This page allows you to configure content page URL, typically by using URL query string parameters to load the appropriate content for that context. This is because your channel or group tab can be added to multiple teams or group chats. On each subsequent install, your users can configure the tab, allowing you to tailor the experience as required. When users add or configure a tab, a URL is associated with the tab that is presented in the Teams user interface (UI). Configuring a tab simply adds more parameters to that URL. For example, when you add the Azure Boards tab, the configuration page allows you to choose, which board the tab loads. The configuration page URL is specified by the
configurationUrl property in the
configurableTabs array in your app manifest.
For static tabs you can pin a
contentUrl to chat or meeting tabs. This allows you to skip the mandatory configuration dialog and get your users to use the app much faster. You can also change the
contentUrl at runtime. This allows you to build one tab object that works in all surface areas of Teams. For more information, see migrate your configurable tab to static tab.
You can have multiple channels or group tabs, and up to 16 static tabs per app.