-For anonymous users to interact with the apps in Teams meetings, ensure the following:

- :::image type="content" source="../assets/images/apps-in-meetings/shared-meeting-stage-edit-review-component.png" alt-text="The screenshot shows the share to meeting stage view.":::

- :::image type="content" source="../assets/images/meeting-stage/meeting-share-to-stage-mobile.png" alt-text="This screenshot shows meeting stage view of the app you shared to meeting in Teams mobile.":::

-|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](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-stage-view/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-stage-view/nodejs) |

-| 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](https://github.com/officedev/microsoft-teams-samples/tree/main/samples/meetings-share-to-stage-signing/csharp) | NA |

-Before creating a meeting tab, it's important to learn about the surfaces that are available to target the meeting chat view, meeting details view, meeting side panel view, and meeting stage view.

-### Meeting stage view

-# [Meeting stage view desktop](#tab/meeting-stage-view-desktop)

- :::image type="content" source="../assets/images/meeting-stage-view.png" alt-text="This screenshot shows meeting stage view of the app you shared to meeting in Teams desktop.":::

-# [Meeting stage view mobile](#tab/meeting-stage-view-mobile)

- :::image type="content" source="../assets/images/meeting-stage/meeting-stage-view-mobile.png" alt-text="This screenshot shows meeting stage view of the app you shared to meeting in Teams mobile.":::

-| In-meeting document signing | Demonstrates how to implement a document signing Teams app. Includes sharing specific app content to stage, Teams SSO and user specific stage view. | [View](https://github.com/officedev/microsoft-teams-samples/tree/main/samples/meetings-share-to-stage-signing/csharp) | NA ||

-| Meeting tabs | This sample shows app stage view, Mute/Unmute Teams meeting audio call in meeting Side panel tab. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meeting-tabs/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meeting-tabs/nodejs) ||

-* Follow the [step-by-step guide](../sbs-meetings-stage-view.yml) to share meeting stage view in your Teams meeting.

-3. [Write the meeting stage view](#write-the-stage-view)

-4. [Connect meeting stage view to Live Share](#connect-meeting-stage-view-to-live-share)

-## Write the stage view

-## Connect meeting stage view to Live Share

-The side panel view, loaded through the tab `contentUrl` with the `sidePanel` frame context, is displayed to the user in a side panel when they open your app within a meeting. The goal of side panel view is to let a user select content for the app prior to sharing the app to the meeting stage. For the Live Share SDK apps, the side panel view can also be used as a companion experience for the app. Calling `joinContainer()` from the side panel view connects to the same Fluid container the stage view is connected to. This container can then be used to communicate with the stage view. Ensure that you're communicating with everyone's stage view and side panel view.

-| fileConsent/invoke | `OnTeamsFileConsentAcceptAsync` | This method is invoked when a file consent card is accepted by the user. |

-| fileConsent/invoke | `OnTeamsFileConsentDeclineAsync` | This method is invoked when a file consent card is declined by the user. |

-The list of Teams activity handlers called from the `onInvokeActivity` Teams activity handler includes the following:

-| fileConsent/invoke | `handleTeamsFileConsentAccept` | This method is invoked when a file consent card is accepted by the user. |

-| fileConsent/invoke | `handleTeamsFileConsentDecline` | This method is invoked when a file consent card is declined by the user. |

-| fileConsent/invoke | `on_teams_file_consent_accept` | This method is invoked when a file consent card is accepted by the user. |

-| fileConsent/invoke | `on_teams_file_consent_decline` | This method is invoked when a file consent card is declined by the user. |

-| Teams conversation bot | This sample app shows how to use different bot conversation events available in bot framework v4. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation/nodejs)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation/python)|

-| Bot samples | Set of bot framwork v4 samples | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples#bots-samples-using-the-v4-sdk) |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples#bots-samples-using-the-v4-sdk)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples#bots-samples-using-the-v4-sdk)|

-* [Azure Active Directory](~/bots/how-to/authentication/auth-aad-sso-bots.md#develop-an-sso-teams-bot)

-The following code provides an example of bot activity for a channel team scope:

-An advanced capability of the platform allows a bot to send or receive video as encoded H.264 frames. Bots that provide their own H.264 encoder or decoder are supported, or the video stream decoded into raw RGB24 or NV12 bitmaps is not required.

-When joined to a Teams meeting consisting of multiple participants, a bot can identify which meeting participants are currently speaking. Active speakers identify which participants are being heard in each received audio frame. Dominant speakers identify which participants are currently most active or dominant in the group conversation, though their voice is not heard in every audio frame. The set of dominant speakers can change as different participants take turns speaking.

-| Meeting stage view | This app helps to enable and configure your apps for Teams meetings. It also demonstrates use of share in meeting feature.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-stage-view/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-stage-view/nodejs)|

-description: Learn about the Teams UI components, such as breadcrumbs, notification bar, stage view along with relevant use cases.

-## Stage view

-Stage view lets users see contentΓÇölike an image, file, or websiteΓÇöon a large surface in Teams without switching context. This component is primarily for viewing content. Don't use it for complex interactions.

-See how to implement [stage view](~/tabs/tabs-link-unfurling.md).

-This section includes guidelines and pointers regarding what to look for, which events to capture, how to use instrumentation markers, and where to fetch Teams-relevant information that will help you plan and implement analytics for your app. Your Teams apps can be tabs, bots, message extensions, cards, stage views and so on. or any combination of these [capabilities and UI constructs](../../overview-explore.md#teams-app-features) across personal or shared scopes. It's best to understand, plan, and implement your instrumentation around each of these capabilities.

-Visual canvas-oriented capabilities are Teams-aware webpages embedded in Microsoft Teams, such as tabs, personal apps, task modules (displaying an embedded iframe), stage views, meeting tabs, shared meeting stage, and in-meeting dialogs. They're hosted in the cloud with the rest of your SaaS app that runs in the web browser.

- - Which platform capabilities, surface areas (for example, tabs, bots, message extensions) and UI constructs (cards, task modules, stage views) leveraged in your Teams app found the most usage by your users?

-| ΓÇó #, % users using the app in different platform capabilities (R28). <br> ΓÇó #, % Interacting with tab. <br> ΓÇó #, % Interacting with Messaging extension. <br> ΓÇó #, % Interacting with bot. <br> ΓÇó #, % Interacting with side panel in a meeting. <br> ΓÇó #, % Interacting with Stage view. | ΓÇó Engagement and value prop of app capabilities. <br> ΓÇó If usage of any of platform capabilities is low, consider drilling into details on ease of use and value add. |

-| [Link unfurling](../messaging-extensions/how-to/link-unfurling.md) | A feature used with message extension and meeting to unfold links pasted into a compose message area. The links expand to show additional information about the link in Adaptive Cards or in the meeting stage view. |

-| [Meeting stage](../sbs-meetings-stage-view.yml) | A feature of meeting extension app. It's a shared space accessible to all participants during the meeting. It helps participants interact and collaborate with app content in real time. <br>**See also**: [Stage view](#s) |

-| [Stage view](../sbs-meetings-stage-view.yml) | A user interface component that lets you render the content that is opened in full screen in Teams and pinned as a tab. It's invoked to surface web content within Teams. It *isn't* the same as meeting stage. <br>**See also**: [Meeting stage](#m) |

-## Stage view

-If your search-based message extension unfurls links that display cards to launch [stage view](../tabs/tabs-link-unfurling.md) in Teams, follow the steps in this article that enables your users in Outlook on web (Targeted release) and Windows desktop (Beta Channel) to send links that work the same way in Outlook.

-The [code sample](#code-sample) section provides a stage view app for testing.

-| Tab in stage view | Microsoft Teams tab sample app for demonstrating a tab in stage view. Works in Teams, Outlook, Microsoft 365 app. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/nodejs)

-1. Launch the Microsoft 365 app and sign in using your dev tenant account. If the Microsoft 365 app was already running prior to sideloading your app in Teams, you need to restart it in order to see in your installed apps.

- :::image type="content" source="images/office-mobile-apps.png" alt-text="The screenshot is an example that shows the 'Apps' option on the side bar of the Microsoft 365 app to see your installed personal tabs.":::

-| link unfurling (including stage view) | `composeExtensions.messageHandlers` | Web, Desktop | Web (Targeted release), Desktop (Beta Channel) | - | See notes on [link unfurling](extend-m365-teams-message-extension.md#link-unfurling) and [stage view](extend-m365-teams-message-extension.md#stage-view)|

-On mobile, you can test and debug your Teams personal tab running on [Microsoft 365 for Android app](extend-m365-teams-personal-tab.md#microsoft-365-for-android-app) and [Outlook for Android app](extend-m365-teams-personal-tab.md#outlook-for-android-app).

-Link unfurling works in Outlook web and Windows environments the same way it does in Microsoft Teams without any further work than using Teams app manifest version 1.13 or later. You can also unfurl links with cards that launch stage view.

-| :::image type="content" source="./images/preview-badge.png" alt-text="Image with the word 'Preview' inside a blue rectangle"::: | This capability is in preview and subject to change based on feedback. Please do not use in production. |

-| :::image type="content" source="./images/deprecated-badge.png" alt-text="Image with the word 'Deprecated' inside an orange rectangle"::: | This capability is deprecated in favor of newer functionality, though it is supported for backwards compatibility purposes. For new apps, please use the capability recommended in the usage notes of the deprecated capability. |

-Microsoft 365 hosts are signified by the following product icons in the tables below:

-Entries marked with a check and asterisk (&#x2713;*) indicate support for that host is available only to preview audiences (enrolled in [Microsoft 365 Targeted Releases](prerequisites.md#enroll-your-developer-tenant-for-microsoft-365-targeted-releases) for web clients, or with [Beta Channel apps](./prerequisites.md#install-microsoft-365-apps-in-your-test-environment) installed for desktop clients). Click on any TeamsJS Capability for further details, including reference docs, samples, and usage notes.

-Some capabilities in the source are in early preview and still awaiting initial support in one or more host applications. These include: [**barCode**](#barcode), [**media**](#media), [**meeting**](#meeting), and [**search**](#search).

-Deprecated. Namespace for initializing an app. For new apps, please use [app.initialize()](/javascript/api/@microsoft/teams-js/app#@microsoft-teams-js-app-initialize) from the [app](#app) capability.

-Preview. This group of capabilities enables apps to show modal dialogs. There are two primary types of dialogs: URL-based dialogs and Adaptive Card dialogs. Both types of dialogs are shown on top of your app, preventing interaction with your app while they are displayed.

-Deprecated. Namespace providing location-related functionality (get and show location). Please use [geoLocation](#geolocation) for new apps.

-Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `shareDeepLink` (to generate a link *to* a specific part of your app) and `executeDeepLink` (to navigate to a deeplink *from* or *within* your app). TeamsJS v.2.0 introduces a new API, `navigateToApp`, for navigating to pages (and subpages) within an app in a consistent way across app hosts (Microsoft 365 app and Outlook, in addition to Teams). For new apps, please follow the linked updated guidance depending on your navigation scenario:

-Deprecated. Provides settings-related functionality. Please use equivalent APIs from the [pages](#pages) for new apps.

-Earlier version of the capability for providing modal dialog (task module) support, prior to TeamsJS v2.8.0. For new apps, please use the [dialog](#dialog) capability.

-* [Extend Teams apps across Microsoft 365](./overview.md)

-* [Extend a Teams personal tab across Microsoft 365 app](./extend-m365-teams-personal-tab.md)

-* [Teams JavaScript client library overview](../tabs/how-to/using-teams-client-library.md)

-* [TeamsJS API Reference](/javascript/api/@microsoft/teams-js)

-|Tabs | Tabs are Teams-aware webpages embedded in Microsoft Teams. You can add them as part of a channel inside a team, group chat, or personal app for an individual user. | Personal tab, channel or group tab, stage view, and link unfurling. |

-Many features enabled in developer preview will require alterations to your app manifest JSON file. To do so, you'll need to use the [developer preview manifest schema](~/resources/schem) to make these changes, nor will you be able to use it to upload your app for testing. To upload your app you'll need to select the `More apps` icon on the app bar, then select the `Upload a custom app link`. Using this method you can only upload a zipped version of your app package.

-You may find it useful to use Developer Portal for Teams to create the non-developer preview portions of your app package, then export that package and manually edit the `manifest.json` file to add the developer preview features you wish to use. Once you've added developer preview features to the `manifest.json` file, you won't be able to reimport the package into Developer Portal for Teams.

-* To sign in manually to the Moodle portal see [Moodle](https://moodle.org/login/index.php).

-The following image displays the OpenID connect login page:

-Microsoft 365 integration consists of several apps with multiple functionalities, which allows users to stay connected and perform different actions as required. The plugin allows administrators to check the following:

-description: Learn Moodle LMS integration with Teams, Moodle learning management, mConnect and deep links, accessibility, and user requirement scenarios. This integration provides Audio, video calls, chat, coureses and activity management, analytical insigths, and more.

-description: Learn partner apps for Moodle, key benefits of partner apps for Moodle, Saas offerings and mConnect. Enable singe-sign-on SSO for users of Teams.

-|Enjoy single sign-on (SSO)| Enable single sign-on SSO for users of Teams and Moodle to access Moodle courses, data, and activities within Teams.|

-mConnect allows Moodle administrators to automatically set up Teams for Moodle course and to make all features available for each course in Moodle.

-This document describes how the removal of margins around all tabs in Microsoft Teams enhances your app building experience. This is an enhancement introduced in Teams in 2021.

-Yes, this is fine and Teams encourages such design. It helps the app to feel native.

-No, you must provide your own padding or margins to the left and right of all app content to ensure that it doesn't touch the edges of your UI. You can also add margins at the top of your tab, if necessary.

-The ID stored in Teams Admin Center is the **External App ID** and it is visible as **ExternalID** on the traces.

-Specifies the install scope defined for this app by default. The defined scope will be the option displayed on the button when a user tries to add the app. Options are:

-When a group install scope is selected, it will define the default capability when the user installs the app. Options are:

-The `publisherDocsUrl` is a HTTPS URL to an information page for admins to get guidelines before allowing an app, which is blocked by default. It can also be used to provide any instructions or information about the app which can be useful for the tenant admin.

-If your app doesn't have a Teams app manifest file, you'll need to create it.

-<summary>Here's an example of a example of manifest schema for a tab app with SSO enabled:</summary>

-description: Learn about stage view, a full screen UI component invoked to surface your web content. Link unfurling is used to turn URLs into a tab using Adaptive Cards.

-|Tab in stage view |Microsoft Teams tab sample app for demonstrating tab in stage view.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/nodejs)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/csharp/demo-manifest/tab-stage-view.zip)|

-You can use newlines for Adaptive Cards using `\r` or `\n` escape sequences for newlines in lists. Formatting is different between the desktop and the mobile versions of Teams for Adaptive Cards. Card-based mentions are supported in web, desktop, and mobile clients. You can use the information masking property to mask specific information, such as password or sensitive information from users within the Adaptive Card `Input.Text` input element. You can expand the width of an Adaptive Card using the `width` object. You can enable typeahead support within Adaptive Cards and filter the set of input choices as the user types the input. You can use the `msteams` property to add the ability to display images in stage view selectively.

-### Stage view for images in Adaptive Cards

-In an Adaptive Card, you can use the `msteams` property to add the ability to display images in stage view selectively. When users hover over the images, they can see an expand icon, for which the `allowExpand` attribute is set to `true`. The following is an example of the `msteams` property:

-The image appears in stage view when the user selects the expand icon as shown in the following image:

-In the stage view, users can zoom in and zoom out of the image. You can select the images in your Adaptive Card that must have this capability.

-> * For Teams mobile apps, stage view functionality for images in Adaptive Cards is available by default. Users can view Adaptive Card images in stage view by simply tapping on the image, irrespective of whether the `allowExpand` attribute is present or not.

-> * Stage view for images in Adaptive Cards doesn't support Base64 encoded images.

- :::image type="content" source="../../assets/images/configured_1.png" alt-text="This screenshot shows how to configured to see list of your current connectors.":::

-|12/09/2021| Introduced step-by-step guide to meeting stage view | Build apps for Teams meetings > Enable and configure apps for meetings > [Step-by-step guide to create meetings stage view](sbs-meetings-stage-view.yml)|

-|10/18/2021| Tabs link unfurling and stage view | Build tabs > [Tabs link unfurling and stage view](tabs/tabs-link-unfurling.md) |

-|06/09/2021| Stage view for images in Adaptive Cards with `allowExpand` attribute | Build cards and task modules > Build cards > [Stage view for images in Adaptive Cards](task-modules-and-cards/cards/cards-format.md#stage-view-for-images-in-adaptive-cards) |