botframework - Use styleOptions on Webchat Hosted via ReactJS

Question

Is there a way to use styleOptions when rendering the Web Chat when using ReactJS?

I can see that it is supported as a hook as per https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/HOOKS.md#usestyleoptions but there is no instructions to implement it.

Thanks!

question from:https://stackoverflow.com/questions/66066862/use-styleoptions-on-webchat-hosted-via-reactjs

Answer 1

I was able to get it to work using the below code:

ReactDOM.render(
    <Composer
      store={store}
      directLine={window.WebChat.createDirectLine({ token })}
      userID={user}
      username={usern}
      styleOptions={{
        bubbleBorderColor: '#FF8200',
        bubbleBackground: '#ffffff',
        bubbleBorderRadius: 20,
        bubbleFromUserBackground: '#ffffff',
        bubbleFromUserBorderColor: '#FF8200',
        bubbleFromUserBorderStyle: 'solid',
        bubbleFromUserBorderWidth: 1,
        bubbleFromUserBorderRadius: 20,
        sendBoxButtonColorOnHover: '#ff9742',
        suggestedActionBorderColor: '#ff7300',
        suggestedActionBorderRadius: 20,
        hideUploadButton: true
    }}>
      <BasicWebChat />
      <SendMessageOnConnect />
    </Composer>,
    document.getElementById('webchat')