-description: Learn about Meeting lifecycle, building user's meeting experience throughout meeting lifecycle in desktop and mobile environment, participant roles and user types. In addition, learn about integrating bots and messaging extension in meeting lifecycle.

-You can rely on an administrator to grant the permissions your app needs at the [Microsoft Azure portal](https://portal.azure.com). A better option is to provide a sign-up experience for administrators by using the Azure AD V2 `/adminconsent` endpoint. For more information, see [instructions on constructing an Admin consent URL](/graph/uth-v2-service#3-get-administrator-consent).

-description: Learn how to send and receive files through the bot, use Graph APIs for all Teams scopes, use Teams bot APIs using code examples and samples.

-description: Describes how to send proactive messages with your Microsoft Teams bot.

-> To test the bot, enable sideloading in Teams. See [enable sideloading](/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading).

-> You can't remove personal bot activity entirely. If you remove the app and add it again, new communication with the bot appends to the previous conversation with it.

-description: Learn how to design activity feed notifications for your Teams app and get the Microsoft Teams UI Kit.

-> [Build a Teams app with Blazor](../sbs-gs-blazorapp.yml)

-When you upgrade your Teams personal tab and sideload it in Teams, it will also run in Outlook desktop and web clients and Office on the web (office.com). Here's how to preview it from those Microsoft 365 experiences.

-### Outlook

-### Office

-description: Describes bots can start a conversation in Microsoft Teams

-description: Describes how to send and receive files from a bot

-Messaging extensions take advantage of the Bot Framework's messaging schema and secure communication protocol; if you don't already have one you'll need to register your web service on the Bot Framework. The Microsoft App Id (we'll refer to this as your Bot Id from inside of Teams, to identify it from other App Id's you might be working with) and the messaging endpoint your register with the Bot Framework will be used in your messaging extension to receive and respond to requests. If you're using an existing registration, make sure you [enable the Microsoft Teams channel](/azure/bot-service/bot-service-manage-channels.md?preserve-view=true&view=azure-bot-service-4.0).

-description: Links and descriptions of app templates for the Microsoft Teams platform

-To integrate an existing [SharePoint page](/MicrosoftTeams/teams-standalone-static-tabs-using-spo-sites) as a Teams tab, you must consider the following:

-# Create a channel or group tab

-## Create a custom channel or group tab

-You can create a channel or group tab using Node.js and the Yeoman Generator, ASP.NETCore, or ASP.NETCore MVC. For a channel or group tab on Microsoft Teams mobile, see [tabs on mobile](~/tabs/design/tabs-mobile.md).

-# [Node.js](#tab/nodejs)

-### Create a custom channel and group tab using Node.js and the Yeoman Generator

-> [!NOTE]

-> This article follows the steps outlined in the [build Your first Microsoft Teams app](https://github.com/OfficeDev/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App) Wiki found in the Microsoft OfficeDev GitHub repository.

-You can create a custom channel or group tab using the [Teams Yeoman generator](https://github.com/OfficeDev/generator-teams/).

-### Prerequisites for apps

-You must have an understanding of the following prerequisites:

-* You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).

- > [!NOTE]

- > If you do not currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. The subscription remains active as long as you are using it for ongoing development. See [welcome to the Office 365 Developer Program](/office/developer-program/microsoft-365-developer-program).

-In addition, this project requires that you have the following installed in your development environment:

-* Any text editor or IDE. You can install and use [Microsoft Visual Studio Code](https://code.visualstudio.com/download) for free.

-* [Node.js/npm](https://nodejs.org/en/). Use the latest LTS version. The Node Package Manager (npm) installs in your system with the installation of Node.js.

-* After you have successfully installed Node.js, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by entering the following in your command prompt:

- ```bash

-* Install the Microsoft Teams Apps generator by entering the following in your command prompt:

- ```bash

-### Generate your project

-**To generate your project**

-1. At a command prompt, create a new directory for your tab project.

-1. To start the generator, go to your new directory and type the following command:

- ```bash

-1. Next, provide a series of values that are used in your application's **manifest.json** file:

- **What is your solution name?**

- This is your project name. You can accept the suggested name by selecting the **Enter** key.

- **Where do you want to place the files?**

- You are currently in your project directory. Select **Enter**.

- **Title of your Microsoft Teams app project?**

- This is your app package name and will be used in the app manifest and description. Enter a title or select **Enter** to accept the default name.

- **Your (company) name? (max 32 characters)**

- Your company name will be used in the app manifest. Enter a company name or select **Enter** to accept the default name.

- **Which manifest version would you like to use?**

- Select the default schema.

- **Quick scaffolding? (Y/n)**

- The default is yes; enter **n** to enter your Microsoft Partner Id.

- **Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)**

- This field is not required and should only be used if you are already part of the [Microsoft Partner Network](https://partner.microsoft.com).

- **What do you want to add to your project?**

- Select **( * ) A Tab**.

- **The URL where you will host this solution?**

- By default the generator suggests an Azure Web Sites URL. You are only testing your app locally, therefore, a valid URL is not necessary.

- **Would you like show a loading indicator when your app/tab loads?**

- Choose **not** to include a loading indicator when your app or tab loads. The default is no, enter **n**.

- **Would you like personal apps to be rendered without a tab header-bar?**

- Choose **not** to include personal apps to be rendered without a tab header-bar. Default is no, enter **n**.

- **Would you like to include Test framework and initial tests? (y/N)**

- Choose **not** to include a test framework for this project. The default is yes; enter **n**.

- **Would you like to use Azure Applications Insights for telemetry? (y/N)**

- Choose **not** to include [Azure Application Insights](/azure/azure-monitor/app/app-insights-overview). The default is no; enter **n**.

- **Default Tab Name (max 16 characters)?**

- Name your tab. This tab name will be used throughout your project as a file or URL path component.

- **What kind of Tab would you like to create?**

- Use the arrow keys to select **Configurable** tab.

- **What scopes do you intend to use for your Tab?**

- You can select a team or a group chat.

- **Do you require Microsoft Azure Active Directory (Azure AD) Single-Sign-On support for the tab?**

- Choose **not** to include Microsoft Azure Active Directory (Azure AD) Single-Sign-On support for the tab. The default is yes, enter **n**.

- **Do you want this tab to be available in SharePoint Online? (Y/n)**

- Enter **n**.

- > [!IMPORTANT]

- > The path component **yourDefaultTabNameTab**, is the value that you entered in the generator for **Default Tab Name** plus the word **Tab**.

- >

- > For example: DefaultTabName: **MyTab** > **/MyTabTab/**

-1. In Visual Studio Code or any code editor, go to your project directory and open the following file:

- ```bash

- ./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx

- ```

-1. Locate the `render()` method and add the following `<div>` tag and content to the top of the `<PanelBody>` container code:

- ```html

- <PanelBody>

- <div style={styles.section}>

- Hello World! Yo Teams rocks!

- </div>

- </PanelBody>

- ```

-1. Make sure to save the updated file.

-### Build and run your application

-At a command prompt, open your project directory to complete the next tasks.

-#### Create the app package

-You must have an app package to test your tab in Teams. It is a zip folder that contains the following required files:

-* A **full color icon** measuring 192 x 192 pixels.

-* A **transparent outline icon** measuring 32 x 32 pixels.

-* A **manifest.json** file that specifies the attributes of your app.

-The package is created through a gulp task that validates the manifest.json file and generates the zip folder in the **./package directory**. In the command prompt, enter the following command:

-```bash

-The build command transpiles your solution into the **./dist** folder. Enter the following command in the command prompt:

-```bash

-#### Run your application in localhost

-1. Start a local web server by entering the following in the command prompt:

-1. Enter `http://localhost:3007/<yourDefaultAppNameTab>/` in your browser, replace **yourDefaultAppNameTab** with your tab name, and view your application's home page as shown in the following image:

- 

- 

-Microsoft Teams is a cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams does not allow local hosting. You must either publish your tab to a public URL or use a proxy that exposes your local port to an internet-facing URL.

-To test your tab extension, use [ngrok](https://ngrok.com/docs), which is built into this application. Ngrok is a reverse proxy software tool that creates a tunnel to your locally running web server's publicly-available HTTPS endpoints. Your server's web endpoints are available during the current session on your computer. When the computer is shut down or goes to sleep the service is no longer available.

-In your command prompt, exit localhost and enter the following:

-```bash

-> After your tab has been uploaded to Microsoft Teams and successfully saved, you can view it in the tabs gallery, add it to the tabs bar, and interact with it until your ngrok tunnel session ends. If you restart your ngrok session, you must update your app with the new URL.

-**To upload your application to Teams**

-1. Go to Microsoft Teams. If you use the [web-based version](https://teams.microsoft.com) you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).

-1. From your teams on the left pane, select the ellipses &#x25CF;&#x25CF;&#x25CF; next to the team that you are using to test your tab and choose **Manage team**.

-1. In the main pane, select **Apps** from the tab bar and choose **Upload a custom app** located in the lower right corner of the page.

-1. Go your project directory, browse to the **./package** folder, select the app package zip folder, and choose **Open**.

- 

-1. Select **Add** in the pop-up dialog box. Your tab uploads into Teams.

-1. Return to your team, choose the channel where you want to display the tab, select Γ₧ò from the tab bar, and choose your tab from the gallery.

- 

-# [ASP.NET Core](#tab/aspnetcore)

-### Create a custom channel or group tab with ASP.NET Core

-You can create a custom channel or group tab using C# and ASP.Net Core Razor page. [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) is also used to finalize your app manifest and deploy your tab to Teams.

-### Prerequisites for Teams apps

-You must have an understanding of the following prerequisites:

- > [!NOTE]

- > If you do not currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development.

-* Use App Studio to import your application to Teams. To install App Studio, select **Apps**  at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it.

-In addition, this project requires that you have the following installed in your development environment:

-* The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.

-* The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).

-### Get the source code

-At a command prompt, create a new directory for your tab project. A simple project is provided to get you started. Clone the sample repository into your new directory using the following command:

-```bash

-git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

-```

-Alternately, you can retrieve the source code by downloading the zip folder and extracting the files.

-**To build and run the tab project**

-1. After you have the source code, go to Visual Studio and select **Open a project or solution**.

-1. Go to the tab application directory and open **ChannelGroupTab.sln**.

-1. To build and run your application, press **F5** or choose **Start Debugging** from the **Debug** menu.

-1. In a browser, go to the following URLs and verify the application loaded properly:

- * `http://localhost:44355`

- * `http://localhost:44355/privacy`

- * `http://localhost:44355/tou`

-### Review the source code

-This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced * Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template does not enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code:

-### Establish a secure tunnel to your tab for Teams

-Microsoft Teams is a cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams does not allow local hosting. You must either publish your tab to a public URL, or use a proxy that exposes your local port to an internet-facing URL.

-To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoints are available while ngrok is running on your computer. In the free version of ngrok, if you close ngrok, the URLs are different the next time you start it.

-* At a command prompt in the root of your project directory, run the following command:

- ```bash

- ngrok http https://localhost:44355 -host-header="localhost:44355"

- ```

-* Ngrok listens to requests from the internet and routes them to your application when it is running on port 44355. It should resemble `https://y8rCgT2b.ngrok.io/` where **y8rCgT2b** is replaced by your ngrok alpha-numeric HTTPS URL.

-* Ensure that you keep the command prompt with ngrok running and make a note of the URL.

-Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have completed the configuration requirements and the installation can proceed. The parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved.

-#### _Layout.cshtml

-For your tab to display in Teams, you must include the **Microsoft Teams JavaScript client SDK** and include a call to `microsoftTeams.initialize()` after your page loads. This is how your tab and the Teams client communicate:

-Go to the **Shared** folder, open **_Layout.cshtml**, and add the following to the `<head>` tag:

-```html

-<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

-<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>

-```

-> [!IMPORTANT]

-> Do not copy and paste the `<script src="...">` URLs from this page, as they do not represent the latest version. To get the latest version of the SDK, always go to [Microsoft Teams JavaScript API](https://www.npmjs.com/package/@microsoft/teams-js).

-#### Tab.cshtml

-**To update Tab.cshtml**

-1. Open **Tab.cshtml** in Visual Studio and update the embedded `<script>`.

-1. At the top of the script, call `microsoftTeams.initialize()`.

- microsoftTeams.initialize();

-### Build and run your application for Teams

-**To build and run your application**

-1. Verify that **ngrok** is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.

-> [!TIP]

-> You need to have both your application in Visual Studio and ngrok running to complete the steps provided in this article. If you need to stop running your application in Visual Studio to work on it, **keep ngrok running**. It listens and resumes routing your application's request when it restarts in Visual Studio. If you have to restart the ngrok service it returns a new URL and you have to update your application with the new URL.

-### Upload your tab for Teams

-> [!NOTE]

-> App Studio can be used to edit your **manifest.json** file and upload the completed package to Teams. You can also manually edit the **manifest.json** file. If you do, ensure that you build the solution again to create the **tab.zip** file to upload.

-**To upload your tab with App Studio**

-1. Go to **App Studio** and select the **Manifest editor** tab.

-1. Select **Import an existing app** in the **Manifest editor** to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is **tab.zip**. It is available from the following path:

- /bin/Debug/netcoreapp2.2/tab.zip

-1. Upload **tab.zip** to App Studio.

-#### Update your app package with Manifest editor

-After you have uploaded your app package into App Studio, you must configure it.

-Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

-There is a list of steps on the left side of the Manifest editor, and on the right, a list of properties that must have values for each of those steps. Much of the information has been provided by your **manifest.json** but there are fields that you must update.

-##### Details: App details

-In the **App details** section:

-1. Under **Identification**, select **Generate** to replace the placeholder ID with the required GUID for your tab.

-1. Under **Developer information**, update **Website** with your **ngrok** HTTPS URL.

-1. Under **App URLs**, update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>.

-##### Capabilities: Tabs

-In the **Tabs** section:

-1. Under **Team tab**, select **Add**.

-1. In the **Team tab** pop-up window, update the **Configuration URL** to `https://<yourngrokurl>/tab`.

-1. Ensure the **Can update configuration?**, **Team**, and **Group chat** checkboxes are selected and select **Save**.

-##### Finish: Domains and permissions

-In the **Domains and permissions** section, **Domains from your tabs** must contain your ngrok URL without the HTTPS prefix `<yourngrokurl>.ngrok.io/`.

-##### Finish: Test and distribute

-> [!IMPORTANT]

-> On the right, in **Description**, you see the following warning:

->

-> &#9888; "**The 'validDomains' array cannot contain a tunneling site...**"

->

-> This warning can be ignored while testing your tab.

-1. In the **Test and Distribute** section, select **Install**.

-1. In the pop-up dialog box, select **Add to a team** or from the drop-down, select **Add to a chat**.

-1. Choose the team or chat where you want the tab to be displayed and select **Set up a tab**.

-1. In the next pop-up dialog box, choose either **Select Gray** or **Select Red**, and select **Save**.

-1. To view your tab, go to the team or chat where you installed the tab, and select it from the tab bar. The page that you chose during configuration is displayed.

- 

-# [ASP.NET Core MVC](#tab/aspnetcoremvc)

-### Create a custom channel or group tab with ASP.NET Core MVC

-You can create a custom channel or group tab using C# and ASP.Net Core MVC. [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) is also used to finalize your app manifest and deploy your tab to Teams.

-### Prerequisites for custom channel or group tab

-* You must have a Microsoft 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).

- > [!NOTE]

- > If you do not currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development.

-* Use App Studio to import your application to Teams. To install App Studio, select **Apps**  at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it.

-In addition, this project requires that you have the following installed in your development environment:

-* The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.

-* The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).

-### Get the source code

-At a command prompt, create a new directory for your tab project. A simple [Channel Group Tab](https://github.com/OfficeDev/microsoft-teams-sample-tabs/tree/master/ChannelGroupTabMVC) project is provided to get you started. Clone the sample repository into your new directory using the following command:

-```bash

-git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

-```

-Alternately, you can retrieve the source code by downloading the zip folder and extracting the files.

-**To build and run the tab project**

-1. After you have the source code, go to Visual Studio and select **Open a project or solution**.

-1. Go to the tab application directory and open **ChannelGroupTabMVC.sln**.

-1. To build and run your application, press **F5** or choose **Start Debugging** from the **Debug** menu.

-1. In a browser, navigate to the following URLs and verify that the application loaded properly:

- * `http://localhost:44360`

- * `http://localhost:44360/privacy`

- * `http://localhost:44360/tou`

-### Review the source code

-This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template does not enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code:

-* Open a command prompt in the root of your project directory and run the following command:

- ngrok http https://localhost:443560 -host-header="localhost:44360"

-* Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44355. It should resemble `https://y8rCgT2b.ngrok.io/` where **y8rCgT2b** is replaced by your ngrok alpha-numeric HTTPS URL.

-* Ensure that you keep the command prompt with ngrok running and make a note of the URL.

-### Update your application

-Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button, triggers `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have completed the configuration requirements and the installation can proceed. On save, the parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved.

-Teams Toolkit enables you to use an infrastructure as code approach to define what Azure resources you want to provision, and how you want to configure. The tool uses ARM template to define Azure resources. The ARM template is a set of bicep files that defines the infrastructure and configuration for your project. You can customize Azure resources by modifying the ARM template. For more information, see [bicep document](/azure/azure-resource-manager/bicep.md).