Custom CSS Reference
If you want to modify the appearance of our built-in webchat, you can use CSS classes to style your bot.
This is the list of all css classes and which part of the webchat they correspond with.
| Element Name | CSS Class | Description |
|---|---|---|
| Container | bpContainer | Main container for the component |
| Modal Container | bpModalContainer | Wrapper for the modal |
| Modal Overlay | bpModalOverlay | Background overlay for the modal |
| Modal Dialog Container | bpModalDialogContainer | Container for the modal dialog |
| Modal Dialog Title Container | bpModalDialogTitleContainer | Wrapper for the modal title |
| Modal Dialog Title Text | bpModalDialogTitleText | Text style for the modal title |
| Modal Dialog Title Close Icon | bpModalDialogTitleCloseIcon | Close icon for the modal |
| Modal Dialog Content | bpModalDialogContent | Content area within the modal |
| Modal New Conversation Button | bpModalDialogNewConversationButton | Button for starting a new conversation |
| FAB Container | bpFabContainer | Container for floating action button |
| FAB Icon | bpFabIcon | Icon within the floating action button |
| Notification Container | bpNotificationContainer | Wrapper for notifications |
| Notification Title | bpNotificationTitle | Title text for the notification |
| Notification Description | bpNotificationDescription | Description text for the notification |
| Notification Icon | bpNotificationIcon | Icon used in the notification |
| Notification Close Icon | bpNotificationCloseIcon | Close icon for the notification |
| Header Container | bpHeaderContainer | Main container for the header |
| Header Content Container | bpHeaderContentContainer | Wrapper for header content |
| Header Content Title | bpHeaderContentTitle | Title text in the header |
| Header Content Description | bpHeaderContentDescription | Description text in the header |
| Header Content Avatar Container | bpHeaderContentAvatarContainer | Wrapper for avatar in the header |
| Header Content Avatar Image | bpHeaderContentAvatarImage | Avatar image in the header |
| Header Content Avatar Fallback | bpHeaderContentAvatarFallback | Fallback for avatar if image fails to load |
| Header Content Actions Container | bpHeaderContentActionsContainer | Wrapper for action buttons in the header |
| Header Content Actions Icons | bpHeaderContentActionsIcons | Icons for actions in the header |
| Header Expanded Content Container | bpHeaderExpandedContentContainer | Wrapper for expanded content in the header |
| Header Expanded Content Description Items Container | bpHeaderExpandedContentDescriptionItemsContainer | Container for description items in expanded header |
| Header Expanded Content Description Items Powered By | bpHeaderExpandedContentDescriptionItemsPoweredBy | "Powered By" text in expanded header |
| Header Expanded Content Description Items Icon | bpHeaderExpandedContentDescriptionItemsIcon | Icon in expanded header description items |
| Header Expanded Content Description Items Text | bpHeaderExpandedContentDescriptionItemsText | Text in expanded header description items |
| Header Expanded Content Description Items Link | bpHeaderExpandedContentDescriptionItemsLink | Link in expanded header description items |
| Header Expanded Content Group | bpHeaderExpandedContentGroup | Grouping element in expanded header |
| Header New Conversation Icon | bpHeaderNewConversationIcon | Icon for new conversation in the header |
| Composer Container | bpComposerContainer | Main container for the composer |
| Composer Input | bpComposerInput | Input field in the composer |
| Composer Button Container | bpComposerButtonContainer | Wrapper for buttons in the composer |
| Composer Button Icon | bpComposerButtonIcon | Icon for buttons in the composer |
| Composer Upload Button Icon | bpComposerUploadButtonIcon | Upload button icon in the composer |
| Message List Scrollbar Container | bpMessageListScrollbarContainer | Container for the message list scrollbar |
| Message List Scrollbar Viewport | bpMessageListScrollbarViewport | Viewport area for the message list scrollbar |
| Message List Scrollbar Background | bpMessageListScrollbarBackground | Background for the message list scrollbar |
| Message List Scrollbar Thumb | bpMessageListScrollbarThumb | Thumb element of the scrollbar |
| Message List Scroll Down Button Container | bpMessageListScrollDownButtonContainer | Wrapper for the scroll down button |
| Message List Scroll Down Button Button | bpMessageListScrollDownButtonButton | Scroll down button |
| Message List Scroll Down Button Icon | bpMessageListScrollDownButtonIcon | Icon for scroll down button |
| Message List Container | bpMessageListContainer | Main container for the message list |
| Message List Marquee Container | bpMessageListMarqueeContainer | Wrapper for the marquee in message list |
| Message List Marquee Content | bpMessageListMarqueeContent | Content area for the marquee in message list |
| Message List Marquee Title | bpMessageListMarqueeTitle | Title in the marquee |
| Message List Marquee Description | bpMessageListMarqueeDescription | Description in the marquee |
| Message List Marquee Avatar Container | bpMessageListMarqueeAvatarContainer | Wrapper for avatar in marquee |
| Message List Marquee Avatar Image | bpMessageListMarqueeAvatarImage | Avatar image in the marquee |
| Message List Marquee Avatar Fallback | bpMessageListMarqueeAvatarFallback | Fallback for avatar in the marquee |
| Message Container - everyone | bpMessageContainer | Main container for individual messages |
| Message Container - users | bpMessageContainer[data-direction="incoming"] | Container for user messages |
| Message Container - bots | bpMessageContainer[data-direction="outgoing"] | Container for bot messages |
| Message Avatar Container | bpMessageAvatarContainer | Wrapper for avatar in messages |
| Message Avatar Image | bpMessageAvatarImage | Avatar image in messages |
| Message Avatar Fallback | bpMessageAvatarFallback | Fallback for avatar in messages |
| Message Blocks Text Heading1 | bpMessageBlocksTextHeading1 | Heading 1 text block in a message |
| Message Blocks Text Heading2 | bpMessageBlocksTextHeading2 | Heading 2 text block in a message |
| Message Blocks Text Heading3 | bpMessageBlocksTextHeading3 | Heading 3 text block in a message |
| Message Blocks Text UnorderedList | bpMessageBlocksTextUnorderedList | Unordered list text block in a message |
| Message Blocks Text OrderedList | bpMessageBlocksTextOrderedList | Ordered list text block in a message |
| Message Blocks Text Link | bpMessageBlocksTextLink | Link text block in a message |
| Message Blocks Image Image | bpMessageBlocksImageImage | Image block in a message |
| Message Blocks Image Placeholder | bpMessageBlocksImagePlaceholder | Placeholder for image block in a message |
| Message Blocks Video | bpMessageBlocksVideo | Video block in a message |
| Message Blocks Location Container | bpMessageBlocksLocationContainer | Container for location block in a message |
| Message Blocks Location Title | bpMessageBlocksLocationTitle | Title for location block in a message |
| Message Blocks Location Icon | bpMessageBlocksLocationIcon | Icon for location block in a message |
| Message Blocks File Container | bpMessageBlocksFileContainer | Container for file block in a message |
| Message Blocks File Title | bpMessageBlocksFileTitle | Title for file block in a message |
| Message Blocks File Icon | bpMessageBlocksFileIcon | Icon for file block in a message |
| Message Blocks Row | bpMessageBlocksRow | Row layout block in a message |
| Message Blocks Column | bpMessageBlocksColumn | Column layout block in a message" |
| Message Blocks Bubble | bpMessageBlocksBubble | Bubble block in a message. |
| Message Blocks Carousel Container | bpMessageBlocksCarouselContainer | Container for carousel block in a message |
| Message Blocks Carousel Slides Container | bpMessageBlocksCarouselSlidesContainer | Container for slides in a carousel block |
| Message Blocks Carousel Back Button | bpMessageBlocksCarouselBackButton | Back button for carousel |
| Message Blocks Carousel Next Button | bpMessageBlocksCarouselNextButton | Next button for carousel |
| Message Blocks Dropdown Button Container | bpMessageBlocksDropdownButtonContainer | Container for dropdown button block |
| Message Blocks Dropdown Button Text | bpMessageBlocksDropdownButtonText | Text for dropdown button block |
| Message Blocks Dropdown Button Icon | bpMessageBlocksDropdownButtonIcon | Icon for dropdown button block |
| Message Blocks Dropdown Content Container | bpMessageBlocksDropdownContentContainer | Container for dropdown content block |
| Message Blocks Dropdown Content Item | bpMessageBlocksDropdownContentItem | Individual item in dropdown content block |
| Message Blocks Button | bpMessageBlocksButton | Button block in a message |
| Loading Indicator Container | bpLoadingIndicatorContainer | Main container for loading indicator |
| Loading Indicator Loader | bpLoadingIndicatorLoader | Loader element in loading indicator |
Updated about 2 months ago