What the FAQ: Part 3 – Adding the QnA Bot to Microsoft Teams

A month and a half passed since the last article in this series and during that time lot of things happened which didn’t allow to finish it. European Collaboration Summit was a blast, from a job perspective it was a very busy month but hey, at last here we are, at the last article in the series. I hope that the information provided so far was useful and that it managed to put into perspective how easy it is to use the service.

So far we’ve created a knowledge base, created a QnA Bot and connected it to the knowledge base, all code free. The final step toward our goal is adding the bot to Microsoft Teams and providing its services to your team members.

Like with most things, we have a couple of options here.

Sideloading

You can side load a bot for the private chat. Let’s recall, during the bot creation, you had an option to either register it yourself in the Azure Active Directory or to let the Azure do it for you. No matter what route you took, the bot will be registered in AAD and it will get an Microsoft App ID assigned. For sideloading, you need this ID.

To obtain it, log in to the Azure portal, open the Resource Group containing your bot resources and open Web App Bot resource. In my case, it is sp4kb-bot.

SP4 Knowledge Base Resource Group
SP4 Knowledge Base Resource Group

Once there, in the menu on the left side, look for the Application Settings and open it. Scroll down to the Application settings and look for the MicrosoftAppId setting. Copy the value of the key. You will need it in a bit.

Web App Bot application settings
Web App Bot application settings

To sideload the bot, open Microsoft Teams, select Add chat icon and paste the Microsoft App ID you retrieved earlier. As the bot is registered in the Azure Active Directory, the App ID will resolve and you will find your bot.

Looking up the sideloaded bot
Looking up the sideloaded bot

Now you can select the bot and initiate a private chat conversation.

Publish the bot to the Microsoft Teams

To publish a bot for use with Microsoft Teams, you’ll have to create the package first. For that purpose, you can either use Teams App Studio or create the package yourself. As it is very straightforward and to get the general understanding, we’ll take the second option.

The package is nothing else than a ZIP archive which contains a couple of files. In my example, it contains just a JSON manifest and two icons in the PNG format. The JSON manifest describes your bot and provides enough information for Microsoft Teams to know how to deal with it.

Manifest

The first part of the manifest file defines few basic information about the App.

Manifest: basic app information
Manifest: basic app information

Following properties are used for that purpose.

  • $schemaoptional but recommended – The URL referencing the schema of the manifest.
  • manifestVersionrequired – The version of the schema the manifest is using.
  • versionrequired – App version
  • idrequired – Microsoft App ID. For our purposes, use the Microsoft App ID obtained earlier
  • packageNamerequired – An unique identifier for the app in the reverse notation
  • developerrequired – The information about your company

The next part of the manifest describes the app. You can specify short and full name and short and full description of the app. You have to put something in here as all properties are required..

QnA-Maker-03-04-Teams-Manifest-02
Manifest: app name and description

Moving to the next part, this one is used to add the bots and define their behavior.

Manifest: bot permissions and configuration
Manifest: bot permissions and configuration

Following properties are used for this purpose.

  • bots / botIdrequired – Bot Microsoft App ID (same as above)
  • bots / needsChannelSelectordefault: false – Boolean, specifies if the bot utilizes user hint to add the bot to a specific channel.
  • bots / isNotificationOnlydefault: false – If set to true, it defines a bot as an one way, notification bot. If set to false, it’s a conversational bot.
  • bots / scopes – Defines whether the bot offers an experience in the scope of the individual user (personal), the context of a channel (team) or both, if both are specified.
  • permissions – Specifies which permissions the app requests. Valid values are identity, which defines that the app will require user identity information, and messageTeamMembers which requires the permission to send direct messages to team members.

The last part of the provided manifest sample defines look an feel. We can provide an outline and an color icon and the accent color. More about that in few moments.

QnA-Maker-03-04-Teams-Manifest-03
Manifest: look and feel

Note that this is only a subset of a bigger manifest schema. The detailed description and the current version of the schema can be found under:
https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema.

Icons

To complete the package, you’ll also need to provide two icons. The icons are expected to be provided in the PNG format and there are some rules around creating them. The detailed information about those rules is provided here, but the long story short, you will need the color and the outline icon.

The color icon is used in the various places in Microsoft Teams, like in app and tab galleries, bots, flyouts etc. The icon should be 192×192 pixels in size and it may be in any color, just make sure that the background color is the accent color you specified in the manifest. Also, account for some padding. Safe region for the color icon is 96×96 pixels.

The outline icon is used in the app bar and messaging extensions the user has marked as a “favorite”. It must be 32×32 pixels in size, may contain only the white color and the transparency and should have no padding area.

Publishing

Now that you created all required files for the package, place them in one single folder and create a ZIP archive.

QnA-Maker-03-05-Teams-Package
App package contents

Then, start Microsoft Teams, go to the Store and select Upload a custom app.

Uploading a custom app
Uploading a custom app

Select the package and upload it. Next, you will be presented with the app information. Note the information you provided within the package and examine the permissions.

Installing the app
Installing the app

Choose where to deploy the bot. As we specified both personal and team scopes in the manifest, we have an option to add the bot for us and for the team. The team where the bot should be deployed can be also selected here. Click Install to continue.

Once the deployment is completed, the channel where the bot will be used can be selected.

Setting up the app
Setting up the app

Select the channel and click Set up button. With this, you performed the last step and you and your team can start using the bot in the your Teams team channel.

QnA-Maker-03-05-Teams-Chat
Using the app in the Microsoft Teams team channel

Final thoughts

This article is the last one in the series. I enjoyed to write the series and I really hope it will help someone out there. The series is written in that way to cover a particular scenario but I think that information contained in those articles can be applied to much more. Anyway, if you have any particular scenario you are interested in, write it in the comment box and I’ll get back to you.

More information

As usual, here is a compilation of the links where you can find more information about the topics covered in this article.

Teams App Studio
https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-app-studio

Microsoft Teams Schema manifest
https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema

Create an app package for your Microsoft Teams app
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-package

Upload an app package to Microsoft Teams
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-upload

Additionally, here is the sp4kbbot package I created earlier in the article and which you can take a look into or modify to fit your needs. Regarding the icons, they made by Eucalyp from https://www.flaticon.com/ is licensed by Creative Commons BY 3.0. If you use them, don’t forget to credit the author.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s