Publish Bot App to Teams Channel with Bot Framework Composer and Teams Developer Portal

This article introduces general steps of how to publish your bot app developed in Bot Framework Composer through Teams Developer Portal into Teams Channel. Below steps are based on the demo bot application we have created before with blogs:

 

Create a Weather Forecast Bot with Azure LUIS and Maps Services in Bot Framework Composer - Microsoft Tech Community

Improve the Weather Forecast Bot App using Language Generation Content in Bot Framework Composer V2 - Microsoft Tech Community

 

Of course, if you already have one existing bot app in Composer, the overall following steps are the indeed the same.

 

Publish Bot and Turn on Teams Channel

 

1. In Composer, open the Bot project, click Publish, select the publish profile we configured before, and click Publish selected bots, in put your Azure subscription account info, and click Okay to submit the bot to Azure. This may take 2 minutes.

 

 

 

 

 

2. In https://portal.azure.com , find this bot service. Click Channels , click Microsoft Teams to add Teams channel:

 

 

 

3. In the Channels list, click Open In Teams

 

 

 

4. You can now preview this bot app in Teams directly now.

 

 

 

Note:

 

The image doesn’t display in Teams because the GetWeather package uses image/svg+xml data URI for the weather icons. To solve this for teams channel, we can use some online image URI or image/png data URI to replace them in bot response, or we can use Custom Action from code. I will provide the Custom Action method in next article.

 

Create Bot App Manifest for Teams in Teams Developer Portal

 

1. Open https://teams.microsoft.com/ , login your test Teams account, such as AllanD@M365x678847.OnMicrosoft.com , click … on the left menu bar, find Developer Portal and add it:

 

 

 

 

2. Open the Developer Portal app, click Apps menu, click New app

 

 

 

3. Name the app as MyWeatherBot001, click Add

 

 

 

4. In the app page displayed in Teams, click Configure -> Basic Information, input its short description and long description.

 

 

 

5. Type developer and website info:

 

 

 

6. Type privacy and terms URLs:

 

 

 

7. Type registered bot app id:

 

 

 

The app id can be got from the bot service’s configuration on your Azure Portal:

 

 

 

 

8. Click Save. 
9. Click App Features in the left menu, click the Bot feature in the right pane:

 

 

       10.   Ente the bot ID you used at step 11, click Save

 

 

       11.  Click the App Studio menu, click the Bot app we just created in Teams:

 

 

      12.  Click Bots on the left, and click Edit in the Bots properties:

 

     

      13.  Choose Personal, Team, and Group Chat scope, click Save

 

       14.  Click Apps menu again, select the Bot app, Click Publish at the top right.

 

 

       15.     Click Download the app package -> Download the app package to get its installation zip.

 

      16.    Click Apps in the left menu bar, click Manage Your Apps,

 

 

      17.   Click Upload a custom app, select the zip file downloaded at step 15 to upload it

 

 

     18.  Click Add to install this weather bot app in Teams:

 

 

     19. The app is installed successfully for the user, can start adaptive conversation with the bot about Weather:

 

 

 

 

This is great that we can use Bot Framework Composer and Teams Developer Portal to easily integrate our bot application in Teams Channel! In next article, I will introduce how to use Custom Action to solve a little bit complicated issue for this bot app: convert SVG image to PNG image, and display it in Teams conversation.

Posted at https://sl.advdat.com/3M9Qk1Chttps://sl.advdat.com/3M9Qk1C