Open a URL as a popup/Iframe in MS Teams - botframework

I have a Bot, as part of the conversation we will be sending a link on click of that need to open the page as a popup/in a Frame up on the MS Team window.
Bot is created using MS Bot framework.

You can do this using something called a "Task Module". Task Modules are basically framed popups inside Teams, and they can show either an Adaptive Card or a a web url, where you can host your own web content or even an iframe. As per the docs:
Task modules allow you to create modal popup experiences in your Teams application. Inside the popup you can run your own custom HTML/JavaScript code, show an -based widget such as a YouTube or Microsoft Stream video or display an Adaptive card. They are especially useful for initiating and completing tasks or displaying rich information like videos or Power BI dashboards. A popup experience is often more natural for users initiating and completing tasks compared to a tab or a conversation-based bot experience.

Related

Chatbot with multiselect option (for Microsoft Teams) [duplicate]

We have a chatbot which interacts with user based on related queries provided as buttons. But the issue here is he can only select one query through button. So I wanted a way through which user can select multiple query from dropdown or checkboxes. Upon searching I cam across this link:
"Allow users to multiselect option in BotFramework"
Now this is something which can help me, but I wanted to confirm that the adaptive card c# bot framework in used in the link can is compatible with Azure bot services or not ?? Can I use this Adaptive Card botframework in Azure bot services ?
I am noob in this and just started with chatbots and all so any suggestion will help or if there is any other better way to implement multi-select options then it will do as well.
Adaptive Cards have little to do with the Azure Bot Service. When it comes to whether or not Adaptive Cards are supported, that is entirely determined by the front end because that's where an Adaptive Card renderer would be. In the case of chat bots the front end would be a chat platform, which the Bot Framework calls a bot "channel." It's important to understand that a lot of bot behavior is channel-specific, and so you need to consider what channel you're using. The two main Bot Framework channels that support Adaptive Cards are Microsoft Teams and Bot Framework Web Chat. You can see an official list of platforms that support Adaptive Cards here: https://learn.microsoft.com/adaptive-cards/resources/partners
If you're using a channel that doesn't support Adaptive Cards, there may be some other channel-specific feature that allows users to select multiple options, such as Slack's block kit. If there isn't, then you may have to design the bot to gather information through a dialog. This could be complicated, but the FormFlow library might help. If you build your own dialog then there's no reason it couldn't still use buttons. You could have a submit button that the user clicks after they've clicked the other buttons, though this might require some more advanced bot development skills.
If you'd like to know more about Adaptive Cards, please have a look at my blog post: https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/

Chatbot with multiselect option

We have a chatbot which interacts with user based on related queries provided as buttons. But the issue here is he can only select one query through button. So I wanted a way through which user can select multiple query from dropdown or checkboxes. Upon searching I cam across this link:
"Allow users to multiselect option in BotFramework"
Now this is something which can help me, but I wanted to confirm that the adaptive card c# bot framework in used in the link can is compatible with Azure bot services or not ?? Can I use this Adaptive Card botframework in Azure bot services ?
I am noob in this and just started with chatbots and all so any suggestion will help or if there is any other better way to implement multi-select options then it will do as well.
Adaptive Cards have little to do with the Azure Bot Service. When it comes to whether or not Adaptive Cards are supported, that is entirely determined by the front end because that's where an Adaptive Card renderer would be. In the case of chat bots the front end would be a chat platform, which the Bot Framework calls a bot "channel." It's important to understand that a lot of bot behavior is channel-specific, and so you need to consider what channel you're using. The two main Bot Framework channels that support Adaptive Cards are Microsoft Teams and Bot Framework Web Chat. You can see an official list of platforms that support Adaptive Cards here: https://learn.microsoft.com/adaptive-cards/resources/partners
If you're using a channel that doesn't support Adaptive Cards, there may be some other channel-specific feature that allows users to select multiple options, such as Slack's block kit. If there isn't, then you may have to design the bot to gather information through a dialog. This could be complicated, but the FormFlow library might help. If you build your own dialog then there's no reason it couldn't still use buttons. You could have a submit button that the user clicks after they've clicked the other buttons, though this might require some more advanced bot development skills.
If you'd like to know more about Adaptive Cards, please have a look at my blog post: https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/

How to open a Teams card action URL in a collaborative view instead of new browser window?

I have a bot that ultimately returns a hero card to a chat message box. This card has an action button that is currently configured to use openUrl, which spawns a new browser window upon click. We now have a requirement to display the same Url in a collaborative view within Teams (i.e. along-side a chat conversation).
I've seen similar functionality when sharing a document via a chat conversation, but can't seem to find any code samples that take this approach for a Url.
Is something like this possible and if so, any ideas how to best implement this approach?
When you use open URL action it will redirect to browser. This is by Design. But you open open the URL with in the task module when you click on the button, The page need to be publicly available and it should be IFrame. Also you need to add the URL domain to the valid domain, so that you can view the Page inside taskmodule without redirecting to browser. Please check this docs for more info

Using azure bot services in Teams : how to send files to bot

I am new to development in teams and bot framework.
I have a botframework bot which is up and running on Teams. I did not use the app studio, I directly exported it from azure bot service.
I want to send an image from the mobile phone (like a selfie). It seems you can do this with any contact you have but not with bots. Right now, sending files to bots seems to be impossible on my version of Teams. You can send an image via bing, that's all.
From the documentation below, it says: "Sending and receiving files to bots on mobile devices is not supported."
https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/conversations/send-and-receive-files?tabs=dotnet
On my computer, it seems as well that it is not supported. Anyway, I am looking for a solution to use my phone camera to share a selfie.
I came across this thread that discusses a way to add a button to prompt the user to upload a file on the client-side.
Prompt User to Upload file in Dialog Flow with MS Bot Framwork v4
Is this possible to do this in Teams rather than on Webchat?
I am new to this framework, so any insights on the above would be greatly appreciated!
This is possible and we actually just released a sample for it (Node / C#). Note, however, that I don't believe you can trigger the user's camera...only ask for them to upload an image file.
The important part that you're likely missing is step 7 (you need a manifest.json that contains "supportsFiles": true):
This step is specific to Teams. Edit the manifest.json contained in the teamsAppManifest folder to replace your app id from Bot Framework everywhere you see the place holder string <>. Zip up the contents of the teamsAppManifest folder to create a manifest.zip. Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

PromptOptions dialog doesn't appear in embeded bot framework web chat

I have a bot framework v4 bot that prompts the user for a set of options using Microsoft.Bot.Builder.Dialogs.PromptOptions.
In Skype for business I see a list of options and I have to type back the chosen answer. In the "Test in Web Chat" section in Azure, I see buttons for the options as well as in the Bot Framework Emulator.
But when I use the iframe to embed the chat, if at the top of the conversation appears a welcome message and the bot icon, then the buttons don't display, neither the written options. But sometimes that Welcome message doesn't appear when the chat loads, and at that moment the buttons do appear.
The PromptOptions dialog is triggered by the first message of a user.
There are two versions of Web Chat you need to be aware of - Web Chat and Bot Chat. Bot Chat renders prompt options as a list while Web Chat creates buttons for each option. Currently, the iFrame renders a Bot Chat component, and the Emulator uses Web Chat which is why your prompt options are rendering as buttons in the Emulator and not in the iFrame.
The BotFramework development team is planning to upgrade the iFrame from Bot Chat to Web Chat in the next release, which should be relatively soon. You can either wait for the update or add Web Chat directly to your app.
For more information on embedding Web Chat in your site, take a look a the Web Chat Samples.

Resources