javascript - Change font of suggested actions buttons in webchat control

Question

I try to change the font of the "suggested actions"-button similar on how it is shown in this example for changing the font of the bubble text: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md

In the example they change the fontFamily of the "textContent" element.

I tried to pass something like this:

styleSet.suggestedAction= {
   ...styleSet.suggestedAction,
   "> button.fontFamily": "'Xy font', sans-serif"
};

But I'm not a css hero, so any help is appreciated

Answer 1

You have two options available to you. Which you choose depends on how granular you want to be in your changes.

The first option is to simply update the default value that is generated when Web Chat is rendered in React. To do this, you simply pass in your new value via renderWebChat.

This is the recommended method of the BotFramework-WebChat team as it significantly reduces the chance for breaking changes down the road for developers. It also maintains the other default values meaning only the properties you changed are altered.

Please note, this option will change the font globally for web chat.

const styleOptions = {
  primaryFont: "'Arial', sans-serif"
}

[...]

window.WebChat.renderWebChat( {
  directLine: [...],
  styleOptions
});

The second option is to create a new styleSet and specify the changes you want there. However, because you are directly specifying a DOM element and property, albeit via web chat, should some aspect of web chat receive an update that changes the element or property used, this can cause a breaking change for you. Additionally, you will need to pass all the property values necessary as this strips all default values from web chat.

You can still pass values in using the default styleSet properties, including primaryFont. But, for true customizations, you would add those via styleSet.suggestedAction. You can find default values here in the BotFramework-WebChat repo, should you need to reference them.

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
});

Hope of help!