Applying custom styles to your chatbot

You can apply custom styles to your chatbot to change its default appearance. Custom styling is only possible for the default web chat view of the chatbot (Direct Line web chat).

Before you begin

You can only apply custom styles to the default web chat view of your chatbot. The default web chat view is the Direct Line web chat channel, which is the default channel when you create a chatbot instance for IBM RPA on premises or when you get a chatbot instance for IBM RPA SaaS after requesting it.

Procedure

In the Styling step when creating or editing a chat mapping, the JSON configuration field accepts JSON data containing the custom styles. You can use one or more of the attributes described in the JSON attributes section.

Note:Some of the attributes have default values. You can review these values in the Web Chat customization documentation on Microsoft's official documentation for Bot Framework SDK 4.

JSON attributes

Attribute name	Value type	Description
`accent`	`string`	Web Chat component accent color.
`backgroundColor`	`string`	Transcript background color.
`subtle`	`string`	Secondary component color.
`paddingRegular`	`number`	Default padding used in most visual components.
`paddingWide`	`number`	Padding used for suggestedAction buttons.
`transitionDuration`	`string`	Transition for Bubble, Carousel, and StackedLayout.
`fontSizeSmall`	`number` or `string`	Font size used for secondary components such as sendStatus.
`monospaceFont`	`string`	Font used for ErrorBox comma-space separated string.
`primaryFont`	`string`	Font used in most visual components comma-space separated string.
`rootHeight`	`number` or `string`	Font used in most visual components comma-space separated string.
`rootWidth`	`number` or `string`	Font used in most visual components comma-space separated string.
`rootZIndex`	`number`	"z-index" for the root container of Web Chat. This will form a new stacking context so "z-index" used in children won't pollute.
`avatarBorderRadius`	`number` or `string`	Border radius used for both bot and user avatar.
`avatarSize`	`number`	Height and width of avatar.
`botAvatarBackgroundColor`	`string`	Background color defaults to accent.
`botAvatarImage`	`string`	URL string. Can be data URI or blob botAvatarInitials must be set to empty string.
`botAvatarInitials`	`string`	Typically rendered as two letters, e.g. 'WC'. Empty string is required when setting `botAvatarImage`.
`userAvatarBackgroundColor`	`string`	Background color defaults to accent.
`userAvatarImage`	`string`	URL string. Can be data URI or blob `userAvatarInitials` must be set to empty string.
`userAvatarInitials`	`string`	Typically rendered as two letters, i.e. 'WC'. Empty string is required when setting userAvatarImage.
`showAvatarInGroup`	`true` or `'sender'` or `'status'`	Avatar grouping can be set at 3 different levels. Show avatar on activities sharing the same sender ('sender'). Show avatar on activities sharing the same status ('status'; default). Show avatar on every activity (true).
`bubbleBackground`	`string`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleBorderColor`	`string`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleBorderRadius`	`number`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleBorderStyle`	`string`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleBorderWidth`	`number`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleFromUserBackground`	`string`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleFromUserBorderColor`	`string`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleFromUserBorderRadius`	`number`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleFromUserBorderStyle`	`string`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleFromUserBorderWidth`	`number`	'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
`bubbleFromUserNubOffset`	`number` or `'bottom'` or `'top'`	Nub offset 'bottom' will render nub at the bottom. A positive or negative number will shift nub offset up/down. "top" is equivalent to positive zero. "bottom" is equivalent to negative zero.
`bubbleFromUserNubSize`	`number`	Nub size 0 will render a sharp corner.
`bubbleFromUserTextColor`	`string`	Color of the text from the user.
`bubbleImageHeight`	`number`	Image height.
`bubbleMaxWidth`	`number`	Max width of the bubble.
`bubbleMinHeight`	`number`	Min height of the bubble.
`bubbleMinWidth`	`number`	Min width of the bybble.
`bubbleNubOffset`	`number` or `'bottom'` or `'top'`	Nub offset ''bottom' will render nub at the bottom. A positive or negative number will shift nub offset up/down. "top" is equivalent to positive zero. "bottom" is equivalent to negative zero.
`bubbleNubSize`	`number`	Nub size 0 will render a sharp corner.
`bubbleTextColor`	`string`	Color of the text in the bubble.
`messageActivityWordBreak`	`'normal'` or `'break-all'` or `'break-word'` or `'keep-all'`	No description available.
`connectivityIconPadding`	`number`	No description available.
`connectivityMarginLeftRight`	`number`	No description available.
`connectivityMarginTopBottom`	`number`	No description available.
`connectivityTextSize`	`number` or `string`	No description available.
`failedConnectivity`	`number` or `string`	No description available.
`slowConnectivity`	`string`	No description available.
`notificationText`	`string`	No description available.
`slowConnectionAfter`	`number`	Slow connection status will render after x amount of time with no service response.
`emojiSet`	`boolean` or `Record<string, string>`	Emoji styling. If true, Web Chat's default set of emoji will be enabled. A custom object will enable unicode emoji specified by the developer. key: emoticon. value: unicode emoji.
`internalLiveRegionFadeAfter`	`number`	New activities will be rendered in the non-visual live region and removed after a certain amount of time. Modify this property to change fade time.
`markdownRespectCRLF`	`boolean`	Parse markdown to ensure carriage return is respected.
`markdownExternalLinkIconImage`	`string`	Assign new image for anchor links to indicate external.
`hideScrollToEndButton`	`boolean`	Prevent scroll to end button from rendering.
`autoScrollSnapOnActivity`	`boolean` or `number`	Snap to activity to 'snap-point'. If true, scrolling will pause after 1 activity is received. Specifying a number will pause after X number of activities.
`autoScrollSnapOnActivityOffset`	`number`	Specify number of pixels to overscroll or underscroll after pause.
`autoScrollSnapOnPage`	`boolean` or `number`	If true, scrolling will pause after activities have filled the page. Specifying a number (0 to 1) will pause after % of page is filled.
`autoScrollSnapOnPageoffset`	`number`	Specify number of pixels to overscroll or underscroll after pause.
`hideSendBox`	`boolean`	Send box styling.
`hideUploadButton`	`boolean`	Send box styling.
`microphoneButtonColorOnDictate`	`string`	Send box styling.
`sendBoxBackground`	`string`	Send box styling.
`sendBoxButtonColor`	`string`	Button color defaults to subtle.
`sendBoxButtonColorOnDisabled`	`string`	Button color defaults to subtle.
`sendBoxButtonColorOnFocus`	`string`	Button color defaults to subtle.
`sendBoxButtonColorOnHover`	`string`	Button color defaults to subtle.
`sendBoxDisabledTextColor`	`string`	Disabled text color defaults to subtle.
`sendBoxHeight`	`number` or `string`	Send box height.
`sendBoxMaxHeight`	`number` or `string`	Send box max height.
`sendBoxTextColor`	`string`	Send box text color.
`sendBoxBorderBottom`	`number` or `string`	Send box bottom border styling.
`sendBoxBorderLeft`	`number` or `string`	Send box left border styling.
`sendBoxBorderRight`	`number` or `string`	Send box right border styling.
`sendBoxBorderTop`	`number` or `string`	Send box top border styling.
`sendBoxPlaceholderColor`	`string`	Send box placeholder color.
`sendBoxTextWrap`	`boolean`	Whether to wrap send box text or not.
`sendBoxButtonAlignment`	`'bottom'` or `'stretch'` or `'top'`	Send box button alignment.
`showSpokenText`	`boolean`	Show spoken text.
`spinnerAnimationBackgroundImage`	`string`	Spinner animation styling.
`spinnerAnimationHeight`	`number` or `string`	Spinner animation styling.
`spinnerAnimationWidth`	`number` or `string`	Spinner animation styling.
`spinnerAnimationPadding`	`number` or `string`	Spinner animation styling.
`suggestedActionBackground`	`string`	Suggested Actions.
`suggestedActionBorderColor`	`string`	Border color defaults to accent.
`suggestedActionBorderRadius`	`number` or `string`	Action border radius.
`suggestedActionBorderStyle`	`string`	Action border style.
`suggestedActionBorderWidth`	`number` or `string`	Action border width.
`suggestedActionDisabledBackground`	`string`	Disabled background defaults to suggestedActionBackground.
`suggestedActionDisabledBorderColor`	`string`	Disabled action border color.
`suggestedActionDisabledBorderStyle`	`string`	Disabled action border style.
`suggestedActionDisabledBorderWidth`	`number` or `string`	Disabled action border width.
`suggestedActionDisabledTextColor`	`string`	Disabled text color defaults to subtle.
`suggestedActionHeight`	`number` or `string`	No description available.
`suggestedActionImageHeight`	`number` or `string`	No description available.
`suggestedActionLayout`	`'carousel'` or `'flow'` or `'stacked'`	No description available.
`suggestedActionTextColor`	`string`	No description available.
`suggestedActionsCarouselFlipperCursor`	`string`	Cursor when mouseover on flipper.
`suggestedActionsCarouselFlipperBoxWidth`	`number`	Flipper bounding box size.
`suggestedActionsCarouselFlipperSize`	`number`	Flipper button's visible size.
`suggestedActionsFlowMaxHeight`	`undefined`	Suggested actions flow layout. Default value is 'auto'.
`suggestedActionsStackedHeight`	`number` or `'auto'`	Stacked height container's max height. Default value is 'auto'.
`suggestedActionsStackedOverflow`	`string`	Stacked overflow default value is 'auto'.
`suggestedActionsStackedLayoutButtonMaxHeight`	`number` or `string`	Button max height default value is 100% if suggestedActionsStackedLayoutButtonTextWrap is true.
`suggestedActionsStackedLayoutButtonTextWrap`	`boolean`	Button Text Wrap, if set to true, will wrap long text in buttons in STACKED mode ONLY.
`groupTimestamp`	`boolean`	Timestamp.
`sendTimeout`	`number`	Timestamp.
`sendTimeoutForAttachments`	`number`	Timestamp.
`timestampColor`	`string`	Timestamp color default value is subtle.
`timestampFormat`	`'absolute'` or `'relative'`	Timestamp format.
`transcriptTerminatorBackgroundColor`	`string`	Transcript styling.
`transcriptTerminatorBorderRadius`	`number` or `string`	Transcript styling.
`transcriptTerminatorColor`	`string`	Transcript styling.
`transcriptTerminatorFontSize`	`number` or `string`	Transcript styling.
`transcriptActivityVisualKeyboardIndicatorColor`	`string`	Transcript styling.
`transcriptActivityVisualKeyboardIndicatorStyle`	`string`	Transcript styling.
`transcriptActivityVisualKeyboardIndicatorWidth`	`number` or `string`	Transcript styling.
`transcriptVisualKeyboardIndicatorColor`	`string`	Transcript styling.
`transcriptVisualKeyboardIndicatorStyle`	`string`	Transcript styling.
`transcriptVisualKeyboardIndicatorWidth`	`number` or `string`	Transcript styling.
`newMessagesButtonFontSize`	`number` or `string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonBackground`	`string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonBackgroundOnDisabled`	`string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonBackgroundOnFocus`	`string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonBackgroundOnHover`	`string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonColor`	`string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonColorOnDisabled`	`string`	Transcript overlay button. E.g., carousel and suggested action flippers, scroll to bottom, etc.
`transcriptOverlayButtonColorOnFocus`	`string`	Default value is transcriptOverlayButtonColor.
`transcriptOverlayButtonColorOnHover`	`string`	Default value is transcriptOverlayButtonColor.
`notificationDebounceTimeout`	`number`	New debounce timeout value only affects new notifications.
`hideToaster`	`boolean`	Toaster styling.
`toasterHeight`	`number` or `string`	Toaster styling.
`toasterMaxHeight`	`number` or `string`	Toaster styling.
`toasterSingularMaxHeight`	`number` or `string`	Toaster styling.
`toastFontSize`	`number` or `string`	Toaster styling.
`toastIconWidth`	`number` or `string`	Toaster styling.
`toastSeparatorColor`	`string`	Toaster styling.
`toastTextPadding`	`number` or `string`	Toaster styling.
`toastErrorBackgroundColor`	`string`	Toaster styling.
`toastErrorColor`	`string`	Toaster styling.
`toastInfoBackgroundColor`	`string`	Toaster styling.
`toastInfoColor`	`string`	Toaster styling.
`toastSuccessBackgroundColor`	`string`	Toaster styling.
`toastSuccessColor`	`string`	Toaster styling.
`toastWarnBackgroundColor`	`string`	Toaster styling.
`toastWarnColor`	`string`	Toaster styling.
`typingAnimationBackgroundImage`	`string`	Typing animation.
`typingAnimationDuration`	`number`	Typing animation.
`typingAnimationHeight`	`number` or `string`	Typing animation.
`typingAnimationWidth`	`number` or `string`	Typing animation.
`enableUploadThumbnail`	`boolean`	Upload thumbnail.
`uploadThumbnailContentType`	`string`	Upload thumbnail.
`uploadThumbnailHeight`	`number` or `string`	Upload thumbnail.
`uploadThumbnailQuality`	`number`	Upload thumbnail.
`uploadThumbnailWidth`	`number` or `string`	Upload thumbnail.
`videoHeight`	`number` or `string`	Video height.