Bot Framework v4 Webchat Styling Options

Table of Contents

The Starting Position

Nowadays, styling is a hot topic. If it looks good - I’ll use it is often the mindset of users. So it’s very important to offer something very good-looking to be successful with what you do. And so it is with bots. The Microsoft Bot Framework team did a pretty good job in styling the webchat component which is looking pretty good out of the box: Microsoft Bot Framework Webchat

But companies often have the need to apply their CI/CD guidelines on whatever they use. So the white & black look of the webchat component is often not exactly what they need. Therefore, the Microsoft Bot Framework v4 webchat is offering the possibility to be customized in terms of styling. This is a great way for devs to modify the look and feel of the webchat. In the BFv4 Webchat GitHub repo there is a very detailed documentation on how to style the webchat using CSS within the HTML code. But looking at the following table which was taken from here you can see, that the React component offers even more options in terms of customization:

CDN bundle React
Change colors
Change sizes
Update/replace CSS styles
Listen to events
Interact with hosting webpage
Custom render activities
Custom render attachments
Add new UI components
Recompose the whole UI

So I was currently searching a while until I found the documenation on how to customize the webchat styling when using it as a React component, which I want to share. It’s basically described here. The following list shows the default values, which, of course you can adapt to fit your needs.

StyleSetOptions

The following samples show the default style set options which can be modified to style the React webchat component.

Color and paddings

The default colors for the webchat background and paddings:

js
1
2
3
4
5
6
7

accent: '#0063B1',
backgroundColor: 'White',
cardEmphasisBackgroundColor: '#F0F0F0',
paddingRegular: 10,
paddingWide: 10 * 2,
subtle: '#767676'

Word break

The defaults for word breaks:

js
1
2

messageActivityWordBreak: 'break-word', // 'normal' || 'break-all' || 'break-word' || 'keep-all'

Fonts

The default fonts to be used:

js
1
2
3
4

fontSizeSmall: '80%',
monospaceFont: fontFamily(['Consolas', 'Courier New', 'monospace']),
primaryFont: fontFamily(['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'])

Avatar

The default styling for the avatars of the user and the bot:

js
1
2
3
4
5
6
7
8

avatarSize: 40,
botAvatarBackgroundColor: undefined, // defaults to accent color
botAvatarImage: '',
botAvatarInitials: '',
userAvatarBackgroundColor: undefined, // defaults to accent color
userAvatarImage: '',
userAvatarInitials: ''

Bubble

The default configuration for the bubbles, which is used to render chat messages (NOTE: The bubble* are used for bot messages and the bubbleFromUser* are used for rendering user messages):

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

bubbleBackground: 'White',
bubbleBorderColor: '#E6E6E6',
bubbleBorderRadius: 2,
bubbleBorderStyle: 'solid',
bubbleBorderWidth: 1,
bubbleFromUserBackground: 'White',
bubbleFromUserBorderColor: '#E6E6E6',
bubbleFromUserBorderRadius: 2,
bubbleFromUserBorderStyle: 'solid',
bubbleFromUserBorderWidth: 1,
bubbleFromUserNubOffset: 'bottom',
bubbleFromUserNubSize: 0,
bubbleFromUserTextColor: 'Black',
bubbleImageHeight: 240,
bubbleMaxWidth: 480, // screen width = 600px
bubbleMinHeight: 40,
bubbleMinWidth: 250, // min screen width = 300px, Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
bubbleNubOffset: 'bottom',
bubbleNubSize: 0,
bubbleTextColor: 'Black'

Markdown

The default styling for markdown:

js
1
2

markdownRespectCRLF: true

Rich Cards

The default styling for rich cards:

js
1
2

richCardWrapTitle: false, // Applies to subtitles as well

Root

The default styling for the root properties:

js
1
2
3

rootHeight: '100%',
rootWidth: '100%',

Scroll to end button

The default setting for the scroll to end button to be visible:

js
1
2

hideScrollToEndButton: false,

Send box

The default styling options for the send box:

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

