Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc Improvement][Build Outgoing Webhooks][4268373] #12185

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

[Doc Improvement][Build Outgoing Webhooks][4268373] #12185

Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d0349cc
Updates for I ran into an issue
v-santhoshs1 Jan 30, 2025
bb442be
Update sbs-outgoing-webhooks.yml
v-santhoshs1 Jan 30, 2025
926c2b9
Added a button
v-santhoshs1 Jan 30, 2025
5a8fb3f
Update sbs-outgoing-webhooks.yml
v-santhoshs1 Jan 31, 2025
817ff53
Button placement
v-santhoshs1 Jan 31, 2025
a4a3a0c
Edits
v-santhoshs1 Jan 31, 2025
3c0b42b
Fixed Review Comments
v-santhoshs1 Feb 3, 2025
3c86d7d
Fixing review comments - extra spaces
v-santhoshs1 Feb 3, 2025
da7a04c
Fixed review comments
v-santhoshs1 Feb 3, 2025
026dada
Fixed Peer review comments - From Vishnu
v-santhoshs1 Feb 4, 2025
5122300
Merge branch 'main' into doc-improvement-I-ran-in-to-an-issue-sbs
v-santhoshs1 Feb 11, 2025
2202aa6
ms date and ngrok broken link
v-santhoshs1 Feb 11, 2025
e7d4713
Self review edits
v-santhoshs1 Feb 11, 2025
759041e
Merge branch 'main' into doc-improvement-I-ran-in-to-an-issue-sbs
v-santhoshs1 Feb 12, 2025
e397771
Merge branch 'main' into doc-improvement-I-ran-in-to-an-issue-sbs
v-santhoshs1 Feb 13, 2025
9fbbf37
Merge branch 'main' into doc-improvement-I-ran-in-to-an-issue-sbs
v-shalinir Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 23 additions & 8 deletions msteams-platform/sbs-outgoing-webhooks.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ metadata:
description: In this module, learn how to create, set up, and run Outgoing Webhooks from Visual Studio for Microsoft Teams to integrate with external apps.
audience: Developer
level: Beginner
ms.date: 14/01/2022
ms.date: 02/11/2025
ms.topic: interactive-tutorial
nextTutorialHref: webhooks-and-connectors/how-to/add-outgoing-webhook.md
nextTutorialTitle: Read more on Outgoing Webhooks
Expand Down Expand Up @@ -41,15 +41,17 @@ items:
| --- | --- | --- |
|   | [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) | You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version. |
| &nbsp; | 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`). |
| &nbsp; | 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/downloads) 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).
> After downloading ngrok, sign up and install [authtoken](https://ngrok.com/downloads).

- title: Set up local environment
durationInMinutes: 1
content: |
[!INCLUDE [Set up local environment](includes/get-started/clone-repository.md)]
> [!div class="nextstepaction"]
> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20Set%20up%20local%20environment&author=surbhigupta&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Ftabs%3Ddev%26tutorial-step%3D2&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Fsbs-outgoing-webhooks.yml&documentVersionIndependentId=ac47142b-7185-708b-9af1-fb88aea051a8&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2A%2Amsteams)

- title: Create Outgoing Webhooks
durationInMinutes: 5
Expand All @@ -58,12 +60,19 @@ items:

# [dev tunnel](#tab/dev)

[!INCLUDE [Tunnel](includes/get-started/dev-tunnel.md)]
[!INCLUDE [Tunnel](includes/get-started/dev-tunnel.md)]

> [!div class="nextstepaction"]
> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20dev%20tunnel&author=surbhigupta&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Ftabs%3Ddev%26tutorial-step%3D3&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Fsbs-outgoing-webhooks.yml&documentVersionIndependentId=ac47142b-7185-708b-9af1-fb88aea051a8&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2A%2Amsteams)


# [ngrok](#tab/ngrok)

[!INCLUDE [Tunnel](includes/get-started/ngrok-tunnel.md)]


> [!div class="nextstepaction"]
> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20ngrok&author=surbhigupta&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Ftabs%3Ddev%26tutorial-step%3D3&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Fsbs-outgoing-webhooks.yml&documentVersionIndependentId=ac47142b-7185-708b-9af1-fb88aea051a8&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2A%2Amsteams)

---

1. Go to **Teams** and select **Teams** from the left pane.
Expand Down Expand Up @@ -103,7 +112,9 @@ items:
> [!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.

:::image type="content" source="~/assets/images/sbs-outgoing-webhooks/security-token.png" alt-text="Screenshot of Outgoing Webhook being ready with the Security token highlighted in red.":::
:::image type="content" source="~/assets/images/sbs-outgoing-webhooks/security-token.png" alt-text="Screenshot of Outgoing Webhook being ready with the Security token highlighted in red.":::
> [!div class="nextstepaction"]
> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20Create%20Outgoing%20Webhooks&author=surbhigupta&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Ftabs%3Ddev%26tutorial-step%3D3&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Fsbs-outgoing-webhooks.yml&documentVersionIndependentId=ac47142b-7185-708b-9af1-fb88aea051a8&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2A%2Amsteams)
v-santhoshs1 marked this conversation as resolved.
Show resolved Hide resolved

- title: Build and run the service
durationInMinutes: 1
Expand All @@ -130,7 +141,9 @@ items:

A webpage displays local host information.

:::image type="content" source="./assets/images//sbs-outgoing-webhooks/outgoing-webhooks-ready.png" alt-text="Screenshot shows the localhost:3978 running in browser.":::
:::image type="content" source="./assets/images//sbs-outgoing-webhooks/outgoing-webhooks-ready.png" alt-text="Screenshot shows the localhost:3978 running in browser.":::
> [!div class="nextstepaction"]
> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20Build%20and%20run%20the%20service&pageUrl=learn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Ftabs%3Ddev%26tutorial-step%3D4&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Fsbs-outgoing-webhooks.yml&documentVersionIndependentId=ac47142b-7185-708b-9af1-fb88aea051a8&author=surbhigupta&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2A%2Amsteams%2Amsteams)

- title: Interact with the app in Teams
durationInMinutes: 1
Expand All @@ -149,7 +162,9 @@ items:
1. The meeting chat displays a new message.

:::image type="content" source="./assets/images/sbs-outgoing-webhooks/output-result.png" alt-text="Screenshot displays new message in Teams with the name of the Outgoing Webhook.":::

> [!div class="nextstepaction"]
> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20Interact%20with%20the%20app%20in%20Teams&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Ftabs%3Ddev%26tutorial-step%3D5%23main%20https%3A%2F%2Freview.learn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fsbs-outgoing-webhooks%3Fbranch%3Dpr-en-us-12185%26tabs%3Ddev%26tutorial-step%3D5&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Fsbs-outgoing-webhooks.yml&documentVersionIndependentId=ac47142b-7185-708b-9af1-fb88aea051a8&author=surbhigupta&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2Amsteams)

- title: Complete challenge
durationInMinutes: 1
content: |
Expand Down