Botframework-webchat: Add Backgroundcolor for SendBoxButton to defaultStyleOptions

[psaeuerl]

Feature Request

My requirement is to set the BackgroundColor of the sendBoxButton.
Currently, the defaultStyleOptions.js does not support this and i had to fall back to using css selectors.
defaultStyleOptions.js seems to be the natural place for this.

Current solution:
#webchat > div > div > div.main > div > button{ background-color: aqua; }

Desired solution:
const styleOptions = { sendBoxButtonsendBoxBackgroundColor: "aqua" };

[congysu]

@compulim can you please take a look on this issue? thanks.

[tdurnford]

@congysu You can currently accomplish this by overriding the sendBoxButton styles set. Take a look at the code snippet below and the Manual Styling Web Chat Sample for more details.

@compulim @corinagum @cwhitten What are your thoughts on adding sendBoxButtonsBackgroundColor to the default style option and having it default to the sendBoxBackground if it's undefined?

Web Chat v4

const styleSet = window.WebChat.createStyleSet();
styleSet.sendBoxButton = {
  ...styleSet.sendBoxButton,
  backgroundColor: 'aqua',
};

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

Screenshot

[corinagum]

@tdurnford I don't see a problem adding this style option

[psaeuerl]

Thank you for your reply!

Our UX Designer also requested to have a change in the send button when hovering.
Do you recommend implementing this via css or via the idosyncratic manual styling (overriding createstylesets)?
Which one is less likely to break?

[tdurnford]

I'd recommend the idosyncratic manual styling - it is the least likely to break of the two options.

[psaeuerl]

Thanks!

[CHuijsman]

@tdurnford I don't see a problem adding this style option

We are also interested in style options for the sendboxbutton background and on hover effect. Besides we were wondering if an option like sendboximage can be added for full user experience customization

[corinagum]

@CHuijsman This customization is available by creating your own sendboxbutton component. Please take a look at customizing the UI.

[felixvanleeuwen]

@corinagum None of the examples specify how to pass a custom renderer. I've been digging through some javascript files in the NPM packages to try to find out how this would be possible (FullReactWebChat.js in botframework-webchat & BasicWebChat.js
in botframework-webchat-component).
It looks like the only control we have over this part of the UI is what we can send down to it through the styleOptions object.

Am I missing something or is it not possible without forking the repo?

[corinagum]

https://github.com/microsoft/BotFramework-WebChat/issues/3526#issuecomment-705199136 Listed in our FAQ

Our custom components samples also teach how to use middleware https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/c.user-highlighting