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

Question

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?

Answer 1

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.