/
sbs-meeting-content-bubble.yml
265 lines (167 loc) · 12.8 KB
/
sbs-meeting-content-bubble.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
### YamlMime:Tutorial
title: Generate in-meeting notifications
metadata:
title: Generate in-meeting notifications
description: With this learning module, learn how to send reply to in-meeting notifications using bot in Teams with attendees.
audience: Developer
level: Beginner
ms.date: 12/03/2021
ms.topic: interactive-tutorial
nextTutorialHref: apps-in-teams-meetings/build-tabs-for-meeting.md
nextTutorialTitle: Read more to enable and configure apps for meetings
ms.custom: mvc
ms.localizationpriority: high
items:
- durationInMinutes: 1
content: |
Microsoft Teams helps you to generate and interact with in-meeting notifications using a bot.
**Key features of in-meeting notifications**:
* View agenda items listed in an Adaptive Card.
* Select any option in the given agenda.
* Submit your feedback on either in-meeting notifications or Adaptive Card sent in chat.
* Send targeted notifications to a specific user in a meeting.
> [!NOTE]
> In-meeting notifications are available only for Microsoft Entra users and not for anonymous users.
This step-by-step guide helps you to generate in-meeting notifications using a bot in Teams meeting. You'll see the following output:
:::image type="content" source="~/assets/images/meeting-content-bubble/desktop-and-mobile-image-final.png" alt-text="Screenshot shows the final output of in-meeting notification.":::
- title: Prerequisites
durationInMinutes: 1
content: |
The following are the prerequisites:
* Ensure that you have a working knowledge of the [CSharp language](/dotnet/csharp/fundamentals/tutorials/how-to-display-command-line-arguments).
* Ensure that you install the following tools and set up your development environment:
| | Install | For using... |
| --- | --- | --- |
| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call all in one place.|
| | [Visual Studio 2022](https://visualstudio.microsoft.com)<br> | You can install the enterprise version in Visual Studio 2022, and install the workloads. Install one of the following two workloads:<br> • **ASP.NET and web development** <br> • **.NET Core cross-platform development** |
| | [.NET Core SDK](https://dotnet.microsoft.com/en-us/download) | Customized bindings for local debugging and Azure Functions app deployments. Use the latest version or install the portable version. |
| | Dev tunnel | Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. <br> or </br> You can also use [ngrok](https://ngrok.com/download) as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`). |
> [!NOTE]
> After downloading ngrok, sign up and install [authtoken](https://ngrok.com/download).
- title: Set up local environment
durationInMinutes: 1
content: |
[!INCLUDE [Set up local environment](includes/get-started/clone-repository.md)]
- title: Register Microsoft Entra app
durationInMinutes: 5
content: |
The following steps help you to create and register your bot in Azure portal:
* Create and register your Azure app.
* Create client secret to enable SSO authentication of the bot.
* Add Teams channel to deploy the bot.
* Create a tunnel to your web server's endpoints using dev tunnel (recommended) or ngrok.
* Add messaging endpoint to the dev tunnel that you created.
[!INCLUDE [Azure app registration](includes/get-started/azure-app-registration.md)]
**Create a tunnel**
# [dev tunnel](#tab/dev)
[!INCLUDE [Tunnel](includes/get-started/dev-tunnel.md)]
# [ngrok](#tab/ngrok)
[!INCLUDE [Tunnel](includes/get-started/ngrok-tunnel.md)]
---
[!INCLUDE [Azure web authentication](includes/get-started/azure-web-authentication.md)]
[!INCLUDE [Client secret](includes/get-started/create-client-secret.md)]
[!INCLUDE [API permission](includes/get-started/azure-api-permissions.md)]
[!INCLUDE [Application ID URI](includes/get-started/application-id-uri.md)]
[!INCLUDE [Azure add scope](includes/get-started/azure-add-scope.md)]
[!INCLUDE [Azure client application](includes/get-started/azure-client-application.md)]
- title: Create your bot
durationInMinutes: 5
content: |
[!INCLUDE [Azure bot resource](includes/get-started/azure-bot-resource.md)]
[!INCLUDE [Teams channel](includes/get-started/add-teams-channel.md)]
[!INCLUDE [Messaging endpoint](includes/get-started/messaging-endpoint.md)]
- title: Set up app settings
durationInMinutes: 1
content: |
1. Go to the **appsettings.json** file in cloned repository.
:::image type="content" source="~/assets/images/meeting-content-bubble/navigate-to-meeting-content-bubble-cloned-repo.png" alt-text="Screenshot shows the App settings location.":::
1. Open the **appsettings.json** file and update the following information:
* Set `"MicrosoftAppId"` to your bot's **Microsoft App ID**.
* Set `"MicrosoftAppPassword"` to your bot's client secret **Value**.
* Set `"BaseUrl"` to the qualified `dev tunnel` or `ngrok` domain name.
:::image type="content" source="~/assets/images/meeting-content-bubble/appsettings-json.png" alt-text="Screenshot shows the App settings.":::
- title: Set up manifest file
durationInMinutes: 1
content: |
1. Go to the **manifest.json** file in cloned repository.
1. Open the **manifest.json** file and update the following information:
* Set `ID` to **Microsoft App ID**.
* Set `botId` to **Microsoft App ID**.
* Set `webApplicationInfo id` to **Microsoft App ID**.
* Set `validDomains` to **Web App Domain Name**.
> [!NOTE]
> `WebAppDomain` is your devtunnel or ngrok domain.
> If the ngrok ID ends with `*.ngrok-free.app` valid domain is optional.
:::image type="content" source="~/assets/images/meeting-content-bubble/manifest-file.png" alt-text="Screenshot shows the Manifest cloned repository.":::
- title: Build and run the service
durationInMinutes: 1
content: |
To build and run the service using Visual Studio.
1. Open **Visual Studio**.
1. Go to **File** > **Open** > **Project/Solution...**.
:::image type="content" source="~/assets/images/meeting-content-bubble/meeting-token-generator-VSopen-file.png" alt-text="Screenshot shows the Visual Studio with File, Open and Project-Solution highlighted in red.":::
1. Open the **InMeetingNotifications.sln** file in Visual Studio.
:::image type="content" source="~/assets/images/meeting-content-bubble/project-sln.png" alt-text="Screenshot shows the cloned repository with InMeetingNotifications.sln file highlighted in red.":::
1. Press **F5** to run the project.
A webpage opens with a message **Your bot is ready!**.
:::image type="content" source="~/assets/images/meeting-content-bubble/your-bot-is-ready.png" alt-text="Screenshot shows the Echo bot showing your bot is ready.":::
- title: Add in-meeting notifications app to Teams
durationInMinutes: 1
content: |
1. In your cloned repository, go to **csharp** > **InMeetingNotifications** > **Manifest**.
1. Create a .zip file with the following files that are present in the **Manifest** folder:
* manifest.json
* outline.png
* color.png
:::image type="content" source="~/assets/images/meeting-content-bubble/create-manifest-zip-file.png" alt-text="Screenshot shows the cloned repository with path and in-meeting notification demo zip file highlighted in red.":::
1. Create a meeting with a few presenters and attendees.
1. Join the meeting.
1. After the meeting has started, select **+ Apps** to add an app.
:::image type="content" source="~/assets/images/meeting-content-bubble/add-an-app.png" alt-text="Screenshot shows the option to add an app in Teams.":::
1. In the pop-up window, select **Manage apps**.
:::image type="content" source="~/assets/images/meeting-content-bubble/manage-apps-popup.png" alt-text="Screenshot shows the option to manage apps in Teams call.":::
1. Select **Upload an app** > **Upload a custom app**.
:::image type="content" source="~/assets/images/meeting-content-bubble/upload-a-custom-app.png" alt-text="Screenshot shows the Teams apps with Upload a custom app highlighted in red.":::
1. Select the .zip file you've created in the **Manifest** folder and select **Open**.
:::image type="content" source="~/assets/images/meeting-content-bubble/manifest-zip-file.png" alt-text="Screenshot shows the manifest folder with in-meeting notification demo zip file and Open option highlighted in red.":::
1. Select **Add**.
:::image type="content" source="~/assets/images/meeting-content-bubble/content-bubble-demo-add.png" alt-text="Screenshot shows the Targeted notification with Add option highlighted in red.":::
1. The **Manage apps** section displays the list of applications.
:::image type="content" source="~/assets/images/meeting-content-bubble/Manage.png" alt-text="Screenshot shows the section showing the list of applications.":::
1. Go to the meeting chat.
1. You can send a targeted notification or an in-meeting notification as follows:
# [Send targeted notification](#tab/send-targeted-notification)
To send a targeted notification, follow these steps:
1. In the chat, @mention the **In-Meeting Notification** bot and select `SendTargetedNotification`.
:::image type="content" source="~/assets/images/meeting-content-bubble/meeting-final.png" alt-text="Screenshot shows the suggestions in the Teams chat.":::
1. Select **Send**.
1. The bot sends an Adaptive Card in Teams with the list of participants in the meeting.
1. Select a specific participant you want to send the notification to.
1. Select **Send Notification**.
:::image type="content" source="~/assets/images/meeting-content-bubble/targeted-meeting-notification.png" alt-text="Screenshot shows the responses for the send targeted notification.":::
1. The targeted participant receives a pop-up notification in the meeting window.
:::image type="content" source="~/assets/images/meeting-content-bubble/send-targeted-notification.png" alt-text="Screenshot shows the final output pop-up for the send targeted notification.":::
# [Send in-meeting notification](#tab/send-in-meeting-notification)
To send an in-meeting notification, follow these steps:
1. In the chat, @mention the **In-Meeting Notification** bot and select `SendInMeetingNotification`.
:::image type="content" source="~/assets/images/meeting-content-bubble/meeting-final.png" alt-text="Screenshot shows the suggestions in the Teams chat.":::
1. Select **Send**.
1. The bot sends an Adaptive Card in Teams with an agenda.
1. Select any option from the list and select **Push Agenda**.
:::image type="content" source="~/assets/images/meeting-content-bubble/send-in-meeting-notification.png" alt-text="Screenshot shows the responses for the send in-meeting notification.":::
1. All the participants receive a pop-up notification in the meeting.
:::image type="content" source="~/assets/images/meeting-content-bubble/send-inmeeting-notification.png" alt-text="Screenshot shows the final output pop-up for the send in-meeting notification.":::
---
- title: Complete challenge
durationInMinutes: 1
content: |
Did you come up with something like this?
# [Targeted notification](#tab/targeted-notification)
The following image is an example of a targeted notification:
:::image type="content" source="~/assets/images/meeting-content-bubble/send-targeted-notification.png" alt-text="Screenshot shows the final output pop-up for the send targeted notification.":::
# [In-meeting notification](#tab/in-meeting-notification)
The following image an example of an in-meeting notification:
:::image type="content" source="~/assets/images/meeting-content-bubble/send-inmeeting-notification.png" alt-text="Screenshot shows the final output pop-up for the send in-meeting notification.":::
---
- content: |
You have successfully completed this tutorial.