Build Outgoing Webhooks

Webhooks help Microsoft Teams to integrate with external apps. In Teams, the Outgoing Webhooks act as bot and search for messages in channels using @mention. The Outgoing Webhooks allow users to send messages to web services without performing the entire process of creating bots through Microsoft Bot Framework. The Outgoing Webhooks post data from Teams to any service capable of accepting JSON payload.

Key features of Outgoing Webhooks

Send notifications to any external web service.
Respond with rich text messages including cards and images.
Receive messages in public channels and not within the personal or private scope.
Send HTTP POST to web service and get response.

Note

The Outgoing Webhooks can't access any other APIs, such as retrieve the roster or list of channels in a team.

This step-by-step guide helps you to create Outgoing Webhooks in Teams. You'll see the following output:

ready

Prerequisites

10 minutes remaining

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

Microsoft Teams with valid account
Latest version of Visual Studio
ngrok latest version (only for devbox testing) or any equivalent tunneling solution

Note

After downloading ngrok, sign up and install authtoken.

Set up local environment

9 minutes remaining

Clone Microsoft-Teams-Samples repository to your local GitHub:

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

Create Outgoing Webhooks

8 minutes remaining

Select the required team, and then select Manage team from the (•••) dropdown menu.
Choose the Apps tab from the navigation bar.
Use ngrok 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
```
From the window's lower-right corner, select Create an Outgoing Webhook.

.
Enter the following details:
- Name: The webhook title in @mention tab.
- Callback URL: The URL generated from ngrok that accepts JSON payloads and receives POST requests from Teams. To use the api/Sample or api/authenticatedSample, do the following:
  - For api/sample, copy-and-paste ngrok URL and append it with /api/sample.
  - For authenticated sample, copy-and-paste ngrok URL and append it with /authenticatedSample?id=contoso.
- Description: A detailed string that will appear in the profile card and the team-level App dashboard.
- Profile picture (optional): App icon for your webhook.
Select Create. The Outgoing Webhook is added to the current team's channel.
A Hash-based Message Authentication Code (HMAC) dialogue box appears. You can use the security token in AuthProvider.cs file to authenticate calls between Teams and any designated outside services.

Note

The Outgoing Webhook is available to the team's users, only if the URL is valid and the server, and client authentication tokens are equal. For example, an HMAC handshake.

Build and run the service

3 minutes remaining

Launch the latest version of Visual Studio.
Navigate to File > Open > Project/Solution.
Select WebhookSampleBot.sln file from csharp folder.
Update the "contoso" to "M365x712764" and HMAC in AuthProvider.cs file.
Press F5 to run the project.
Select Yes if the following dialog appears:

A webpage displays local host information.

Interact with the app in Teams

2 minutes remaining

Select General to start a new conversation.
Select New conversation to begin a conversation.
Enter @mention the name of the Outgoing Webhook to invoke it in the channel.
Select send.

Note

You can send Adaptive Card, Hero card, and text messages as attachment with Outgoing Webhook.
The meeting chat displays new message.

Complete challenge

1 minutes remaining

Did you come up with something like this?