Generate meeting content bubble

Teams helps you to generate and interact with content bubble using bot.

Key features of meeting content bubble:

View agenda items listed in an Adaptive Card.
Select any option in the given agenda.
Submit your feedback on either content bubble or Adaptive Card sent in chat.

Note

Meeting content bubble is available only for Azure AD users and not for anonymous users.

This step-by-step guide helps you to generate meeting content bubble using bot in Teams meeting with attendees. You'll see the following output:

Meeting content bubble introduction

Prerequisites

13 minutes remaining

Ensure you install the following tools and set up your development environment:

Microsoft Teams with valid account
Latest version of .NET Core SDK
Latest version of Visual Studio
Latest version of ngrok only for devbox testing or any equivalent tunneling solution

Note

After downloading ngrok, sign up and install authtoken.

Ensure you have working knowledge of C#.

Set up local environment

12 minutes remaining

Open Microsoft Teams Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.

Clone repository

Select Clone.

Note

If you encounter the error "Filename too long," apply the git command 'git config --system core.longpaths true' in your administrator terminal of choice.

Create and register your bot

11 minutes remaining

The following steps help you to create and register your bot in Azure portal.

Create Azure Bot resource to register bot with Azure Bot Service.
Create client secret to enable SSO authentication of the bot.
Add Teams channel to deploy the bot.
Use ngrok to create a tunnel to your web server's endpoints.
Add messaging endpoint to the ngrok tunnel you created.

To create Azure Bot resource

Go to the Azure portal.
Select Create a resource.
In the search box, enter Azure Bot.
Select Enter.
Select Azure Bot.
Select Create.
Enter required bot handle name in Bot handle.
Select your Subscription from the dropdown list.
Select your Resource group from the dropdown list.

You can also create a new resource group (select Create new > enter resource name > select OK).
If you've created a new resource group, select the required location from New resource group location dropdown list.
In the Microsoft App ID section, by default Create new Microsoft App ID is selected.

You can either select Use existing app registration and enter Existing app ID and Existing app password, or select Create new Microsoft App ID.

Note

You can't create more than one bot with the same Microsoft App ID.
Select Type of App as Multi Tenant.
Select Review + create.
If the validation passes, select Create.

It takes a few moments for your bot service to be provisioned.
Select Go to resource.

Your Azure bot is created.

To create client secret

Perform the following steps if you've created a new Microsoft App ID:

In the left panel, select Configuration.

Tip

Save the Microsoft App ID or Client ID for future reference.
Next to Microsoft App ID, select Manage.
In the Client secrets section, select New client secret.

The Add a client secret window appears.
Enter Description.
Select Add.
In the Value column, select Copy to clipboard.

Tip

Save the Client secrets value or app password for future reference.

To add the Teams channel

Select Home.
Select your bot from Recent resources.
Select Channels in the left pane and select Microsoft Teams .
Select Microsoft Teams .
Select the checkbox to accept the Terms of Service.
Select Agree.
Select Apply.

To create tunnel for local web server

Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:

ngrok http --host-header=localhost 3978

Note

While creating ngrok tunnel, use localhost 5000 instead of 3978 if you choose Command line to run your app.

Tip

If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

To add messaging endpoint

From ngrok, copy the HTTPS URL.

Note

The HTTPS URL in your ngrok is your fully qualified domain name. The WebAppDomain is a fully qualified domain name that doesn't include https:// in it.
In Settings for the Azure bot that you created, select Configuration.
In Messaging endpoint, use the HTTPS URL available from ngrok and at the end of the URL add /api/messages.
Select Apply.

You have successfully set up a bot in Azure Bot Service.

Update the Azure AD app registration

6 minutes remaining

Go to the Azure portal.
Select Azure Active Directory.
In the left navigation panel, select App Registrations.
Select your bot.
Under Manage, select Expose an API.
Select Set.
Set the Application ID URI in the form of api://your ngrok/botid-{AppID}.

The following image shows the domain name:

Note

If you're using a tunneling service such as ngrok, ensure you update the value whenever your ngrok subdomain changes. For example: api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2, where f631****.ngrok.io is the new ngrok subdomain name.
Select Add a scope.
In the panel that appears, enter access_as_user as the Scope name.
Set Who can consent? to Admins and users.
To configure the admin and user consent prompts with appropriate values for access_as_user scope, provide the following information in the fields:
- Enter Teams can access the user’s profile as Admin consent display name.
- Enter Allows Teams to call the app’s web APIs as the current user as Admin consent description.
- Enter Teams can access the user profile and make requests on the user’s behalf as User consent display name.
- Enter Enable Teams to call this app’s APIs with the same rights as the user as User consent description.
The following image shows the fields and the values:
Ensure that State is set to Enabled.
Select Add scope to save.

Note

The Scope name should match with the Application ID URI with /access_as_user appended at the end.
api://****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
In the Authorized client applications section, identify the applications that you want to authorize for your app’s web application.
Select Add a client application.
Enter Client ID: 1fec8e78-bce4-4aaf-ab1b-5451cc387264 for Teams mobile or desktop application.

You can enter Client ID: 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 for Teams web application.
Select Authorized scopes.

The following image displays the Client ID:
In the left panel, select API Permissions.

Note

Users need to consent to these permissions only if the Azure AD app is registered in a different tenant.
Select Add a permission.
Select Microsoft Graph.
Select Delegated permissions.
Add the following permissions:
- email
- offline_access
- OpenId
- profile
- User.Read
Select Add permissions.
From the left panel, select Authentication to set a redirect URI.

Note

If an app isn't granted IT admin consent, users must provide consent the first time they use an app.
1. Select Add a platform.
2. Select Web.
3. Enter the redirect URI for your app by appending auth-end to fully qualified domain name:
  https://your ngrok/auth-end.
4. Enable Implicit grant and hybrid flows by selecting the following checkboxes:
  - ID tokens
  - Access tokens
5. Select Configure.

Set up app settings

5 minutes remaining

Navigate to appsettings.json in cloned repository.
Open appsettings.json in Visual Studio and update the following information:
- Set "MicrosoftAppId" to your bot's Microsoft App ID.
- Set "MicrosoftAppPassword" to your bot's client secret ID value.
- Set "BaseURL" to your webAppDomain.

Set up manifest file

4 minutes remaining

Navigate to manifest.json in cloned repository.
Open manifest.json in Visual Studio and make the following changes:
- Set id to Microsoft App ID.
- Set botId to Microsoft App ID.
- Set validDomains to Web App Domain Name.
Note

WebAppDomain is your ngrok domain.

Build and run the service

3 minutes remaining

To build and run the service using Visual Studio

Open Visual Studio.
Navigate to File > Open > Project/Solution.
Open ContentBubbleBot.sln file.
Press F5 to run the project.

A webpage opens with a message Your bot is ready!.

Add Meeting content bubble App to Teams

2 minutes remaining

In your cloned repository, navigate to csharp > Resources > Manifest.
Create a .zip with the following files that are present in the Manifest folder:
- manifest.json
- icon-outline.png
- icon-color.png
Create a meeting with a few presenters and attendees.
After the meeting is created, select + to Add an App.
In the pop-up window, select Manage apps.
Select Upload a custom app.
Select Open to upload the .zip file that you created in the Manifest folder.
Select Add.
The Manage apps section displays the list of applications.
Go to Teams meeting chat.
Content Bubble Demo app sends an automatic reply to the meeting chat.
Send a hello message to bot.
Bot sends you agenda items listed in an Adaptive card.
Select any option and select Push Agenda to send reply.
Bot sends Feedback Adaptive card.
Select Yes or No.
Select Submit.

Bot sends the feedback message.