| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Teams Together Mode | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-together-mode.md | Last updated 04/07/2022 # Custom Together Mode scenes in Teams -Custom Together Mode scenes in Microsoft Teams provide an immersive and engaging meeting environment with the following actions: +> [!NOTE] +> +> * Custom Together Mode scenes for Teams meetings are available in [public developer preview](../resources/dev-preview/developer-preview-intro.md). +> * Teams users need the [Teams Premium license](/microsoftteams/enhanced-teams-experience) to use Custom Together Mode after the preview. ++Collaborate in a new way with Custom Together Mode scenes in Microsoft Teams. Custom Together Mode creates an immersive and engaging environment by digitally combining participants into a single virtual scene. The benefits of Custom Together Mode are as follows: * Bring people together and encourage them to turn on their video. * Combine participants digitally into a single virtual scene.-* Place the participants' video streams in predetermined seats designed and fixed by the scene creator. --In custom Together Mode scenes, the scene is an artifact. Scene developer creates scene using the Microsoft Scene studio. In a conceived scene setting, participants have seats with video streams. The videos are rendered in those seats. Scene only apps are recommended as the experience for such apps is clear. +* Place the participant's video stream in predetermined seat designed and fixed by the scene creator. -The following process gives an overview to create a scene only app: +Get started and transform your Teams meetings with Custom Together Mode scenes. +## Custom Together Mode scene -A scene only app is still an app in Teams. The Scene studio handles the app package creation in the background. Multiple scenes in a single app package appear as a flat list to the users. +Custom Together Mode scene is an artifact and participants have seats with video streams in a conceived scene setting, and the videos are rendered in those seats. You can create a scene using Microsoft Scene studio. Scene studio handles the app package creation in the background and creates a scene only app. We recommend you to use scene only apps for better experience. > [!NOTE]-> Users can't initiate Together Mode from mobile. However, after a user joins a meeting through mobile and Together Mode is turned on from desktop, the mobile users who have turned on the video, will appear in Together Mode on desktop. + > + > Users can't initiate Custom Together Mode on mobile devices. However, if they join a meeting through mobile and Together Mode is enabled on desktop, their mobile video appears in Together Mode on desktop. ## Prerequisites -You must have a basic understanding of the following to use custom Together Mode scenes: +Before you start, you must be familiar with the following prerequisites: -* Define scene and seats in a scene. -* Have a Microsoft Developer account and be familiar with the Teams [Developer Portal](../concepts/build-and-test/teams-developer-portal.md). -* Understand the [concept of custom app upload](../concepts/deploy-and-publish/apps-upload.md). -* Ensure that the Administrator has granted permission to [upload a custom app](../concepts/deploy-and-publish/apps-upload.md) and select all filters as part of app setup and meeting policies respectively. +* [Elements of a scene](#elements-of-a-scene) +* [Microsoft Developer account](https://developer.microsoft.com/en-us/microsoft-365/dev-program) +* [Teams Developer Portal](../concepts/build-and-test/teams-developer-portal.md) +* [Upload your app in Teams](../concepts/deploy-and-publish/apps-upload.md) ++Ensure that the administrator granted the necessary permissions to [upload a custom app](../concepts/deploy-and-publish/apps-upload.md#upload-your-app). Then, select all filters during the app setup and meeting policies configuration. ## Best practices -Consider the following practices for a scene building experience: +To create a best scene, we recommend the following practices: * Ensure that all images are in PNG format.-* Ensure that the final package with all the images put together must not exceed 1920 x 1080 resolution. The resolution is an even number. This resolution is a requirement for scenes to be shown successfully. -* Ensure that the maximum scene size is 10 MB. -* Ensure that the maximum size of each image is 5 MB. A scene is a collection of multiple images. The limit is for each individual image. -* Ensure to select **Transparent** as required. This checkbox is available on the right panel when an image is selected. The overlapping images must be marked as **Transparent** to indicate that they're overlapping images in the scene. +* Ensure that the images in final package mustn't exceed 1920 x 1080 resolution. The resolution must be an even number, which is required for scenes to display successfully. +* Ensure that the maximum scene size is within 10 MB. +* Ensure that the maximum size of each image is within 5 MB. A scene is a collection of multiple images. This limit is for each individual image. ++ :::image type="content" source="../assets/images/apps-in-meetings/build-scene.png" alt-text="Build scene using Scene studio." link="~/apps-in-teams-meetings/teams-together-mode.md#build-scene-using-scene-studio" border="false"::: + :::image type="content" source="../assets/images/apps-in-meetings/test-scene.png" alt-text="Test Custom Together Mode scenes in Teams." link="~/apps-in-teams-meetings/teams-together-mode.md#test-custom-together-mode-scenes-in-teams" border="false"::: + :::image type="content" source="../assets/images/apps-in-meetings/share-scene.png" alt-text="Share your scene using Scene studio." link="~/apps-in-teams-meetings/teams-together-mode.md#share-scene-using-scene-studio" border="false"::: -## Build a scene using the Scene studio +## Build scene using Scene studio -Microsoft has a Scene studio that allows you to build scenes. It's available on [Scenes Editor - Teams Developer Portal](https://dev.teams.microsoft.com/scenes). This document refers to Scene studio in the Teams Developer Portal. +You can build a scene using [Scene Studio](https://dev.teams.microsoft.com/scenes) in Teams Developer Portal. A scene in the context of Scene studio contains the following elements: -A scene in the context of the Scene studio is an artifact that contains the following elements: +### Elements of a scene -* Seats reserved for meeting organizer and meeting presenters. The presenter doesn't refer to the user who is actively sharing. It refers to the [meeting role](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019). +A scene consists of bitmap images, sprites, and rectangles to put participant videos in the Custom Together Mode. The following are the elements of a scene: -* Seat and image for each participant with an adjustable width and height. Only PNG format is supported for the image. +|Value|Description| +||| +| **Scene** | Each scene has a unique ID and name. A scene.json file along with the images indicate the exact position of the seats. The scene.json file also contains information on all the assets used for the scene. | +| **Asset** | Each asset contains a filename, width, height, and position on the X and Y-axis. | +| **Participants** | Each participant has their own video feed, which is segmented to render only the foreground. Custom Together Mode scenes support **ZoomIn** in on the current meeting participants. | +| **Seat** | Each seat contains a seat ID, width, height, and position on the X and Y-axis. The seating order is automatically generated and is altered according to preference. The seating order number corresponds to the order of people joining the call. | -* XYZ coordinates of all the seats and images. +* Seats reserved for meeting organizer and meeting presenters. The presenter doesn't refer to the user who is actively sharing. For more information, see [meeting role](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019). ++* Seat and image for each participant with an adjustable width and height. ++* Seat and image XYZ coordinates. * Collection of images that are camouflaged as one image. -The following image shows each seat represented as an avatar for building the scenes: +Ensure to go through the following list while creating a scene: ++|Value|Description| +||| +| Sprite | A Sprite is a static bitmap image positioned in the world. These sprites and participant boxes are defined in a world coordinate system. | +| **X**-axis | The X-axis value defines the horizontal alignment of scene image. | +| **Y**-axis | The Y-axis value defines the vertical alignment of scene image. | +| `zOrder` | The `zOrder` represents the order of placing images and seats along the Z-axis. It gives a sense of depth or partition if necessary. It determines the position of the sprite. For more information, see [example](#example). The sample uses the `zOrder`. | ++The following images show each participant in a scene and elements of a scene: ++++To build a scene using **Scene studio** in Teams Developer Portal, follow these steps: ++1. Go to [Scene studio](https://dev.teams.microsoft.com/scenes). ++1. Select **Create a new scene**. + A new window appears to select the templates. ++1. From the **Select a template to get started** window, select **Blank Scene** template. ++ Alternatively, you can select **Blank Scene** under **Create a scene**. ++ :::image type="content" source="~/assets/images/apps-in-meetings/create-new-scene.png" alt-text="Screenshot shows the options to create a new scene in scene studio." lightbox="~/assets/images/apps-in-meetings/create-new-scene-view.png"::: ++ You can select any template of your choice. **Blank Scene** allows you to create custom scenes. ++ :::image type="content" source="../assets/images/apps-in-meetings/scene-template.png" alt-text="Screenshot shows the choices of templates for a scene in scene studio."::: +1. In the **Scene Name** field, enter a name for the scene. -To build a scene using the Scene studio, follow these steps: + You can select **Close** to toggle between closing or reopening the right pane. -1. Go to [Scenes Editor - Teams Developer Portal](https://dev.teams.microsoft.com/scenes). + :::image type="content" source="~/assets/images/apps-in-meetings/scene-name-toggle.png" alt-text="Screenshot shows the toggle option in scene studio."::: - Alternately, to open Scene studio you can go to the home page of [Teams Developer Portal](https://dev.teams.microsoft.com/home): - * Select **Create custom scenes for meetings**. - * Select **Tools** from the left-hand section, and select **Scene studio** from the **Tools** section. +1. To add the image to the environment, select **Add images**. -1. In **Scenes Editor**, select **Create a new scene**. +1. Select **Choose File**. +1. Select the image you need to add in the scene. +1. Select **Open**. -1. In **Scene Name**, enter a name for the scene. + :::image type="content" source="../assets/images/apps-in-meetings/add-images.png" alt-text="Screenshot shows the option to add images to the scene in scene studio."::: - * You can select **Close** to toggle between closing or reopening the right pane. - * You can zoom in or zoom out of the scene using the zoom bar for a better view of the scene. + You can zoom in or zoom out of the scene using the zoom bar for a better view of the scene. -1. Select **Add images** to add the image into the environment: +1. From the right pane, select an alignment for the image or use **Resize** to adjust the image size. - :::image type="content" source="../assets/images/apps-in-meetings/addimages.png" alt-text="Screenshot shows the Add images option highlighted in red in the scene studio."::: + :::image type="content" source="../assets/images/apps-in-meetings/image-alignment.png" alt-text="Screenshot shows the resize option to align the image in scene studio."::: - > [!NOTE] - > You can download the [SampleScene.zip](https://github.com/MicrosoftDocs/msteams-docs/tree/master/msteams-platform/apps-in-teams-meetings/SampleScene.zip) and [SampleApp.zip](https://github.com/MicrosoftDocs/msteams-docs/tree/master/msteams-platform/apps-in-teams-meetings/SampleApp.zip) files with the images. +1. From the right pane, select **Transparent** checkbox when an image is selected to indicate that the images are overlapping images in the scene. -1. Select the image that you've added. +1. Select anywhere outside of the image to view the **Layers** in the right pane. +1. In the **Layers** section, select **Participants**. -1. From the right pane, select an alignment for the image or use **Resize** to adjust the image size: +1. Add the number of participants for the scene from the **Number of participants** box and select **Add**. - :::image type="content" source="../assets/images/apps-in-meetings/image-alignment.png" alt-text="Screenshot shows the Resize option highlighted in red to align the image in a scene studio."::: + :::image type="content" source="~/assets/images/apps-in-meetings/add-particpant.png" alt-text="Screenshot shows the option to add participants to a scene in scene studio."::: -1. Select an area outside of the image. + You can drag the images of the participants around the scene and place them in the required position. You can resize them using the resize arrow. After the scene is shipped, the participant seat placements are replaced with actual participant's video streams. -1. In the upper-right corner, select **Participants** under **Layers**. +1. Select any participant image and select **Assign Spot** to assign role to the participant. -1. Select the number of participants for the scene from the **Number of participants** box, and select **Add**. After the scene is shipped, the avatar placements are replaced with actual participant's video streams. You can drag the images of the participants around the scene and place them in the required position. You can resize them using the resize arrow. +1. Select **Meeting organizer** or **Presenter** role for the participant. -1. Select any participant image, and select **Assign Spot** to assign the spot to the participant. + :::image type="content" source="../assets/images/apps-in-meetings/assign-spot.png" alt-text="Screenshot shows the assign spot check box for the participant 3 in scene studio."::: -1. Select **Meeting Organizer** or **Presenter** role for the participant. In a meeting, one participant must be assigned the role of a meeting organizer: + In a meeting, at least one participant must be assigned the role of a meeting organizer. - :::image type="content" source="../assets/images/apps-in-meetings/assign-spot.png" alt-text="Screenshot shows the Assign spot check box for the participant 3 in the scene studio."::: + :::image type="content" source="~/assets/images/apps-in-meetings/organizer-presenter.png" alt-text="Screenshot shows the assign spot section with information about assigning the spot of meeting organizer."::: -1. Select **Save** and select **View in Teams** to quickly test your scene in Teams. + You can use **Bring forward**, **Send backward**, and **Order** options in the right pane to align the image and participant seats. - * Selecting **View in Teams** automatically creates a Teams app that can be viewed in the **Apps** page in the Teams Developer Portal. - * Selecting **View in Teams** automatically creates an app package that is appmanifest.json behind the scene. You can go to **Apps** from the menu and access the automatically created app package. - * To delete a scene you created, select **Delete scene** on the top bar. +1. Select **Save**. +1. Select **View in Teams** to quickly test your scene in Teams. -1. In **View in Teams**, select **Preview in Teams**. -1. In the dialog box that appears, select **Add**. + :::image type="content" source="~/assets/images/apps-in-meetings/save-view-in-teams.png" alt-text="Screenshot shows the options to save the scene and view in teams."::: - The scene is tested or accessed by creating a test meeting and launching custom Together Mode scenes. For more information, see [Use custom Together Mode scenes](#use-custom-together-mode-scenes): + A scene only app is created and you can view the app and app package.json file in **Apps** page in the Teams Developer Portal. A screen opens in your Teams to add the scene app created. - :::image type="content" source="../assets/images/apps-in-meetings/launchtogethermode.png" alt-text="Screenshot shows the custom scene launched in a Teams meeting."::: +1. Select **Preview in Teams**. - The scene can then be viewed in the custom Together Mode scenes gallery. + :::image type="content" source="~/assets/images/apps-in-meetings/preview-teams.png" alt-text="Screenshot shows the options to preview the scene in teams."::: -Optionally, you can select **Share** from the **Save** dropdown menu. You can create a shareable link to distribute your scenes for others to use. The user can open the link to install the scene and start using it. + Teams page appears to add the scene only app created in Scene studio. ++1. Select **Add**. ++ :::image type="content" source="~/assets/images/apps-in-meetings/add-in-teams.png" alt-text="Screenshot shows the options to add the scene in teams."::: ++## Test Custom Together Mode scenes in Teams ++Before you start, you must create a new Teams meeting to test and launch Custom Together Mode scenes in Teams. ++> [!NOTE] +> +> You can apply a Custom Together Mode scene that is deployed by your tenant admin only if you've a [Teams Premium license](/MicrosoftTeams/enhanced-teams-experience?branch=danismith-t-pre-licensing). ++Join the Teams meeting and follow these steps to test the Custom Together Mode: ++1. In Teams meeting window, select **View** > **Together Mode** from the dropdown list. ++ :::image type="content" source="~/assets/images/apps-in-meetings/view-together-mode.png" alt-text="Screenshot shows the options select together mode in teams meeting."::: ++1. In the **Select a scene** window, select the scene added to Teams from **Scene studio**. ++ :::image type="content" source="~/assets/images/apps-in-meetings/select-scene.png" alt-text="Screenshot shows the options to apply together mode in teams meeting."::: ++1. Select **Assign seats** to assign specific seats for meeting participants. ++1. In the **Select a participant** section, from **In this meeting**, select the participant and in the **Choose a seat** section, select a seat for the participant. ++1. Select **Assign**. ++1. Select **Apply**. Teams installs the app for the user and applies the scene. ++ Optionally, the meeting organizer and presenter can select **View** > **Change scene** in the meeting to select any existing scene available. ++ >[!NOTE] + > * Only one scene is used uniformly for the entire meeting. If a presenter or organizer changes the scene, it changes for everyone. + > * Participants can switch in or out of Custom Together Mode scenes individually, but when using Custom Together Mode scenes, all participants share the same scene. -After preview, the scene is shipped as an app to Teams by following the steps for app submission. This step requires the app package. The app package is different from the scene package, for the scene that was designed. The app package created automatically is found in the **Apps** section in the Teams Developer Center. + :::image type="content" source="../assets/images/apps-in-meetings/launch-together-mode.png" alt-text="Screenshot shows the custom scene launched in a Teams meeting."::: -Optionally, the scene package is retrieved by selecting **Export** from the **Save** dropdown menu. A .zip file that is the scene package is downloaded. Scene package includes a scene.json and the PNG assets used to build a scene. The scene package is reviewed for incorporating other changes: +## Share scene using Scene studio +You can view the scene created in the **Your scenes** section of **Scene studio**. Additionally, you can share and export the scene. -A complex scene that uses the Z-axis is demonstrated in the step-by-step getting started sample. +To share a scene, follow these steps: -## Sample scene.json +1. From the dropdown next to **Save** button, select **Share**. -Scene.json along with the images indicate the exact position of the seats. A scene consists of bitmap images, sprites, and rectangles to put participant videos in. These sprites and participant boxes are defined in a world coordinate system. The X-axis points to the right and the Y-axis points downwards. + :::image type="content" source="~/assets/images/apps-in-meetings/share-scene-studio.png" alt-text="Screenshot shows the option to share a scene in scene studio."::: -Custom Together Mode scenes support zooming in on the current participants. This feature is helpful for small meetings in a large scene. A sprite is a static bitmap image positioned in the world. The Z value of the sprite determines the position of the sprite. Rendering starts with the sprite with lowest Z value, so higher Z value means it's closer to the camera. Each participant has its own video feed, which is segmented so only the foreground is rendered. +1. In **Share the scene app** window, select **Share Custom Together Mode with everyone** toggle to create a shareable link of your scene. -The following code is the scene.json sample: +1. Select **Copy**. ++ :::image type="content" source="~/assets/images/apps-in-meetings/share-scene-copy-link.png" alt-text="Screenshot shows the option to copy the link and share a scene in scene studio."::: ++1. Open the link copied to install the scene and start using it. +1. Preview the scene. + The scene is shipped as an app to Teams by following the steps for app submission. +1. Get the app package, which is different from the scene package for the designed scene. +1. Find the automatically created app package in the **Apps** section of the Teams Developer Center. ++To export a scene, follow these steps: ++1. In **Scene studio**, select the dropdown button next to **Save**. +1. Select **Export** to retrieve the scene package. ++ :::image type="content" source="~/assets/images/apps-in-meetings/export-scene-studio.png" alt-text="Screenshot shows the option to export a scene in scene studio."::: ++ A zip file containing the scene package is downloaded. This package includes a scene.json file and the PNG assets used to build the scene. ++To delete a scene you created, follow these steps: ++1. Select **Delete scene**. +1. In the **Delete** window, select **Do you want to delete this app?**. +1. Select **Delete**. ++ :::image type="content" source="~/assets/images/apps-in-meetings/delete-scene.png" alt-text="Screenshot shows the option to delete a scene in scene studio."::: ++### Import a scene ++You can import the scene package, which is a zip file retrieved from **Scene studio** to further enhance the scene. ++1. Go to **Scene studio**. +1. Select **Import a scene**. ++ :::image type="content" source="~/assets/images/apps-in-meetings/import-scene.png" alt-text="Screenshot shows the option to import a scene in scene studio."::: ++1. Select the scene package file you want to import. + This functionality allows you to unwrap a scene package and enhance the scene. ++## Example ++The following sample demonstrates a complex scene that utilizes the Z-axis: ```json { The following code is the scene.json sample: } ``` -Each scene has a unique ID and name. The scene JSON also contains information on all the assets used for the scene. Each asset contains a filename, width, height, and position on the X and Y-axis. Similarly, each seat contains a seat ID, width, height, and position on the X and Y-axis. The seating order is generated automatically and is altered as per preference. The seating order number corresponds to the order of people joining the call. --The `zOrder` represents the order of placing images and seats along the Z-axis. It gives a sense of depth or partition if necessary. See the step-by-step getting started sample. The sample uses the `zOrder`. --Now that you've gone through the sample scene.json, you can use the custom Together Mode scenes to engage in scenes. --## Use custom Together Mode scenes --> [!NOTE] -> You can apply a custom Together Mode scene that is deployed by your tenant admin only if you have a [Teams Premium license](/MicrosoftTeams/enhanced-teams-experience?branch=danismith-t-pre-licensing). --Get more information of how a user engages with scenes in custom Together Mode scenes. --To select scenes and use custom Together Mode scenes, follow these steps: --1. Create a new test meeting. -- > [!NOTE] - > On selecting **Preview** in the Scene studio, the scene is installed as an app in Teams. This is the model for a developer to test and try out scenes from the Scene studio. After a scene is exported and uploaded as a custom app, users can view the scenes in the scene gallery. --1. From the **Gallery** dropdown in the upper-left corner, select **Together Mode**. The **Picker** dialog box appears and the scene that is added is available. --1. Select **Change scene** to change the default scene. --1. From the **Scene Gallery**, select the scene you want to use for your meeting. -- Optionally, the meeting organizer and presenter can **Change scene for all participants** in the meeting. -- >[!NOTE] - > At any point in time, only one scene is used homogeneously for the meeting. If a presenter or organizer changes a scene, it changes for all. Switching in or out of custom Together Mode scenes is up to individual participants, but while in custom Together Mode scenes, all participants have the same scene. --1. Select **Apply**. Teams installs the app for the user and applies the scene. --## Open a custom Together Mode scenes Scene Package --You can share the Scene Package that is a .zip file retrieved from the Scene studio to other creators to further enhance the scene. The **Import a Scene** functionality helps unwrap a scene package to let the creator continue building the scene. -- ## See also * [Apps for Teams meetings](teams-apps-in-meetings.md) |
| platform | Deep Link Teams | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-link-teams.md | You can create a deep link to a Teams chat, such as to start a new chat, browse In this article, youΓÇÖll learn to create a deep link: * [To start a new chat](#deep-link-to-start-a-new-chat)+* [To navigate to a chat](#deep-link-to-navigate-to-a-chat) * [To navigate to channel conversation](#deep-links-to-navigate-to-channel-conversation) * [To navigate to chat messages](#deep-links-to-navigate-to-chat-messages) * [To file in a channel](#generate-deep-links-to-file-in-a-channel) if(chat.isSupported()) { else { /* handle case where capability isn't supported */ } ``` +## Deep link to navigate to a chat ++To navigate to a specific chat conversation in Teams, use the following deep link format: ++`https://teams.microsoft.com/l/chat/<chatId>/conversations` ++The query parameter is `chatId`, which represents chat ID of the conversation. The supported format for `chatId` is 19:xxx. ++Example: `https://teams.microsoft.com/l/chat/19:c6d70e392a384916c3262b15406d763e@thread.v2/conversations` + ## Deep links to navigate to channel conversation You can use the following deep link format to go to a particular conversation within channel thread: Example: `https://teams.microsoft.com/l/message/19:253f5895-9a62-4362-8d38-43f02 The query parameters are: -* `chatId`: ChatID of the conversation. The supported format for `chatId` is 19:xxx. For example, `19:253f5895-9a62-4362-8d38-43f0205c702c_f1b94dcf-0aa3-4989-bcdf-ef4a5ed00f86@unq.gbl.spaces`. +* `chatId`: Chat ID of the conversation. The supported format for `chatId` is 19:xxx. For example, `19:253f5895-9a62-4362-8d38-43f0205c702c_f1b94dcf-0aa3-4989-bcdf-ef4a5ed00f86@unq.gbl.spaces`.</br> Apps can read a chat ID through app context in Teams, incoming payload to bot, or through [Microsoft Graph APIs](/graph/api/chat-get?view=graph-rest-1.0&tabs=http&preserve-view=true). > [!NOTE] > For one-on-one chats with bot, the incoming payload to bot contains the conversation ID in a:xxx format. |
| platform | Deep Links | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-links.md | Last updated 04/13/2023 # Configure deep links -Deep links are a navigation mechanism that helps users to connect with features and information within Teams and Teams apps. The following are few scenarios where deep links are useful: +Deep links function as URLs that direct users straight to specific content within an app thereby eliminating the need to navigate through several screens. In Microsoft Teams, you can use deep links to go to a specific chat, message, or tab within an app. You can also use deep links to initiate a new chat or call and share content during a meeting. -* App users can browse through the contents within a tab. For instance, your app can have a bot that sends messages notifying the user of an important activity. When the user selects the notification, the deep link navigates to the tab where the user can view more details about the activity. +You can use deep links in Teams in the following ways: - :::image type="content" source="~/assets/images/deeplink-tasks.gif" alt-text="Graphical representation shows the user experience of deep links in tab app."::: +* Deep link to an app. -* App users can enjoy enhanced app experience by using simplified or automated user tasks, such as creating a new chat and scheduling a meeting by prepopulating the deep links with required parameters. +* Deep link to a chat. - :::image type="content" source="~/assets/images/deeplink-schedule.gif" alt-text="Graphical representation shows the user experience of deep links to launch a meeting scheduling dialog."::: --Deep links can be categorized as follows: +* Deep link to a workflow. :::image type="content" source="~/assets/images/deep-links.png" alt-text="Diagram that shows different scenarios for deep links."::: -* **Deep link to an app**: You can open the app install dialog, navigate within your app, and generate a deep link and navigate to your tab through [deep link to an app](~/concepts/build-and-test/deep-link-application.md). +* **Deep link to an app**: Use a deep link to browse through the contents within a tab and open an app install dialog. For example, your app can have a bot that sends messages notifying the user of an important activity. When the user selects the notification, the deep link navigates to the tab where the user can view more details about the activity. ++ For more information, see [deep link to an app](~/concepts/build-and-test/deep-link-application.md). ++ :::image type="content" source="~/assets/images/deeplink-tasks.gif" alt-text="Graphical representation shows the user experience of deep links in tab app."::: ++* **Deep link to a chat**: Use a deep link to navigate to a channel conversation, chat messages, or a file within a channel. ++ For more information, see [deep link to a chat](~/concepts/build-and-test/deep-link-teams.md). -* **Deep link to a chat**: You can navigate to a channel conversation, chat messages, and to file in a channel through [deep link to a chat](~/concepts/build-and-test/deep-link-teams.md). + :::image type="content" source="~/assets/images/deeplink-chat.gif" alt-text="Graphical representation shows the user experience of deep links in chat."::: -* **Deep link to a workflow**: You can create a deep link to perform a specific task in Teams, such as to create a new chat, open a scheduling dialog, and navigate to audio-video call through [deep link to a workflow](~/concepts/build-and-test/deep-link-workflow.md). +* **Deep link to a workflow**: Use a deep link to create a new chat, open a scheduling dialog, or navigate to an audio-video call. App users can benefit from an improved app experience by utilizing simplified or automated user tasks. These tasks include initiating a new chat or scheduling a meeting, which are made easier by prepopulating the deep links with necessary parameters. -The Microsoft Teams JavaScript client library (TeamsJS) can be used for navigation. For scenarios, such as navigating to content and information within your tab or launching a chat dialog, TeamsJS typed APIs provide improved experience. These APIs are recommended for Teams apps that might be run in other hosts (Outlook, Microsoft 365 app), as they also provide a way to check that the capability used is supported by the host. + For more information, see [deep link to a workflow](~/concepts/build-and-test/deep-link-workflow.md). ++ :::image type="content" source="~/assets/images/deeplink-schedule.gif" alt-text="Graphical representation shows the user experience of deep links to launch a meeting scheduling dialog."::: ++You can use the Microsoft Teams JavaScript client library (TeamsJS) to navigate within your tab. For scenarios such as navigating to content and information or launching a chat dialog. The TeamsJS typed APIs provide an improved experience and are recommended for Teams apps that might run in Outlook or Microsoft 365 apps. They also provide a way to check that the capability used is supported by the host. <! TBD: Edit this article. * Admonitions/alerts seem to be overused. The Microsoft Teams JavaScript client library (TeamsJS) can be used for navigati * Check for markdownlint errors. * Table with just a row isn't really needed. Provide the content without tabulating it. >--## See also --[Integrate web apps](../../samples/integrate-web-apps-overview.md) |
| platform | Extend M365 Teams Personal Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/extend-m365-teams-personal-tab.md | Open your app manifest and update the `$schema` and `manifestVersion` manually w ```json { "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",- "manifestVersion" : "1.14" + "manifestVersion" : "1.16" } ``` If you used Teams Toolkit to create your personal app, you can also use it to va ## Update TeamsJS references -Your app must refer to the npm package `@microsoft/teams-js@2.5.0` (or later) to run in Outlook and Microsoft 365. Previous versions of TeamsJS are still functional in Outlook and Microsoft 365 apps, but deprecation warnings are logged. Support for the previous versions eventually gets discontinued in both Outlook and Microsoft 365. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js). --> [!NOTE] -> If you want to use an earlier version of TeamsJS than v2.5.0, ensure that you add `www.microsoft365.com` to the `validMessageOrigins` (optional) array of the `app.initialize` call. +Your app must refer to the npm package `@microsoft/teams-js@2.19.0` (or later) to run in Outlook and Microsoft 365. Previous versions of TeamsJS are still functional in Outlook and Microsoft 365 apps, but deprecation warnings are logged. Support for the previous versions eventually gets discontinued in both Outlook and Microsoft 365. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js). You can use Teams Toolkit to help identify and automate the required code changes to upgrade from 1.x TeamsJS versions to TeamsJS 2.x.x versions. Alternately, you can perform the same steps manually; refer to [TeamsJS library](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for details. |
| platform | Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/overview.md | The Teams app platform continues to evolve and expand holistically into the Micr | [**Message extensions-search-based**](../messaging-extensions/how-to/search-commands/define-search-command.md)| `composeExtensions` | Web, Desktop, Mobile| Web, Desktop | - |For limitations and troubleshooting, see [notes](extend-m365-teams-message-extension.md#limitations). | | [**Action-based message extensions**](../messaging-extensions/how-to/action-commands/define-action-command.md)| `composeExtensions` | Web, Desktop, Mobile| Web | - | Viewable/actionable (not composable) in Teams/Outlook mobile preview (iOS, Android). For limitations and troubleshooting, see [notes](extend-m365-teams-message-extension.md#limitations). | | [**Link unfurling (including Stage View)**](../tabs/tabs-link-unfurling.md) | `composeExtensions.messageHandlers` | Web, Desktop | Web, Desktop | - | See notes on [link unfurling](extend-m365-teams-message-extension.md) and [Stage View](extend-m365-teams-message-extension.md)|-| [**Adaptive Card Loop components**](./design-loop-components.md)|`composeExtensions.messageHandlers`|Web, Desktop |Web, Desktop (only for [new Outlook](https://support.microsoft.com/office/getting-started-with-the-new-outlook-for-windows-656bb8d9-5a60-49b2-a98b-ba7822bc7627) preview) |-| Viewable (not composable) in Teams/Outlook mobile preview (iOS, Android). See [notes](cards-loop-component.md).| +| [**Adaptive Card Loop components**](./design-loop-components.md)|`composeExtensions.messageHandlers`|Web, Desktop |Web, Desktop (only for [new Outlook](https://support.microsoft.com/office/getting-started-with-the-new-outlook-for-windows-656bb8d9-5a60-49b2-a98b-ba7822bc7627) |-| Viewable (not composable) in Teams/Outlook mobile preview (iOS, Android). See [notes](cards-loop-component.md).| | [**Stage View**](extend-m365-teams-message-extension.md)|`composeExtensions.messageHandlers`|Web, Desktop, Mobile|Web (preview), Desktop (preview)|-| Viewable/actionable (not composable) in Outlook mobile preview (iOS, Android). See [notes](extend-m365-teams-message-extension.md).| | [**Office Add-ins**](/office/dev/add-ins/develop/json-manifest-overview) (preview) | `extensions` | - | Web, Desktop | - | Only available in [devPreview](../resources/schem) app manifest version. See [notes](#office-add-ins-preview).| For more information, see [Actions in Microsoft 365](actions-in-m365.md) ## Microsoft commercial marketplace submission -Join the growing number of production Teams apps in the [Microsoft commercial marketplace](https://appsource.microsoft.com/) (Microsoft AppSource) store with expanded support for Outlook and Microsoft 365 audiences. The app [submission process for Teams apps enabled for Outlook and Microsoft 365](../concepts/deploy-and-publish/appsource/publish.md) is the same as for traditional Teams apps. The only difference is to use app manifest [version 1.13](../tabs/how-to/using-teams-client-sdk.md) in your app package, which introduces support for Teams apps that run across Microsoft 365. +Join the growing number of production Teams apps in the [Microsoft commercial marketplace](https://appsource.microsoft.com/) (Microsoft AppSource) store with expanded support for Outlook and Microsoft 365 audiences. The app [submission process for Teams apps enabled for Outlook and Microsoft 365](../concepts/deploy-and-publish/appsource/publish.md) is the same as for traditional Teams apps. The only difference is to use app manifest [version 1.13 or later](../tabs/how-to/using-teams-client-sdk.md) in your app package, which introduces support for Teams apps that run across Microsoft 365. After your app is published as a Microsoft 365-enabled Teams app, your app will be discoverable as an installable app in the Outlook and Microsoft 365 app stores, in addition to the Microsoft Teams Store. When running in Outlook and Microsoft 365 app, your app uses the same permissions granted in Teams. Teams admins can [manage access to Teams apps across Microsoft 365](/microsoftteams/manage-third-party-teams-apps) for users in their organization. |
| platform | Publish | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/publish.md | -* Web: *Current Channel* version of microsoft365.com (formerly office.com) and *Targeted Release* version of outlook.com. +* Web: *Current Channel* version of microsoft365.com (formerly office.com) and outlook.com. * Desktop: *Current Channel* builds of Outlook and Microsoft 365 (Office) app for Windows desktop. * Mobile: Production builds of Microsoft 365 app on iOS and Android. |
| platform | Promote App Adoption | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/promote-app-adoption.md | Admins can set up an app governance process that manages your organization's IT ## Understand how you can drive app adoption -Following the below five easy steps, you can encourage customers to adopt your apps through admin recommendations to their users, for maximum adoption in an organization. Consider the following elements for app adoption. +By following these five easy steps, you make it easy for your customers to adopt apps within their organizations. :::row::: :::column span="1"::: When your app is being rolled out or being used, your customers might have queri Enable and train your customer-facing teams such as enablement, consulting, support, and GTM functions to answer the expected support queries. Proactively establish a support process for your app. It might involve internal enablement, socializing documentation and training videos, internally or even externally published escalation matrix, and providing support information in your communications. -In your appΓÇÖs help documentation, consider providing some or all the following information to provide reliable support to your customers and admins: +In your appΓÇÖs help documentation, consider providing some or all the following information for your customers and admins: -* Contact method with support information, for example, email, phone, or web portal. -* Links to help documentation about rollout for admins, features for users, and troubleshooting to supporting functions. +* Contact method such as email, phone, community forum, or web portal for customers who want to contact you for app support. +* Explain features for users, app rollout and configuration methods for admins, and troubleshooting to supporting functions. +* Explain the different personas that are required to configure your app. For example, an app that works with a Customer Relationship Management (CRM) system or a bug tracking system may require an admin to provision accounts for app users or to create an account for the app to fetch your organization's information. * Understanding of how IT admins can control which users have access to apps by using [app centric management](/microsoftteams/app-centric-management) and [permission policies](/microsoftteams/app-policies#app-permission-policies), depending on their tenant configuration. * Language support provided by the app in case the app is available in any non-English language. * Latest release date and version that imparts app freshness and hence inspires confidence. To learn more about how your customers access the support information for your a | Input source when creating app | Parameter | Description and meaning | Visibility of the information in Teams | |-|--|-|--| | [Manifest file](resources/schem) | `websiteUrl` | The web page at this URL provides support information for an app. | App details page in Teams admin center displays the website URL. |-| [Manifest file](resources/schem) | `privacyUrl` | The URL to the page that provides privacy information for the app. | ΓÇó Displayed in app details page in Teams admin center. <br> ΓÇó Displayed in Appsource listing. | -| [Manifest file](resources/schem) | `termsOfUseUrl` | The URL to the page that provides the terms of use for the app. | ΓÇó Displayed in app details page in Teams admin center. <br> ΓÇó Displayed in Appsource listing. | +| [Manifest file](resources/schem) | `privacyUrl` | The URL to the page that provides privacy information for the app. | ΓÇó Displayed in app details page in Teams admin center. <br> ΓÇó Displayed in AppSource listing. | +| [Manifest file](resources/schem) | `termsOfUseUrl` | The URL to the page that provides the terms of use for the app. | ΓÇó Displayed in app details page in Teams admin center. <br> ΓÇó Displayed in AppSource listing. | | [Manifest file](resources/schem) | `publisherDocsUrl` | The URL destination provides app documentation for the admins to use to understand, allow, configure, and rollout the app. | Teams admin center displays the URL if the app developer provides it in the manifest file. | | [Partner Center submission](/azure/marketplace/add-in-submission-guide) | NA | Support or help documentation URL. | Displayed in [Microsoft AppSource](https://appsource.microsoft.com/), in the **Details + support** tab. | |
| platform | Integrate Web Apps Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/integrate-web-apps-overview.md | Title: Integrate web apps -description: In this article, you'll get started with integrating web applications and device capabilities with Microsoft Teams app. Power platform to create Power apps, Power Virtual Agents, Virtual Assistant, app templates, Shift connectors, Moodle LMS. +description: In this article, you get started with integrating web applications and device capabilities with Microsoft Teams app. Power platform to create Power apps, Power Virtual Agents, Virtual Assistant, app templates, Shift connectors, Moodle LMS. ms.localizationpriority: high Last updated 12/15/2022 # Integrate web apps You can provide an enriched user experience by integrating the features of an existing web application into Microsoft Teams platform. Ensure to follow [Teams design guidelines](~/concepts/design/understand-use-cases.md) to make your app native to Teams.-This document gives an overview of prerequisites to integrate web applications with Teams, Power platform to create Power apps, Power Virtual Agents, Virtual Assistant, app templates, Shift connectors, Moodle LMS, creating a Share-to-Teams button for your website, adding a Teams tab in SharePoint, creating deep links, and integrating device capabilities. +This document gives an overview of prerequisites to integrate web applications with Teams, Power platform to create Power apps, Power Virtual Agents, Virtual Assistant, app templates, Shift connectors, Moodle LMS, create a Share-to-Teams button for your website, adding a Teams tab in SharePoint, creating deep links, and integrate device capabilities. ## Prerequisites With Power Apps, you can build business apps that connect to your business data ### Power Virtual Agents -Power Virtual Agent is a no code, guided graphical interface solution. It's built on the Microsoft Power Platform and the Bot Framework. It empowers every member of your team to create and maintain rich conversational chatbots that easily integrate with the Teams platform. You can design, develop, and publish intelligent virtual agents for Teams without having to set up a development environment, create a web service, or directly register with the Bot Framework. +Power Virtual Agent is a no code, guided graphical interface solution. Built on the Microsoft Power Platform and the Bot Framework. It empowers every member of your team to create and maintain rich conversational chatbots that easily integrate with the Teams platform. You can design, develop, and publish intelligent virtual agents for Teams without having to set up a development environment, create a web service, or directly register with the Bot Framework. ### Create Virtual Assistant Virtual Assistant is a Microsoft open-source template that enables you to create ## App templates -You can use app template to create custom made apps to suit your organizational needs. These are production-ready apps for Microsoft Teams that are community driven, open-source, and available on GitHub. Each template contains detailed instructions to deploy and install the app for your organization. It provides a ready-to-use application that you can install and start using immediately. +You can use app template to create custom made apps to suit your organizational needs. App templates are production-ready apps for Microsoft Teams that are community driven, open-source, and available on GitHub. Each template contains detailed instructions to deploy and install the app for your organization. It provides a ready-to-use application that you can install and start using immediately. ## Install Moodle LMS You can get a rich integration experience between Teams and SharePoint by adding ## Create deep link -You can create deep links to the entities in Teams. You can create links to information and features within Teams. These deep links navigate to content and information within your tab. You can use deep links to link your app with Teams as they tie together multiple pieces of an app for a more native Teams experience. --For more information, see [Configure deep links.](../concepts/build-and-test/deep-links.md) +You can create deep links to the entities in Teams. You can create links to information and features within Teams. These deep links navigate to content and information within your tab. You can use deep links to link your app with Teams as they tie together multiple pieces of an app for a more native Teams experience. For more information, see [Configure deep links.](../concepts/build-and-test/deep-links.md) ## Integrate device capabilities |
| platform | Send Activity Feed Notification | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/send-activity-feed-notification.md | The following are the benefits and limitations for the `systemDefault` activity ## Code sample -| Sample name | Description | .NET | +| Sample name | Description | .NET | Node.js | |-|-||-|Send activity feed notifications |Sample app demonstrates how to send activity feed notifications using Microsoft Graph API.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-activity-feed/csharp)| +|Send activity feed notifications |Sample app demonstrates how to send activity feed notifications using Microsoft Graph API.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-activity-feed/csharp)| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-activity-feed/nodejs)| ## Step-by-step guide |