How to style your Webchat
To customize your Webchat's apperance, use the Theme editor in Botpress Studio. Theme editor can be accessed from your Botpress Workspace, by navigating to Webchat and then clicking on Theme.
Personalize your Webchat further
You can further customize your webchat using the CSS classes.
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 27 days ago