Microsoft Bot Framework WebchatJS click events for changing css stye sets

Question

I've built a bot using microsoft bot framework and now I´m using webchat to test it. Thing is, I want to change the colors dynamically when the user clicks the 'gear' button, in other words, to change from styleSet to styleSetDark as the next code shows, but as You know, single javascript events are not recognized inside webchatjs ( I've commented one as an example) :

<html>
       <body>
          <div style="background-color: #50bdeb; text-align: center;"><img src="Logo.png"><img id="gear" src="Gear.png" width=10% height=10% style="float:right;"></div>
          <div id="contwb" style="background-color: #50bdeb; text-align: center;">
            <div id="webchat" role="main">
            </div>
          </div>
          <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
          <script>

         const styleSet = window.WebChat.createStyleSet({
          hideUploadButton: true,
          bubbleBackground: '#b9e8f5',
          bubbleTextColor: '#737277',
          bubbleBorderRadius: 20,
          botAvatarBackgroundColor: '#50bdeb',
          botAvatarImage: "Icon.png",
          bubbleFromUserTextColor: '#ffffff',
          bubbleFromUserBackground: '#d3d3d3',
          bubbleFromUserBorderRadius: 20,
          sendBoxBackground: '#d3d3d3',
          sendBoxButtonColor: '#50bdeb',
          sendBoxTextColor: '#ffffff',
          sendBoxPlaceholderColor: '#ffffff',
          sendBoxBorderTop: 'solid 10px #50bdeb',
          sendBoxBorderLeft: 'solid 10px #50bdeb',
          sendBoxBorderRight: 'solid 10px #50bdeb',
          suggestedActionBackground: '#50bdeb',
          suggestedActionTextColor: '#ffffff',
          suggestedActionBorderStyle: 'none',
          suggestedActionBorderRadius: 25,
          botAvatarInitials: 'BF',
         });

         styleSet.textContent = {
            ...styleSet.textContent,
            fontFamily: "'Arial', sans-serif"
         };

         const styleSetDark = window.WebChat.createStyleSet({
          backgroundColor: 'Grey',
          bubbleBackground: '#ffffff',
          bubbleTextColor: '#737277',
          botAvatarBackgroundColor: '#50bdeb',
          botAvatarImage: "Icon.png",
          bubbleFromUserTextColor: '#ffffff',
          bubbleFromUserBackground: '#d3d3d3',
          sendBoxBackground: '#d3d3d3',
          sendBoxButtonColor: '#50bdeb',
          sendBoxTextColor: '#ffffff',
          suggestedActionBackground: '#50bdeb',
          suggestedActionTextColor: '#ffffff',
          botAvatarInitials: 'BF',
         });

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: 'My_App_key'
               }),
               styleSet
            },
            document.getElementById('webchat')
         );


        //  $(document).on("click", "#gear", function(){
        //       window.WebChat.renderWebChat(
        //         {
        //           directLine: window.WebChat.createDirectLine({
        //               secret: 'Wa_pcRtLvKk.rTltb7NaZUAmKdZA8cBUZ90IZasydAmvGDfhoqmswkA'
        //           }),
        //           styleSetDark
        //         },
        //         document.getElementById('webchat')
        //     );
        //   });


      </script>
   </body>
</html>

Is there any way to set event to an element in order to render the other styleset ?, Does it reload the entire chat conversation if so ?...Thanks in advance.

score 1 · Answer 1 · answered Sep 18 '20 at 23:05

Unfortunately, you can't make changes after the fact using the styleSet or styleOptions as those are properties passed into Web Chat when loaded. To make changes in those would require reloading, at a minimum, Web Chat which wouldn't make for a smooth UX (but is doable).

Instead, you will need to reapply styling via traditional methods. Just keep in mind that, typically, if a user navigates away or refreshes that page the Web Chat styles will revert back to the properties that were initially passed in.

Microsoft Bot Framework WebchatJS click events for changing css stye sets

1 Answers1