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

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.

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/

sending a message to bot: v3 directline.postActivity vs. v4 dispatch from webchat store

We are migrating from BotFramework-Webchat v3 to v4. Usually we send a message from the chat through the directline object created from v3 BotChat using the directline.postActivity function. However in our v4 implementation there were issues with the behavior of messages shown in the chat window when posting activities like this.
It seems that sending messages through the webchat redux store as shown in this example is the recommended approach.
I am wondering what is the difference between these two usages? It seems something is different between v3 and v4 versions and I am having difficulty finding references in the documentation about this. Should directline.postActivity be avoided completely?
It isn't documented anywhere, but best practice is what is demonstrated via the samples, by use of the Web Chat redux store and its list of available actions.
Essentially, Web Chat v4 is built on top of BotFramework-DirectlineJS which does use observables. Web Chat then translates the Direct Line observables into its own methods for consumption internally and by the user.
As you noted, it is possible to use the Direct Line observables in Web Chat but it is neither the best method nor the best practice to do so. Primarily, because Web Chat wasn't specifically designed around their use, except internally. It can work, but it opens you up to potentially curious behavior.

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.

Which bot framework to use (if any) for a Kik, Facebook, & Slack messaging bot using javascript?

I'm building a chatbot that will need to be launched on Kik, Facebook, and Slack. I'm unsure of where to start in terms of using a bot framework or whether I should create something custom myself.
I don't believe I will need any NLP. The user is going to be pushed down a very structured path, that will use buttons to guide the users to the next prompts and will also share with the user links and media.
Microsoft Bot Framework seems like the main framework I should look at, but its unclear to me how useful it will be if I end up wanting to deliver responses that are custom to each messaging platform. Meaning, on Facebook I may want to take advantage of a custom feature that they have like buttons or templates and on Kik I will want to take advantage of suggested keyboards.
Any suggestions or guidance is appreciated.
BotFramework will do the translation for you. Write to the BotFramework schema and it will using buttons for Facebook and keyboards for Kik.

Resources