Bot Framework: Adaptive Cards Capabilities across Channels | Carousel | Input | Action Buttons - botframework

I was going through the documentation for adaptive cards, and I had a few queries:
There are certain capabilities that I am looking to target through Adaptive Cards, across channels (Webchat, Bing, Skype, Facebook Messenger). These include:
Showing a carousel of cards within the platform
Taking input from user within the card to provide an input/edit experience .
Action buttons as part of card, to perform an action (e.g. opening a webpage) when clicked.
I believe that most of these actions are available for Webchat, Bing, Skype, Microsoft Teams. Is there a way to accomplish this for channels like Facebook and Kik using adaptive cards? What is the level of customization required from the same?
Also, is Carousel supported across channels?
Thank you for the help!.

For the Carousel question, see #kienct89 comment: you have samples of Carousel display in https://docs.botframework.com/en-us/channel-inspector/channels/Facebook?f=Carousel&e=example1.
For the Adaptive cards, see the Visualizer on http://adaptivecards.io/visualizer/ and you will face the problem that taking input is not supported for Facebook and Kik for example (only Bing and Webchat have the possibility for input in their sample).

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/

Customize adaptive card in microsoft bot framework

I am working on microsoft bot framework and I need to style the adaptive cards. But I am facing some challenges because in json file, I am unable to get the styling attribute. So, please suggest how I'll do this.
the style of Adaptive Cards is defined by the App the card is shown in. If you are using Bot Framework for like MS Teams, MS Teams defines the look and feel of a card. In the JSON layout you can select color for a button in terms of "Danger" or "Normal" but the actual color is defined by the host.
If you are showing cards in your own app however, you can define the layout by changing the host config. (see here for details : https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config)
Only the rendering app can change the styling of cards.
Hope that answers your question.

Cross-platform Text formatting and UI design of messages in Microsoft Bot framework v4

I'm creating pretty complex messages using ms chatbot v4. The cards/messages will need to have text formatting (bold, italic, line breaks, lists, etc), audio, probably an image, you get it, pretty complex.
The goals is to use the bot through several channels like web chat, mobile apps, UWP, facebook, Teams, Slack, etc by azure channel registrations.
I'm a bit confused about which type of card or method to use. Apparently we can use rich cards, adaptive cards, or text formatting (by using *, /n/n, etc). Correct me please if I'm wrong. Microsoft documentations do not guide this directly.
My question is if there is a unified way to create the messages that can work on all platforms or they should be created separately for each family of platforms? In latter case, could you please give me a structured answer or articles?
The Bot Framework gives you the ability to communicate with multiple channels. It "handles the creation of messages that can work on all supported platforms". That being said NOT all platforms support the same UI. Meaning a rich card on Facebook messenger will render differently on Slack or Web Chat. And some channels support more/less features than others. (not all channels support adaptive cards as well)
The bot framework tries its best to support most common features between all channels AND also gives you the ability to send custom Channel Data for each channel if you want to render a specific channel UI component.
So you have to check every channel you want to target (Facebook, Slack, Skype etc.) and see what components their chatbots support.
What I do in big projects is make a "Message Factory" per Channel in which it will handle the creation of the specific channel data for that channel. I use a combination of the Factory design pattern and the Strategy design pattern to implement such structure
Taking Twitter bot as an example,Twitter does not support sending out a Carousel, so in the twitter factory the carousel creation would be an Image + Buttons instead of a rich card. But in the facebook factory, the carousel creation would return a list of rich cards.

Design Adaptive Card Support for SMS Channel Support

I am planning to design a Microsoft Bot Application which runs on multiple channels and bot will be using Adaptive Cards which contains images and other rich cards.
The question is how do we handle or design Bot application which has adaptive cards and support SMS channel or is it by default adaptive cards are rendered and supported in SMS.
Also it will be great if someone can point to any samples on it using DotNot Core SDK.
Each bot channel provides client applications that render a UI, and the question of whether or not Adaptive Cards can be rendered depends entirely on the client application. You can see here that SMS is not among the supported platforms, which makes sense because SMS messages don't use cards at all, although there seems to be something called Rich Communication Services in developer preview. However, you can always create your own mobile app that renders Adaptive Cards. There is an Android SDK and an iOS SDK. Your app could communicate with your bot over Direct Line, or you could even make an app that communicates over SMS and renders certain SMS messages as Adaptive Cards.
This may be more difficult than what you want to do, so you might just want to stick with sending images. If you want to learn more about Adaptive Cards, check out my latest blog post.

Resources