Search code examples
reactjsbotframeworkweb-chat

How to customize BotFramework webchat react UI


I'm just started exploring botframework webchat with React. I have tried to come until below UI.

current ui image

In docs, its mentioned like we can control each parts of the UI using React. But I couldn't see samples that could modify webchat message styles like (user/bot message height, customize message input field). In the ReactWebChat component, there is a className prop.

<ReactWebChat 
    className={`${className || ''} web-chat`} 

Is it recommended to use this classname in-conjunction with message class selector (.web-chat .webchat__bubble__content p) to customize UI ?

user image inspect element

Thanks


Solution

  • This document should get you started. Most basic styling is available via configuration-settings.

    The border of a textmessage for instance could be implemented via styleoptions:

    <!DOCTYPE html>
    <head>
        <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    </head>
    <body>
      <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
      <script>
         // Set the CSS rules.
         const styleSet = window.WebChat.createStyleSet({
             ...
             bubbleBorderColor: '#E6E6E6',
             bubbleBorderRadius: 2,
             bubbleBorderStyle: 'solid',
             bubbleBorderWidth: 1,
             ...
          });
    
        window.WebChat.renderWebChat({
          directLine: window.WebChat.createDirectLine({
              token: '<Your Direct Line token>'}),
          styleSet
        }, document.getElementById('webchat'));
        
      </script>
    </body>