Build apps for Teams meeting stage

Share to stage allows users to share an app to the meeting stage from the meeting side panel in an ongoing meeting. This sharing is interactive and collaborative in comparison to passive screen sharing.

To invoke share to stage, users can select the Share to Stage icon on the upper-right side of the meeting side panel. Share to Stage icon is native to Teams client and selecting it shares the entire app to the meeting stage.

App manifest settings for apps in meeting stage

To share an app to the meeting stage, you must configure the context and RSC permissions in the app manifest:

  1. Update the context property in the app manifest as follows:

    "context": [
      "meetingSidePanel",
      "meetingStage"
    ]
    
  2. Obtain the RSC permissions by configuring the authorization property, and the name and type in the resourceSpecific field as follows:

    "authorization": {
      "permissions": {
        "resourceSpecific": [
          {
            "name": "MeetingStage.Write.Chat",
            "type": "Delegated"
          }
        ]
      }
    }
    

Advanced share to stage APIs

There are many scenarios where sharing the entire app to the meeting stage isn't as useful as sharing specific parts of the app:

  1. For a brainstorming or whiteboard app, a user may want to share a specific board in a meeting versus the entire app with all the boards.

  2. For a medical app, a doctor may want to share just the X-Ray on the screen with the patient versus sharing the entire app with all the patients records or results and so on.

  3. A user may want to share content from a single content provider at a time (for example, YouTube) versus sharing an entire video catalog onto stage.

To help users in such scenarios, we released APIs within the Microsoft Teams JavaScript client library (TeamsJS) that allow you to programmatically invoke share to stage for specific parts of the app from a button in the meeting side panel.

The following image shows the share to stage option in the Teams desktop client:

The screenshot shows the share to meeting Stage View.

Use the following APIs to share specific part of the app:

Method Description Source
Share app content to stage Share specific parts of the app to meeting stage from the meeting side panel in a meeting. TeamsJS library
Get app content stage sharing state Fetch information about app's sharing state on the meeting stage. TeamsJS library
Get app content stage sharing capabilities Fetch the app's capabilities for sharing to the meeting stage. TeamsJS library

Share app content to stage API

The shareAppContentToStage API enables you to share specific parts of your app to the meeting stage. The API is available through the TeamsJS library.

Prerequisite

appContentUrl must be allowed by validDomains array inside manifest.json, else the API returns a 501 error.

Query parameter

The following table includes the query parameters:

Value Type Required Description
callback String Yes Callback contains two parameters, error and result. The error can contain either an error of type SdkError or null when share is successful. The result can contain either a true value if there's a successful share or null when the share fails.
appContentURL String Yes The URL that will be shared on to the stage.

Example

const appContentUrl = "https://www.bing.com/";

microsoftTeams.meeting.shareAppContentToStage((err, result) => {
    if (result) {
        // handle success
    }
    if (err) {
        // handle error
    }
}, appContentUrl);

Response codes

The following table provides the response codes:

Response code Description
500 Internal error.
501 API isn't supported in the current context.
1000 App doesn't have proper permissions to allow share to stage.

Get app content stage sharing state API

The getAppContentStageSharingState API enables you to fetch information about apps sharing on the meeting stage.

Query parameter

The following table includes the query parameter:

Value Type Required Description
callback String Yes Callback contains two parameters, error and result. The error can contain either an error of type SdkError in case of an error or null when share is successful. The result can contain either an IAppContentStageSharingState object when share is successful or null in case of an error.

Example

microsoftTeams.meeting.getAppContentStageSharingState((err, result) => {
    if (result.isAppSharing) {
        // Indicates if app is sharing content on the meeting stage.
    }
});

The JSON response body for the getAppContentStageSharingState API is:

{
  "isAppSharing": true
}

Response codes

The following table provides the response codes:

Response code Description
500 Internal error.
501 API isn't supported in the current context.
1000 App doesn't have proper permissions to allow share to stage.

Get app content stage sharing capabilities API

The getAppContentStageSharingCapabilities API enables you to fetch the app's capabilities for sharing the app content to meeting stage. Apps need to call the getAppContentStageSharingCapabilities API to either enable or disable the custom share to stage button for a meeting participant in the meeting side panel. The share to stage button must be disabled or hidden if a meeting participant doesn't have permission to share the app content to meeting stage.

The app sharing capabilities depend on the tenant user type and participant roles in a meeting.

  • User type: In-tenant, guest, and external user type participants can share the app to stage and also see and interact with the app being shared on stage. Anonymous user can't see, share, or interact with the app that is being shared on the stage. For more information, see user types in a meeting.

  • User roles: Participants with presenter and organizer user roles in a meeting can share the app to stage. Attendee won't have the share to stage button enabled and ability to share the app to stage. For more information, see user roles in Teams meeting.

Query parameter

The following table includes the query parameter:

Value Type Required Description
callback String Yes Callback contains two parameters, error and result. The error can contain either an error of type SdkError or null when share is successful. The result can contain either an IAppContentStageSharingCapabilities object, when share is successful or null in case of an error.

Example

microsoftTeams.meeting.getAppContentStageSharingCapabilities((err, result) => {
    if (result.doesAppHaveSharePermission) {
        // Indicates if the meeting participant has permission to share content to the meeting stage.
    }
});

The JSON response body for getAppContentStageSharingCapabilities API is:

{
   "doesAppHaveSharePermission":true
} 

Response codes

The following table provides the response codes:

Response code Description
500 Internal error.
501 API isn't supported in the current context.
1000 App doesn't have permissions to allow share to stage.

Build an in-meeting document signing app

You can build an in-meeting app for enabling meeting participants to sign documents in real time. It facilitates reviewing and signing documents in a single session. The participants can sign the documents using their current tenant identity.

You can use an in-meeting signing app to:

  • Add documents to be reviewed during a meeting.
  • Share documents to be reviewed to main stage.
  • Sign documents using the signer’s identity.

The participants can review and sign documents, such as purchase agreements and purchase orders.

Screenshot shows an in-meeting document signing app

The following participant roles may be involved during the meeting:

  • Document creator: This role can add their own documents to be reviewed and signed.
  • Signer: This role can sign reviewed documents.
  • Reader: This role can view the documents added to the meeting.

Feature compatibility by user types

The following table provides the user types and lists the features that each user can access in meetings:

User type Scheduled meeting or Instant calendar meeting One-on-one call Group call Scheduled channel meeting
In-tenant Presenter or organizer can start, view, and interact with the app in the meeting stage.

Attendee can only view and interact.
Presenter or organizer can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Presenter or organizer can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Presenter or organizer can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Guest Presenter or organizer can start, view, and interact with the app in the meeting stage.

Attendee can only view and interact.
Presenter or organizer can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Presenter or organizer can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Presenter or organizer can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Federated or External Presenter can start, view, and interact with the app in the meeting stage.

Attendee can only view and interact.
Not available Not available Presenter can start, view, and interact with app on meeting stage.

Attendee can only view and interact.
Anonymous Presenter can start, view, and interact with the app on meeting stage.

Attendee can only view and interact.
Not available Not available Not available

Code sample

Sample name Description .NET Node.js Manifest
Meeting stage sample This sample app shows a tab in meeting stage for collaboration. This sample also uses live share sdk for collaborative Stage View. View View View
In-meeting notification Demonstrates how to implement in-meeting notifications using bot. View View View
In-meeting document signing This sample app shows how to implement a document signing Teams app. Includes sharing specific app content to stage, Teams SSO, and user specific Stage View. View NA NA

Step-by-step guide

Follow the step-by-step guide to build an in-meeting document signing app.

See also