This guide is for Flex UI 1.x.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x.x or you are starting out, we recommend that you build with Webchat 3.0.
Flex WebChat 2.0 uses the same theming framework as Flex UI. With Flex UI theming framework you can:
Learn more in Flex UI theming, styling and branding.
By default, WebChat has a neutral look and feel. To style it to your brand, you'll need to override WebChat components color configuration. This can be done in 2 steps:
colorTheme
object with your branding configuration in appConfig
_83const brandColor1 = "#1976d2";_83const brandColor2 = "#233659";_83const brandTextColor = "#ffffff";_83_83_83const personalizedColors = {_83 darkBlueBackground: "#3C425C",_83 whiteText: "#FFFFFF",_83 entryPointBackground: "#3C425C",_83 lighterBackground: "#ecedf1",_83 primaryButtonBackground: "#1976d2",_83 primaryButtonColor: "#FFFFFF",_83 secondaryButtonBackground: "#6e7180",_83 secondaryButtonColor: "#FFFFFF"_83};_83_83// assign _83const brandMessageBubbleColors = (bgColor) => ({_83 Bubble: {_83 background: bgColor,_83 color: brandTextColor_83 },_83 Avatar: {_83 background: bgColor,_83 color: brandTextColor_83 },_83 Header: {_83 color: brandTextColor_83 }_83});_83_83const brandedColors = {_83 Chat: {_83 MessageListItem: {_83 FromOthers: brandMessageBubbleColors(brandColor2),_83 FromMe: brandMessageBubbleColors(brandColor1),_83 },_83 MessageInput: {_83 Container:{_83 Button: {_83 background: brandColor1,_83 color: brandTextColor_83 }_83 }_83 },_83 MessageCanvasTray: {_83 Container: {_83 background: personalizedColors.darkBlueBackground,_83 color: personalizedColors.whiteText_83 }_83 },_83 },_83_83 MainHeader: {_83 Container: {_83 background: personalizedColors.darkBlueBackground,_83 color: personalizedColors.whiteText_83 },_83 Logo: {_83 fill: brandTextColor_83 }_83 },_83_83 EntryPoint: {_83 Container: {_83 background: personalizedColors.entryPointBackground,_83 color: personalizedColors.whiteText_83 }_83 },_83_83 PreEngagementCanvas: {_83 Container: {_83 background: personalizedColors.lighterBackground_83 },_83_83 Form: {_83 SubmitButton: {_83 background: personalizedColors.primaryButtonBackground,_83 color: personalizedColors.whiteText_83 }_83 }_83 }_83};
Add the following config to appConfig file
_10var appConfig = {_10 colorTheme: {_10 overrides: brandedColors_10 }_10}
You can find a full list of themable components here. Below is the list of those WebChat components that can be themed.
_181 MainContainer: {_181 background: colors.base1_181 },_181_181 EntryPoint: {_181 Container: {_181 backgroundImage: `linear-gradient(to top, ${colors.defaultButtonColor}, ${colors.defaultButtonColor})`,_181 backgroundColor: "rgba(0,0,0,0)",_181 color: "#ffffff",_181 "&:hover": {_181 backgroundColor: colors.buttonHoverColor,_181 backgroundBlendMode: "color",_181 }_181 }_181 },_181_181 MainHeader: {_181 Container: {_181 color: textColor_181 },_181 Logo: {_181 fill: lightTheme ? "#000000" : "#ffffff"_181 }_181 },_181_181 PreEngagementCanvas: {_181 Container: {_181 color: textColor_181 },_181 Footer: {_181 color: textColor_181 },_181 Form: {_181 SubmitButton: {_181 "background-image":_181 `linear-gradient(to top,${colors.defaultButtonColor},${colors.defaultButtonColor})`,_181 color: "#ffffff"_181 },_181 Label: {}_181 }_181 },_181_181 InvalidPreEngagementCanvas: {_181 Container: {_181 color: textColor_181 },_181 Button: {_181 background: colors.defaultButtonColor,_181 color: colors.lightTextColor_181 }_181 },_181_181 Modal: {_181 Container: {_181 background: colors.base2,_181 color: textColor,_181 },_181 Title: {_181 color: textColor_181 },_181 PrimaryButton: {_181 background: colors.base2,_181 color: textColor,_181 },_181 SecondaryButton: {_181 background: colors.base2,_181 color: textColor,_181 }_181 },_181_181 Chat: {_181 MessagingCanvas: {_181 Container: {_181 background: colors.base1_181 }_181 },_181_181 MessageList: {_181 DateSeparatorLine: {_181 borderColor: colors.base4_181 },_181 DateSeparatorText: {_181 color: textColor_181 },_181 TypingIndicator: {_181 color: textColor_181 }_181 },_181_181 MessageInput: {_181 Container: {_181 background: colors.base2,_181 color: textColor,_181 "::placeholder": {_181 color: textColor_181 },_181 Button: {_181 color: "#ffffff",_181 background: "#1976D2"_181 }_181 }_181 },_181_181 MessageListItem: {_181 FromMe: {_181 Avatar: {_181 color: "#ffffff",_181 background: "#1976D2"_181 },_181 Bubble: {_181 color: "#ffffff",_181 background: "#1976D2"_181 },_181 Header: {_181 color: "#ffffff",_181 }_181 },_181 FromOthers: {_181 Avatar: {_181 color: colors.base11,_181 background: colors.base2_181 },_181 Bubble: {_181 color: textColor,_181 background: colors.base2_181 },_181 Header: {_181 color: textColor_181 }_181 },_181 ReadStatus: {_181 color: textColor_181 }_181 },_181_181 MessageCanvasTray: {_181 Container: {_181 background: colors.base2,_181 color: textColor_181 },_181 Button: {_181 color: colors.lightTextColor,_181 background: colors.defaultButtonColor,_181 lightHover: false,_181 }_181 },_181_181 WelcomeMessage: {_181 Container: {_181 color: textColor_181 },_181 Icon: {_181 color: colors.base11_181 }_181 }_181 },_181_181 Progress: {_181 Circular: {_181 staticBackgroundBorderColor: colors.lightTextColor,_181 animatingBackgroundBorderColor: colors.base4,_181 animatingForegroundBorderColor: colors.defaultButtonColor,_181 }_181 },_181_181 FormComponents: {_181 TextArea: {_181 borderColor: colors.base4,_181 color: textColor,_181 background: "transparent",_181_181 "&:focus": {_181 background: colors.base1,_181 boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,_181 border: `1px solid ${colors.focusColor}`_181 }_181 },_181 Input: {_181 color: textColor_181 }_181 },