Monday, May 9, 2022

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.

 

freistli_29-1652084350945.png

 

 

freistli_30-1652084350952.png

 

 

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

 

freistli_32-1652084350975.png

 

 

  1. In the Channels list, click Open In Teams

 

freistli_34-1652084350989.png

 

 

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

 

freistli_35-1652084350998.png

 

 

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:

 

freistli_37-1652084617326.png

 

freistli_38-1652084617342.png

 

 

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

 

freistli_39-1652084617344.png

 

 

  1. Name the app as MyWeatherBot001, click Add

 

freistli_40-1652084617345.png

 

 

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

 

freistli_41-1652084617349.png

 

 

  1. Type developer and website info:

 

freistli_42-1652084617352.png

 

 

  1. Type privacy and terms URLs:

 

freistli_43-1652084617355.png

 

 

  1. Type registered bot app id:

 

freistli_44-1652084617357.png

 

 

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

 

freistli_45-1652084617362.png

 

 

 

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

 

freistli_0-1652084911883.png

 

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

 

freistli_1-1652084911896.png

 

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

 

freistli_2-1652084911903.png

 

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

 

freistli_3-1652084911918.png

     

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

 

freistli_4-1652084911923.png

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

 

freistli_5-1652084911934.png

 

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

 

freistli_6-1652084911942.png

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

 

freistli_7-1652084911945.png

 

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

 

freistli_8-1652084911951.png

 

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

 

freistli_9-1652084911964.png

 

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

 

 

freistli_11-1652084911982.png

 

 

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