Custom chat interface for Microsoft Chatbot

Question

I would like to build a custom chatbot application using Microsoft Bot framework based on the following image

How does this work with images and buttons? Do we need to handle each button /card uniquely? Do we need to take care of rendering in a mobile application as well? Any help or directions to available samples and strategy would be useful.

Answer 1

This is probably too broad of a question for Stack Overflow, so my answers will be broad, but I'll do what I can to answer this.

I would like to build a custom chatbot application using Microsoft Bot framework based on the following image

You can use WebChat to accomplish this, although to get that kind of customization will take a lot of work. These might be good samples to look at:

• 05.b.idiosyncratic-manual-styling
• 21.customization-plain-ui

To get the form/card you have in the middle, use Adaptive Cards

How does this work with images and buttons? Do we need to handle each button /card uniquely?

You have a lot of flexibility in designing Adaptive Cards. Here are some samples. This blog post will tell you just about everything you need for how to implement them.

They work well with images and buttons and can be handled uniquely

Do we need to take care of rendering in a mobile application as well?

Both WebChat and Adaptive Cards work well in a mobile environment. Consider them "responsive".