Extend a Teams meeting app to Outlook

Artikel
02/28/2024

Across the Microsoft 365 ecosystem, most monthly users schedule their Microsoft Teams meetings from Outlook. To help users stay in the flow of their work, Teams meeting apps are now supported on Outlook. You can configure and add meeting apps to the Teams meetings scheduled from Outlook and also run meeting apps within the Outlook calendar.

Meeting apps are essentially Teams tab apps that are designed to foster collaboration before, during, and after meetings. You can specify which contexts your meeting app supports from the app manifest (previously called Teams app manifest) through the configurableTabs.context property.

Note

In addition to configurableTabs, your meeting app must contain at least one app capability in personal scope (for example, staticTabs), for it to be available in Outlook.

The following table shows the Teams meeting app contexts supported in Outlook:

Teams meeting context	App manifest value	TeamsJS value	Outlook support
Meeting details view	`meetingDetailsTab`	`frameContext.content`	✔️
Meeting chat view	`meetingChatTab`	`frameContext.content`	✔️
Meeting side panel view	`meetingSidePanel`	`frameContext.sidePanel`	✔️
Meeting Stageview	`meetingStage`	`frameContext.meetingStage`	❌

If your meeting app supports Stageview, other in-meeting effects, or contains capabilities such as message extensions and bots, these continue to work in Teams when the meeting is scheduled from Outlook, but doesn't appear or run in Outlook.

Prerequisites

To preview your Teams meeting app in Outlook, ensure the following:

A Microsoft 365 developer sandbox tenant with uploading enabled.
A test environment with Outlook for Windows desktop installed from the Microsoft 365 Apps Current Channel.
NodeJS (with npm) installed.
TeamsFx CLI v2 library installed from npm.
Visual Studio Code installed to your development environment.
Teams Toolkit extension for Visual Studio Code.

To preview your Teams meeting app in Outlook, you can either build a new meeting app with Teams Toolkit or extend an existing Teams meeting app in Outlook.

Build Teams meeting app for Outlook
Extend an existing Teams meeting app to Outlook

You can build a Teams meeting app for Outlook through the Teams Toolkit extension for Visual Studio Code. To build a Teams meeting app to preview in Outlook:

Go to Teams and sign in using your sandbox tenant account.
Select Calendar > New meeting and schedule a meeting.
Open the Teams Toolkit extension in Visual Studio Code and select View Samples.
Select My First Meeting App > Create and specify the folder to create the workspace.
Press the F5 key to debug and run the sample locally in Teams. Teams prompts you to install the app.
Select Add to a meeting from the dropdown and select the meeting that you've scheduled earlier.
Select the sample tab configuration and select Save. The app is available in the meeting chat view.

To extend your existing Teams meeting app in Outlook, ensure the following:

Update your app manifest.
Use Microsoft Teams JavaScript client library (TeamsJS) v2.5.0 or later.
Configure Content Security Policy headers.
Update Microsoft Entra app registration for single sign-on (SSO).
Upload your updated app in Teams Admin Center.

If you have an existing meeting app, make a copy or a branch of your production project and update your app id in the app manifest to use a new identifier that is different from the production app ID for testing.

Update your app manifest

Update the app manifest (previously called Teams app manifest) schema version to 1.13 or later.

Open your Teams app manifest and update the $schema and manifestVersion properties as follows:

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Use TeamsJS version 2.5.0 or later

Use TeamsJS client library version 2.5.0 or later to extend your Teams meeting app to run in Outlook. If your app uses TeamsJS v2.5.0 or later, application code changes aren't required to run in Outlook.

If you need to upgrade your TeamsJS npm package from v1.x.x to the latest v2.x.x TeamsJS, you can use Teams Toolkit to help identify and automate the required code changes. For more information, see TeamsJS library.

Follow these steps to update your TeamsJS to the latest version using Teams Toolkit:

Open your app in Visual Studio Code and select Teams Toolkit extension.
Under View, select Command Palette... or Ctrl+Shift+P.
Run the command Teams: Upgrade Teams JS SDK and code references.

Your package.json file references @microsoft/teams-js@2.x.x and your *.js/.ts and *.jsx/.tsx files are updated with:

Import statements for teams-js@2.x.x.
Function, Enum, and Interface calls for teams-js@2.x.x.
New "TODO" comment reminders flagging areas that might be impacted by Context interface changes.
New "TODO" comment reminders to convert callback functions to promises.

Note

Upgrading to the latest TeamsJS version through Teams Toolkit doesn't update the code in the html files. You must update the html files manually.

Configure CSP headers for Outlook

Teams tab applications are hosted within iframe elements in Outlook, as they are in Teams. If your app uses Content Security Policy (CSP) headers, add outlook.office.com as a frame-ancestor.

Update Microsoft Entra app registration for SSO

Microsoft Entra single sign-on (SSO) for meeting apps works the same way in Outlook as it does in Teams. However, you need to manually add the Outlook application ID to your Microsoft Entra app registration.

Sign in to Azure portal with your test tenant account.
Open App registrations.
Select your app.
Select Manage > Expose an API.
In the Authorized client applications section, add the following Client Id value:

Microsoft 365 client application Client ID

Outlook desktop d3590ed6-52b3-4102-aeff-aad2292ab01c

For more information on client application IDs used to extend Teams apps across the Microsoft 365, see Teams tabs in Microsoft 365 and Outlook.

Microsoft 365 client application	Client ID
Outlook desktop	d3590ed6-52b3-4102-aeff-aad2292ab01c

You can upload your custom app in Teams admin center and preview your meeting app in Outlook.

Upload your custom app in Teams admin center

To test your app in Microsoft 365 and Outlook, upload your app package to Teams admin center.

Package your Teams app manifest and app icons in a zip file. To create an app package through Teams Toolkit, see build app package.
Go to Teams admin center and select Teams apps > Manage apps.
Select Upload new app, and select your app package.

After your meeting app is uploaded to Teams admin center, it's available in both Teams and Outlook. For your app to display in the Apps menu wait for few minutes and restart Outlook for Windows.

Preview your meeting app in Outlook

To preview your meeting app in Outlook for Windows ensure the app is running locally and follow the steps:

Open Outlook for Windows signed in with your test tenant account. If Outlook is already running, close and restart it again.
Open Calendar > New Meeting. For a meeting app to run in Outlook, ensure the meeting is a Teams Meeting as other meetings scheduled from Outlook aren't supported.
From the meeting scheduling window, select All Apps. Your uploaded meeting app appears among your installed meeting apps.
Select your meeting app. A configuration dialog appears, where the user configures any relevant app settings for their specific meeting.
Select Add. Your meeting app displayed in the Apps section and in the side panel of the scheduling window.

To remove or configure your app in the scheduling window, select the dropdown menu on your app and select the following:

About: How the app appears in the Microsoft Teams Store.
Settings: Update the app configuration for the specific meeting.
Remove: Remove the app from the meeting.

Meeting app running in Outlook meeting scheduler side panel

Code sample

Sample Name	Description	Node.js
HelloWorld In-meeting app	Simple meeting app demonstrating meeting details view, chat view, and side panel. Works in Teams and Outlook.	View

Dela via