How to style your bot

Change the appearance of your Webchat.

🧩
You will need:

A published bot

Familiarity with CSS (if you want to use custom styles)

Use the theme styler

To style your bot using the built-in Webchat theme styler:

Navigate to the Dashboard and open your bot's Workspace.
In the left navigation bar, find the bot you want to style and select Webchat.
Select the Theme tab to open the theme styler:

You can view your changes in the Webchat preview on the right side of the screen.

Use custom styles

If you want to customize your bot's appearance further, you can modify the built-in CSS classes. Just add your styles to the Styles field.

📘
CSS Classes
See the full list of CSS Classes below:
CSS Classes
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 4 days ago

Did this page help you?