Edit Microsoft Chatbot UI Design

Edit Microsoft ChatBot UI design

It depends on how you want to integrate the webchat in your page but yes it is possible to change the aspect, it's only css and js

All the details are provided on the GitHub account for the Webchat: https://github.com/Microsoft/BotFramework-WebChat

In a few words:

Want to run a custom build of WebChat? Clone this repo, alter it, build it, and reference your built botchat.css and botchat.js files.

And for Styling:

Styling

In the /src/scss/ folder you will find the source files for generating
/botchat.css. Run npm run build-css to compile once you've made your
changes. For basic branding, change colors.scss to match your color
scheme. For advanced styling, change botchat.scss.

Is there a way to re-design webchat interface of microsoft bot?

Refer to Update 11/16

Currently there isn't a way to skin the web chat. This is a popular request though and there are few threads on BotBuilder discussing about this:

Styling web chat control
Custom WebChat Control UI

Update 11/16

The Web Chat sample is now open source and available in GitHub: https://github.com/Microsoft/BotFramework-WebChat so you can now do the customization that you want.

How do I modify UI of webchat v4 using Iframe implementation

Unfortunately, in v4 iframe Web Chat, there is no way to alter the CSS as it is locked down. The only option is to use v4 directline Web Chat.

The iframe version is meant to be minimal, out-of-the-box ready, and purposely designed to not be customized. If you are seeking to customize the UI, then using BotFramework-WebChat is what you want.

Does it require a bit of elbow grease? Yes. Is it robust and offer the opportunity to build a better experience for your users? Absolutely.

Side note: Don't revert back to v3 in order to utilize the iframe and customize. v3 (BotChat) is deprecated and is no longer supported by Microsoft.

Hope of help!

How to modify the UI of BOT and USER inputs in WEBCHAT in C# using SDK V4?

Your case is described in the webchat’s GitHub page, under section about “Customization”.

Regarding bubble’s color: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md#change-font-or-color

So as you can see it is like the following:

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat" role="main"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      const styleOptions = {
        bubbleBackground: 'rgba(0, 0, 255, .1)',
        bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
      };

      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'YOUR_BOT_SECRET' }),

        // Passing "styleOptions" when rendering Web Chat
        styleOptions
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

Custom chat interface for Microsoft Chatbot

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".

Edit Microsoft Chatbot UI Design