CODEWITHSUNDEEP
c#botframeworkchatbot
Chaitanya N G
Chaitanya N G

Reputation: 524

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

I'm trying to change the layout of my webchat bot such that: 1. User messages comes in different color and bubble 2. Bot Reply should come in different Color and bubble Can any one explain or guide me step by step code for the same in order apply in BOT V4 using C#? By step by step i mean: 1. If there is any configuration or setting to be done where and what and in what order 2. If any code to be written where and how and what code in which area or section like wise detailed step by step guide, sorry but i am a newbie to bot and coding hence asking detailed guide

Expected Result: Bot and User should be in different UI or color or bubble Actual Result: need step by step guide on how to achieve it.

Upvotes: 1

Views: 283

Answers (1)

Nicolas R
Nicolas R

Reputation: 14619

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>

Upvotes: 3

Related Questions