+### Meeting apps in Outlook

+Tabs in Teams meetings are also supported in Microsoft Outlook from app manifest version 1.13 or later. You can build meeting tab apps that can be configured and added to Teams meetings scheduled from Outlook for Windows. For more information, see [extend a Teams meeting app to Outlook](../m365-apps/extend-m365-meeting-app.md).

+When testing your bot, you need to consider both the contexts you want your bot to run in, and any functionality you add to your bot that requires data specific to Microsoft Teams. Ensure that the method you choose to test your bot aligns with its functionality.

+Occasionally, it's necessary to test your bot without installing it as an app in Teams. We provide two methods for testing the bot. Testing your bot without installing it as an app can be useful to ensure your bot is available and responding. However, it doesn't allow you to test the full breadth of Microsoft Teams functionality you've added to your bot. If you want to fully test your bot, see [testing by uploading](#test-by-uploading-to-teams).

+The Bot Framework Emulator is a desktop application that permits bot developers to test and debug their bots locally or remotely. The emulator helps you to chat with your bot and inspect the messages that your bot sends and receives. This is useful to verify that your bot is available and responding. However, the emulator doesn't permit you to test any Teams-specific functionality you add to the bot. The responses from your bot aren't an accurate visual representation of how they're rendered in Teams. If you need to test either of these, it's best to [upload your bot](#test-by-uploading-to-teams).

+>

+> * Talking to your bot by ID is intended for basic testing purposes only. Any Teams-specific functionality you add to your bot fails to work.

+> * From January 31 2024, users can't chat with bots that aren't connected to a Microsoft Teams app such as Azure bots created through the Bot Framework or Power Virtual Agents. We recommend you to create a new Teams app connected to the Azure Bot using the [Developer Portal](../../../concepts/build-and-test/manage-your-apps-in-developer-portal.md#configure), publish it to Teams, and allow users to install the app using the [app permission policies](/microsoftteams/teams-app-permission-policies#edit-an-app-permission-policy). If you want to test the app, you can assign users an [app setup policy](/microsoftteams/teams-app-setup-policies#manage-app-setup-policies) that allows uploading custom apps and chat with the Azure bot through a direct link to a chat.

+ 1. Go to [Bot Dashboard](https://dev.botframework.com/bots) > **Details** and copy the **Microsoft App ID** for your bot.

+ :::image type="content" source="../../../assets/images/bots_appid_botframework.png" alt-text="Screenshot shows the Microsoft App ID in the details page.":::

+ 2. Open Microsoft Teams, on the Chat pane, select the **New chat** icon. In the **To:** filed, enter your bot's Microsoft App ID.

+ :::image type="content" source="../../../assets/images/bots_uploading.png" alt-text="Screenshot shows the New chat icon and the To field in Teams.":::

+Users can choose to block your bot from sending personal chat messages. They might toggle this by right-clicking your bot in the chat channel and choosing **Block bot conversation**. This means, your bots continue to send messages, however, the user doesn't receive the messages.

+Users can delete the bot by choosing the trash-can icon on the bots list in their team's view. This only removes the bot from that team's use. Individual users can still interact in personal context. Users can't remove or disable bots in personal context.

+Deep links are configured to perform various actions such as opening a tab, initiating an app install dialog, or browsing within the app. Use deep links in [bot](~/bots/what-are-bots.md) and [connector](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md) messages to inform users about changes to your tab or its items.

+You can create a deep links for a custom app, however, if an app in the Microsoft Teams Store shares the same app ID as the custom app ID, the deep link opens the app from Teams Store instead of the custom app. You can also create a deep link to the app for mobile, after your app is approved for the Teams mobile platform. For the deep link to work on Teams iOS, you need the Apple App Store Connect Team ID. For more information, see [how to update Apple App Store Connect Team ID](../deploy-and-publish/appsource/prepare/update-apple-store-team-connect-id.md).

+Deep links allow app users to open an application install dialog to know more information about the app or install it in different contexts. You can create a deep link to application in the following ways:

+Here's the deep link format you need to open an app install dialog from your Teams client using app ID:

+Where `<your-app-id>` is your application ID (f46ad259-0fe5-4f12-872d-c737b174bcb4).

+Applications can use TeamsJS library to initiate the app installation dialog, eliminating the need for manual deep link generation. Here's an example of how to trigger the app installation dialog using TeamsJS within your application:

+App users can browse through content in Teams from your tab using TeamsJS. You can use deep link to browse within your app, if your tab needs to connect users with other content in Teams, such as to a channel, message, another tab, or to open a scheduling dialog. In few instances navigation can also be accomplished using TeamsJS and it's recommended to use typed capabilities of TeamsJS wherever possible.

+One of the benefits of using TeamsJS, particularly for Teams app that might run in other hosts (Outlook and Office), is that it's possible to check if the host supports the capability you're attempting to use. To check a host's support of a capability, you can use the `isSupported()` function associated with the namespace of the API. TeamsJS organizes APIs into capabilities by way of namespaces. For example, prior to usage of an API in the `pages` namespace, you can check the returned Boolean value from `pages.isSupported()` and take the appropriate action within the context of your app and app's UI.

+For more information about capabilities and the APIs in TeamsJS, see [Building tabs and other hosted experiences with the TeamsJS library](~/tabs/how-to/using-teams-client-sdk.md#apis-organized-into-capabilities).

+* [Configure deep link to a tab using TeamsJS](#configure-deep-link-to-a-tab-using-teamsjs)

+| `entityId`&emsp; | The ID of the tab, which you provided when [configuring the tab](~/tabs/how-to/create-tab-pages/configuration-page.md). When generating a URL for deep linking, continue to use entity ID as a parameter name in the URL. When configuring the tab, the context object refers to the `entityId` as `page.id`. |Tasklist 123|

+| `context.subEntityId`&emsp; | An ID for the item within the tab. When generating a URL for deep linking, continue to use `subEntityId` as the parameter name in the URL. When configuring the tab, the context object refers to the `subEntityId` as `page.subPageId`. |Task 456 |

+#### Configure deep link to a tab using TeamsJS

+You can configure deep links in your app through TeamsJS to allow the app users browse different pages within your app. The following code demonstrates how to navigate to a specific entity within your Teams app:

+You can create a deep link to a Teams chat, such as to start a new chat, go to a channel conversation, and access a file within a channel.

+When a user creates a new chat using a deep link, Teams creates the new chat in the draft state until the user sends the first message. You can also provide the name of the chat if it doesnΓÇÖt already exist, along with text that should be inserted into the user's compose box. Consider this a shortcut for the user taking the manual action of navigating to or creating the chat and then compose the message.

+* `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>

+If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits). It's active as long as your Visual Studio subscription is active. For more information, see [Microsoft 365 developer subscription](https://developer.microsoft.com/microsoft-365/dev-program).

+If you don't have any Microsoft 365 tenant, you might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://aka.ms/m365devprogram); for details, see the [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-). Alternatively, you can sign up for a [1-month free trial](https://www.microsoft.com/microsoft-365/try) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/business/compare-all-microsoft-365-business-products-g).

+From January 31 2024, users can't chat with bots that aren't connected to a Microsoft Teams app such as Azure bots created through the Bot Framework or Power Virtual Agents. We recommend you to create a new Teams app connected to the Azure Bot using the [Developer Portal](../build-and-test/manage-your-apps-in-developer-portal.md#configure), publish it to Teams, and allow users to install the app using the [app permission policies](/microsoftteams/teams-app-permission-policies#edit-an-app-permission-policy).

+ Title: Design your app with lightbox UI components

+description: Learn how to use lightbox UI component from Teams UI kit to build Microsoft Teams apps.

+ms.localizationpriority: medium

+# Designing lightbox for your Microsoft Teams app

+The lightbox is a display component that emphasizes important information by deactivating the page layout behind it. Information in the lightbox is noneditable and non-interactive. The lightbox view enables users to preview media content, including images, videos, audio files on a large surface over the main Teams window.

+The lightbox component is designed for quick reviews, understanding, or verification. It doesn't support actions for editing or collaboration. Users can initiate the lightbox in a new Teams window or open it directly in a native app or browser.

+# [Desktop](#tab/desktop)

+# [Mobile](#tab/mobile)

+## Anatomy

+# [Desktop](#tab/desktop)

+The lightbox view includes a header, center stage, and carousel.

+|Counter|Description|

+|-|--|

+|1|**Back**: Button to navigate to the previoius screen|

+|2|**Open in**: Button (basic or split) to navigate to the external window|

+|3|Buttons with content actions: Zoom in or out, Share, Download, or open chat panel|

+|4|Chevrons for slide show|

+|A|**Lightbox header**: Actionable|

+|B|**Center stage**: Main content container|

+|C|**Carousel**: Actionable|

+# [Mobile](#tab/mobile)

+|Counter|Description|

+|-|--|

+|A|**Header**: Provide file name and additional functions as Chat, Download, Share|

+|1|**Content**: Center stage|

+## Sizing of the components

+Following is the default sizing for the container with the main content:

+# [Image](#tab/image)

+# [Carousel](#tab/carousel)

+Contains all media files from the current chat, channel post, or file folder.

+## Best practices

+Recommended best practices for Lightbox

+#### Do: Use a lightbox component to preview files that present media such an image, video, audio in a full-screen view

+Help to save time during file opening. Opening on top of the main content. With easy navigation through the files and fast soft dismiss.

+#### Don't: Use a lightbox for content editing or interaction

+Information in the lightbox is noneditable and non-interactive. Provide clear options in **Open in** menu, where users can start to interact with content.

+#### Do: Use a Lightbox component to preview documents

+Documents, which are intended just for the preview option or have **Preview** option from **More option**.

+#### Don't: Use a lightbox in collaborative environments where itΓÇÖs helpful to see live presence

+Users wonΓÇÖt be able to see who else is in the file and making changes from the lightbox.

+#### Do: Back button in the header will take to the previous screen and close the lightbox or clicking on the sides from the main content

+#### Don't use more button to close the lightbox

+You can exit the lightbox by either going back to the previous screen or tapping outside of it.

+#### Do: Highlight the chat panel to communicate about the previewed file

+#### Don't: Refer to commenting in a lightbox experience

+Users canΓÇÖt comment in lightbox files.

+#### Do: Open the file in a new window if the file requires more time to focus and is editable.

+#### Don't: Use lightbox for files as Word, Excel, PowerPoint, and PDF. Lightbox is a good component for content preview.

+ Title: Extend a Teams meeting app to Outlook

+description: Here's how to ensure your Teams meeting app experience works seamlessly when extended to Outlook

+ms.localizationpriority: medium

+# Extend a Teams meeting app to Outlook

+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](../resources/schem#configurabletabs) property.

+> [!NOTE]

+> In addition to `configurableTabs`, your meeting app must contain at least one [app capability in personal scope](../concepts/design/personal-apps.md) (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](../apps-in-teams-meetings/build-tabs-for-meeting.md#meeting-details-view) | `meetingDetailsTab` | `frameContext.content` | ✔️ |

+| [Meeting chat view](../apps-in-teams-meetings/build-tabs-for-meeting.md#meeting-chat-view) | `meetingChatTab` | `frameContext.content` | ✔️ |

+| [Meeting side panel view](../apps-in-teams-meetings/build-tabs-for-meeting.md#meeting-side-panel-view) | `meetingSidePanel` | `frameContext.sidePanel` | ✔️ |

+| [Meeting stage view](../apps-in-teams-meetings/build-tabs-for-meeting.md#meeting-stage-view) | `meetingStage` | `frameContext.meetingStage` | ❌ |

+If your meeting app supports stage view, 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](./prerequisites.md#prepare-a-developer-tenant-for-testing) tenant with uploading enabled.

+* A test environment with Outlook for Windows desktop installed from the [Microsoft 365 Apps *Current Channel*](./prerequisites.md#install-microsoft-365-apps-in-your-test-environment).

+* [NodeJS](https://nodejs.org/download) (with npm) installed.

+* [TeamsFx CLI v2](../toolkit/TeamsFx-CLI.md) library installed from npm.

+* [Visual Studio Code](https://code.visualstudio.com/) installed to your development environment.

+* [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) 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](#tab/ttk)

+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:

+1. Go to Teams and sign in using your sandbox tenant account.

+1. Select **Calendar** > **New meeting** and schedule a meeting.

+ :::image type="content" source="images/teams-new-meeting.png" alt-text="New meeting panel in Teams":::

+1. Open the **Teams Toolkit** extension in Visual Studio Code and select **View Samples**.

+1. Select **My First Meeting App** > **Create** and specify the folder to create the workspace.

+ :::image type="content" source="images/toolkit-meeting-app-sample.png" alt-text="My First Meeting App sample in Teams Toolkit":::

+1. Press the **F5** key to debug and run the sample locally in Teams. Teams prompts you to install the app.

+1. Select **Add to a meeting** from the dropdown and select the meeting that you've scheduled earlier.

+ :::image type="content" source="images/teams-add-to-meeting.png" alt-text="Add app to meeting option in Microsoft Teams":::

+1. Select the sample tab configuration and select **Save**. The app is available in the meeting chat view.

+ :::image type="content" source="images/teams-meeting-chat-view.png" alt-text="{alt-text}":::

+# [Extend an existing Teams meeting app to Outlook](#tab/existing-app)

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

+> [!div class="checklist"]

+>

+> * [Update your app manifest](#update-your-app-manifest).

+> * [Use Microsoft Teams JavaScript client library (TeamsJS) v2.5.0 or later](#use-teamsjs-version-250-or-later).

+> * [Configure Content Security Policy headers](#configure-csp-headers-for-outlook).

+> * [Update Microsoft Entra app registration for single sign-on (SSO)](#update-microsoft-entra-app-registration-for-sso).

+> * [Upload your updated app in Teams Admin Center](#upload-your-custom-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](~/resources/schem) (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:

+```json

+{

+ "$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](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx).

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

+1. Open your app in Visual Studio Code and select **Teams Toolkit** extension.

+1. Under **View**, select **Command Palette...** or **Ctrl+Shift+P**.

+1. 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](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for `teams-js@2.x.x`.

+* New `"TODO"` comment reminders flagging areas that might be impacted by [Context](../tabs/how-to/using-teams-client-library.md#updates-to-the-context-interface) interface changes.

+* New `"TODO"` comment reminders to [convert callback functions to promises](../tabs/how-to/using-teams-client-library.md#callbacks-converted-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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) in Outlook, as they are in Teams. If your app uses [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) (CSP) headers, add `outlook.office.com` as a [frame-ancestor](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors).

+### Update Microsoft Entra app registration for SSO

+[Microsoft Entra single sign-on (SSO)](../tabs/how-to/authentication/tab-sso-overview.md) 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.

+1. Sign in to [Azure portal](https://portal.azure.com) with your test tenant account.

+1. Open **App registrations**.

+1. Select your app.

+1. Select **Manage** > **Expose an API**.

+1. 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](extend-m365-teams-personal-tab.md#update-azure-ad-app-registration-for-sso).

+You can [upload your custom app in Teams admin center](#upload-your-custom-app-in-teams-admin-center) and [preview your meeting app in Outlook](#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](../concepts/build-and-test/apps-package.md) to Teams admin center.

+1. Package your Teams [app manifest](../resources/schem#build-app-package)

+1. Go to [Teams admin center](https://admin.teams.microsoft.com) and select **Teams apps** > **Manage apps**.

+1. 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:

+1. Open Outlook for Windows signed in with your test tenant account. If Outlook is already running, close and restart it again.

+1. 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.

+1. From the meeting scheduling window, select **All Apps**. Your uploaded meeting app appears among your installed meeting apps.

+ :::image type="content" source="images/outlook-meeting-all-apps.png" alt-text="Uploaded meeting app showing in `All Apps` menu of Outlook meeting scheduler":::

+1. Select your meeting app. A configuration dialog appears, where the user configures any relevant app settings for their specific meeting.

+ :::image type="content" source="images/outlook-meeting-app-configuration.png" alt-text="Meeting app configuration page showing from Outlook meeting scheduler":::

+1. 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.

+ :::image type="content" source="images/outlook-meeting-app-side-panel.png" alt-text="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](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-in-meeting) |

+## See also

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

+* [Support and feedback](~/feedback.md)

+With the latest releases of [Microsoft Teams JavaScript client library](../tabs/how-to/using-teams-client-library.md) (TeamsJS version 2.0.0 and later), [app manifest](../resources/schem), you can build and update Teams apps to run in other high-usage Microsoft 365 products and publish them to the Microsoft commercial marketplace ([Microsoft AppSource](https://appsource.microsoft.com/)) or your organization's private app store.

+| [**Meeting apps**](extend-m365-meeting-app.md)|`configurableTabs`|Web, Desktop, Mobile|Desktop|-|Meeting stage view isn't supported in Outlook. See [notes](extend-m365-meeting-app.md).|

+| [**Outlook 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](#outlook-add-ins-preview).|

+## Personal tabs in Outlook and Microsoft 365 app

+## Message extensions in Outlook

+You can extend your [Teams message extensions](extend-m365-teams-message-extension.md) to Outlook on the web and Windows in addition to Microsoft Teams clients.

+## Meeting apps in Outlook

+Users can discover and use your meeting app right in the flow of their work when you [extend your meeting app to Outlook](extend-m365-meeting-app.md) for Windows.

+### Outlook Add-ins (preview)

+You can now define and deploy Outlook Add-ins in the [developer preview version](../resources/schem) of the app manifest.

+ |Meeting apps in Outlook | `Current` |

+<details><summary>The following JSON code is an example of multiple parameters defined in app manifest:</summary>

+ <br/>

+ <details><summary>Adaptive Card response template example</summary>

+ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

+ "type": "AdaptiveCard",

+ "version": "1.5",

+ "body": [

+ {

+ "type": "Container",

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "${companyName}",

+ "size": "Medium",

+ "wrap": true,

+ "style": "heading"

+ },

+ {

+ "type": "TextBlock",

+ "text": "${stockExchange} ${stockSymbol}",

+ "isSubtle": true,

+ "spacing": "None",

+ "wrap": true

+ },

+ {

+ "type": "TextBlock",

+ "text": "${formattedDate} ${formattedTime}",

+ "wrap": true

+ }

+ ]

+ },

+ {

+ "type": "Container",

+ "spacing": "None",

+ "items": [

+ {

+ "type": "ColumnSet",

+ "columns": [

+ {

+ "type": "Column",

+ "width": "stretch",

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "${currentPrice} ",

+ "size": "ExtraLarge",

+ "wrap": true

+ },

+ {

+ "type": "TextBlock",

+ "text": "${priceChange} ${percentChange}",

+ "color": "${changeColor}",

+ "spacing": "None",

+ "wrap": true

+ }

+ ]

+ },

+ "type": "Column",

+ "width": "auto",

+ "items": [

+ {

+ "type": "FactSet",

+ "facts": [

+ "title": "Open",

+ "value": "${openPrice} "

+ "title": "High",

+ "value": "${highPrice} "

+ },

+ {

+ "title": "Low",

+ "value": "${lowPrice} "

+ ]

+ }

+ ]

+ ]

+ ]

+ }

+ ],

+ "previewCard": {

+ "contentType": "application/vnd.microsoft.card.hero",

+ "content": {

+ "title": "${companyName}",

+ "text": "${stockSymbol}"

+ }

+| Reliability | Apps must maintain 99.9% availability. For instance, if Microsoft 365 Chat calls a plugin 1,000 times, it must provide a meaningful response 999 times. [*Mandatory*] |

+| Zero Regressions | If you need to resubmit your app for validation, the existing message extension functionality that was working earlier mustn't break. This requirement is only applicable to independent software vendor (ISV) apps and not apps built for your organization. [*Mandatory*] |

+|Sample name | Description |TypeScript |

+Use the [pages.navigateToApp()](/javascript/api/%40microsoft/teams-js/pages#@microsoft-teams-js-pages-navigatetoapp) function or [deep links](~/concepts/build-and-test/deep-link-application.md#configure-deep-link-to-a-tab-using-teamsjs) for tab app navigation.

+* Ensure that all Teams app pages are hosted on HTTPS endpoints.

+# [Command line](#tab/cli)

+1. Install [dev tunnel.](/azure/developer/dev-tunnels/get-started?tabs=windows)

+1. Run the following command to login to dev tunnel:

+ ```cmd

+ devtunnel user login

+ ```

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/devtunnel-user-login.png" alt-text="Screenshot shows the devtunnel login.":::

+1. Run the following command to start your local tunnel service:

+ ```cmd

+ devtunnel host -p 3978 --protocol http --allow-anonymous

+ ```

+1. In a separate terminal, run the following command to update the `BOT_DOMAIN` and `BOT_ENDPOINT` values in the `env/.env.local` file:

+ ```cmd

+ BOT_DOMAIN=sample-id-3978.devtunnels.ms

+ BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/

+ ```

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/bot-domain.png" alt-text="Screenshot shows the bot domain and endpoint.":::

+1. Run the following command to provision the app to Teams:

+ ```cmd

+ teamsapp provision --env local

+ ```

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/provision-env-local.png" alt-text="Screenshot shows provision the app to Teams.":::

+1. Run the following command to deploy the app to Teams:

+ ```cmd

+ teamsapp deploy --env local

+ ```

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/deploy-env-local.png" alt-text="Screenshot shows deploy the app to Teams.":::

+1. Run the following command to preview your application locally:

+ ```cmd

+ teamsapp preview --env local

+ ```

+If you want to preview a notification bot hosted on Azure Functions, run the following command in your project directory:

+```cmd

+npm run prepare-storage:teamsapp

+```

+# [Windows](#tab/Windows1)

+# [macOS](#tab/macOS1)

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/sample-app-output.png" alt-text="Screenshot shows Teams App Test Tool Adaptive Card.":::

+# [Visual Studio Code](#tab/vscode)

+# [Command line](#tab/cli)

+1. You can use command line for JavaScript and TypeScript or C# to debug your app in Test Tool. To get started select the following language:

+ # [JavaScript/TypeScript](#tab/clijs)

+ 1. Run the following command to install Teams app Test Tool CLI from `npm`:

+ ```cmd

+ npm install -g @microsoft/teams-app-test-tool

+ ```

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/npm-teams-app-test-tool.png" alt-text="Screenshot shows install teams app test tool cli.":::

+ 1. Use the `teamsapp` command from [Teams Toolkit CLI](Teams-Toolkit-CLI.md) to create your first project. Start from the folder where you want to create the project folder.

+ ```cmd

+ teamsapp new

+ ```

+ You can use the CLI to create a new Teams app. The CLI leads you through a series of questions. Use the arrow keys to select an option. After you make a choice, select **Enter** to confirm. After you enter a suitable name for your app, your project is created.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/teamsapp-new.png" alt-text="Screenshot shows the process of creating a new app on Teams.":::

+ 1. Run the following command to deploy your app and install the required dependencies and npm packages:

+ ```cmd

+ teamsapp deploy --env=testtool

+ ```

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/teamsapp-deploy-env-testtool.png" alt-text="Screenshot shows the process of installing the required dependencies and npm packages.":::

+ 1. Run the following command to start your bot app:

+ ```cmd

+ npm run dev:teamsapp:testtool

+ ```

+ 1. Run the following command in a separate terminal to launch Teams App Test Tool:

+ ```cmd

+ npm run dev:teamsapp:launch-testtool

+ ```

+ # [C#](#tab/clicsharp)

+ 1. [Create a new Teams app](toolkit-v4/create-new-project-vs.md).

+ 1. Download Teams App Test Tool CLI from the [GitHub](https://github.com/OfficeDev/TeamsFx/releases?q=teams-app-test-tool&expanded=true) release.

+ 1. Unzip the downloaded package to a folder. You'll find an executable binary file `teamsapptester.exe`.

+ 1. Copy the `teamsapptester.exe` file to the folder where you've created your app.

+ 1. Open command prompt and go to the folder where you've created your app.

+ 1. Run the following command to launch profile:

+ ```cmd

+ dotnet run --launch-profile "Teams App Test Tool (browser)"

+ ```

+ 1. Run the following command in a separate terminal to define your bot message endpoint:

+ 1. For Command Prompt:

+ ```cmd

+ set BOT_ENDPOINT=http://127.0.0.1:5130/api/messages

+ ```

+ 1. For PowerShell:

+ ```powershell

+ $env:BOT_ENDPOINT = "http://127.0.0.1:5130/api/messages"

+ ```

+ 1. Run the following command to initiate Teams App Test Tool:

+ 1. For Command Prompt:

+ ```cmd

+ teamsapptester.exe start

+ ```

+ 1. For PowerShell:

+ ```powershell

+ teamsapptester.exe start

+ ```

+ If the Test Tool for C# doesn't initiate because of a port conflict, alter the Test Tool's port number in the `TEAMSAPPTESTER_PORT` environment variable where you run `teamsapptester.exe start`.

+

+1. Test Tool opens the bot in a webpage.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/test-tool.png" lightbox="../assets/images/teams-toolkit-v2/debug/test-tool.png" alt-text="Screenshot shows the bot open in Test Tool."

+If you don't have any Microsoft 365 tenant, you might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://aka.ms/m365devprogram); for details, see the [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-). Alternatively, you can sign up for a [1-month free trial](https://www.microsoft.com/microsoft-365/try) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/business/compare-all-microsoft-365-business-products-g).

+If you don't have any Microsoft 365 tenant, you might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://aka.ms/m365devprogram); for details, see the [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-). Alternatively, you can sign up for a [1-month free trial](https://www.microsoft.com/microsoft-365/try) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/business/compare-all-microsoft-365-business-products-g).

+* ***February 28, 2024*** : [Extend a Teams meeting app to work with Outlook.](m365-apps/extend-m365-meeting-app.md)

+* ***February 28, 2024***: [Design Teams app lightbox view to emphasize important information.](concepts/design/design-teams-app-light-box-view.md)