hideSendBox: false,
hideUploadButton: false,
microphoneButtonColorOnDictate: '#F33',
sendBoxBackground: 'White',
sendBoxButtonColor: undefined, // defaults to subtle
sendBoxButtonColorOnDisabled: '#CCC',
sendBoxButtonColorOnFocus: '#333',
sendBoxButtonColorOnHover: '#333',
sendBoxDisabledTextColor: undefined, // defaults to subtle
sendBoxHeight: 40,
sendBoxMaxHeight: 200,
sendBoxTextColor: 'Black',
sendBoxBorderBottom: '',
sendBoxBorderLeft: '',
sendBoxBorderRight: '',
sendBoxBorderTop: 'solid 1px #E6E6E6',
sendBoxPlaceholderColor: undefined, // defaults to subtle
sendBoxTextWrap: false,

Visually show spoken text

Default option for spoken text to be visible:

js
1
2

showSpokenText: false,

Suggested actions

Defaults for suggested action styling:

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

suggestedActionBackground: 'White',
suggestedActionBorder: undefined, // split into 3, null
suggestedActionBorderColor: undefined, // defaults to accent
suggestedActionBorderStyle: 'solid',
suggestedActionBoarderWidth: 2,
suggestedActionBorderRadius: 0,
suggestedActionImageHeight: 20,
suggestedActionTextColor: null,
suggestedActionDisabledBackground: undefined, // defaults to suggestedActionBackground
suggestedActionDisabledBorder: null,
suggestedActionDisabledBorderColor: '#E6E6E6',
suggestedActionDisabledBorderStyle: 'solid',
suggestedActionDisabledBorderWidth: 2,
suggestedActionDisabledTextColor: undefined, // defaults to subtle
suggestedActionHeight: 40,

Timestamp

The default values for rendering timestamps:

js
1
2
3

timestampColor: undefined, // defaults to subtle
timestampFormat: 'relative', // 'absolute'

Transcript overlay buttons

Defaults for overlay buttons (e.g. carousel and suggested action flippers, scroll to bottom, etc.):

js
1
2
3
4
5
6
7

transcriptOverlayButtonBackground: 'rgba(0, 0, 0, .6)',
transcriptOverlayButtonBackgroundOnFocus: 'rgba(0, 0, 0, .8)',
transcriptOverlayButtonBackgroundOnHover: 'rgba(0, 0, 0, .8)',
transcriptOverlayButtonColor: 'White',
transcriptOverlayButtonColorOnFocus: undefined, // defaults to transcriptOverlayButtonColor
transcriptOverlayButtonColorOnHover: undefined, // defaults to transcriptOverlayButtonColor   

Video

Default options for rendering videos as messages:

js
1
2

videoHeight: 270, // based on bubbleMaxWidth, 480 / 16 * 9 = 270

Connectivity UI

Default options for the connectivity UI rendering:

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

connectivityIconPadding: PADDING_REGULAR * 1.2,
connectivityMarginLeftRight: PADDING_REGULAR * 1.4,
connectivityMarginTopBottom: PADDING_REGULAR * 0.8,
connectivityTextSize: '75%',
failedConnectivity: '#C50F1F',
slowConnectivity: '#EAA300',
notificationText: '#5E5E5E',

typingAnimationBackgroundImage: null,
typingAnimationDuration: 5000,
typingAnimationHeight: 20,
typingAnimationWidth: 64,

spinnerAnimationBackgroundImage: null,
spinnerAnimationHeight: 16,
spinnerAnimationWidth: 16,
spinnerAnimationPaddingRight: 12,

enableUploadThumbnail: true,
uploadThumbnailContentType: 'image/jpeg',
uploadThumbnailHeight: 360,
uploadThumbnailQuality: 0.6,
uploadThumbnailWidth: 720

Conclusion

From my point of view it’s extremely important to use styling options to give your virtual assistant a more personal touch. That’s why I recommend everyone to walk through the docs which explain the process of customizing the BFv4 webchat component pretty good. Have fun customizing!

Author's picture

Stephan Bisser


AI MVP

AT
All about Conversational AI

Ask my bot anything: