When it comes to making changes in Web Chat, you have two paths to choose from, each with its own considerations.
The first option involves updating the default value that appears when Web Chat is rendered in React. By simply passing your new value through renderWebChat, you can achieve this. This approach is highly recommended by the BotFramework-WebChat team as it minimizes the risk of future disruptions for developers. Moreover, only the properties you modify will be affected, leaving the rest of the defaults untouched.
It's important to note that selecting this option will alter the font settings globally for web chat.
const styleOptions = {
primaryFont: "'Arial', sans-serif"
}
[...]
window.WebChat.renderWebChat( {
directLine: [...],
styleOptions
});
https://i.sstatic.net/4W3HZ.png
The second option entails creating a new styleSet where you can specify the desired modifications. However, since you're directly targeting a DOM element and property within web chat, any future updates that affect these elements or properties may lead to compatibility issues. Furthermore, you'll need to provide values for all properties, effectively replacing all default settings in web chat.
You can still utilize the default styleSet properties, such as primaryFont. For more extensive customizations, you'd incorporate them using styleSet.suggestedAction. The default values are available here in the BotFramework-WebChat repo for reference.
const styleSet = createStyleSet ( {
bubbleBackground: 'blue',
bubbleFromUserBackground: 'red',
bubbleBorderRadius: 18,
bubbleFromUserBorderRadius: 18,
} );
styleSet.suggestedAction = {
...styleSet.suggestAction,
'& > button': {
fontFamily: "'Arial', sans-serif"
}
window.WebChat.renderWebChat( {
directLine: [...],
styleSet
});
https://i.sstatic.net/TDfxj.png
I trust this information proves helpful!