Forum Discussion
Open Task Module in BotFramework-WebChat
Sayali-MSFT I want to use it in the Teams Tab app. Where there is a webchat.
If not task module, is there any other way to open Dialog there?
ray2408 - To open a Task Module from BotFramework-WebChat within Microsoft Teams using the appropriate adaptive card actions or by triggering the Task Module via message extensions or buttons.
To integrate BotFramework-WebChat within a Microsoft Teams Tab app, you'll need to embed the WebChat in your tab and handle communication between the bot and the user.
Here's a general guide to get started:
-
Set Up WebChat: You'll need the Direct Line token for WebChat, which you can generate from the Azure Bot Service. Here's a basic code snippet for embedding WebChat:
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> <div id="webchat" role="main"></div> <script> (async function() { const res = await fetch('YOUR_TOKEN_GENERATION_ENDPOINT'); const { token } = await res.json(); window.WebChat.renderWebChat({ directLine: window.WebChat.createDirectLine({ token }), userID: 'USER_ID', username: 'User' }, document.getElementById('webchat')); })(); </script>
-
Teams Tab Configuration:
- In your Teams app manifest, configure a tab with a corresponding URL that hosts the above WebChat.
- Handle authentication if required, making sure the user identity and bot service communicate securely.
-
Bot Interaction: You can send adaptive cards or messages directly from the bot, and you could also implement task modules or custom views from the tab as part of user interaction.
Reference Document: -
1. Use Web Chat with the Direct Line App Service extension in Bot Framework SDK - Bot Service | Microsoft Learn
2. BotFramework-WebChat/samples/01.getting-started/a.full-bundle at main ยท microsoft/BotFramework-WebChat (github.com)