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
1const brandColor1 = "#1976d2";2const brandColor2 = "#233659";3const brandTextColor = "#ffffff";456const personalizedColors = {7darkBlueBackground: "#3C425C",8whiteText: "#FFFFFF",9entryPointBackground: "#3C425C",10lighterBackground: "#ecedf1",11primaryButtonBackground: "#1976d2",12primaryButtonColor: "#FFFFFF",13secondaryButtonBackground: "#6e7180",14secondaryButtonColor: "#FFFFFF"15};1617// assign18const brandMessageBubbleColors = (bgColor) => ({19Bubble: {20background: bgColor,21color: brandTextColor22},23Avatar: {24background: bgColor,25color: brandTextColor26},27Header: {28color: brandTextColor29}30});3132const brandedColors = {33Chat: {34MessageListItem: {35FromOthers: brandMessageBubbleColors(brandColor2),36FromMe: brandMessageBubbleColors(brandColor1),37},38MessageInput: {39Container:{40Button: {41background: brandColor1,42color: brandTextColor43}44}45},46MessageCanvasTray: {47Container: {48background: personalizedColors.darkBlueBackground,49color: personalizedColors.whiteText50}51},52},5354MainHeader: {55Container: {56background: personalizedColors.darkBlueBackground,57color: personalizedColors.whiteText58},59Logo: {60fill: brandTextColor61}62},6364EntryPoint: {65Container: {66background: personalizedColors.entryPointBackground,67color: personalizedColors.whiteText68}69},7071PreEngagementCanvas: {72Container: {73background: personalizedColors.lighterBackground74},7576Form: {77SubmitButton: {78background: personalizedColors.primaryButtonBackground,79color: personalizedColors.whiteText80}81}82}83};
Add the following config to appConfig file
1var appConfig = {2colorTheme: {3overrides: brandedColors4}5}
You can find a full list of themable components here. Below is the list of those WebChat components that can be themed.
1MainContainer: {2background: colors.base13},45EntryPoint: {6Container: {7backgroundImage: `linear-gradient(to top, ${colors.defaultButtonColor}, ${colors.defaultButtonColor})`,8backgroundColor: "rgba(0,0,0,0)",9color: "#ffffff",10"&:hover": {11backgroundColor: colors.buttonHoverColor,12backgroundBlendMode: "color",13}14}15},1617MainHeader: {18Container: {19color: textColor20},21Logo: {22fill: lightTheme ? "#000000" : "#ffffff"23}24},2526PreEngagementCanvas: {27Container: {28color: textColor29},30Footer: {31color: textColor32},33Form: {34SubmitButton: {35"background-image":36`linear-gradient(to top,${colors.defaultButtonColor},${colors.defaultButtonColor})`,37color: "#ffffff"38},39Label: {}40}41},4243InvalidPreEngagementCanvas: {44Container: {45color: textColor46},47Button: {48background: colors.defaultButtonColor,49color: colors.lightTextColor50}51},5253Modal: {54Container: {55background: colors.base2,56color: textColor,57},58Title: {59color: textColor60},61PrimaryButton: {62background: colors.base2,63color: textColor,64},65SecondaryButton: {66background: colors.base2,67color: textColor,68}69},7071Chat: {72MessagingCanvas: {73Container: {74background: colors.base175}76},7778MessageList: {79DateSeparatorLine: {80borderColor: colors.base481},82DateSeparatorText: {83color: textColor84},85TypingIndicator: {86color: textColor87}88},8990MessageInput: {91Container: {92background: colors.base2,93color: textColor,94"::placeholder": {95color: textColor96},97Button: {98color: "#ffffff",99background: "#1976D2"100}101}102},103104MessageListItem: {105FromMe: {106Avatar: {107color: "#ffffff",108background: "#1976D2"109},110Bubble: {111color: "#ffffff",112background: "#1976D2"113},114Header: {115color: "#ffffff",116}117},118FromOthers: {119Avatar: {120color: colors.base11,121background: colors.base2122},123Bubble: {124color: textColor,125background: colors.base2126},127Header: {128color: textColor129}130},131ReadStatus: {132color: textColor133}134},135136MessageCanvasTray: {137Container: {138background: colors.base2,139color: textColor140},141Button: {142color: colors.lightTextColor,143background: colors.defaultButtonColor,144lightHover: false,145}146},147148WelcomeMessage: {149Container: {150color: textColor151},152Icon: {153color: colors.base11154}155}156},157158Progress: {159Circular: {160staticBackgroundBorderColor: colors.lightTextColor,161animatingBackgroundBorderColor: colors.base4,162animatingForegroundBorderColor: colors.defaultButtonColor,163}164},165166FormComponents: {167TextArea: {168borderColor: colors.base4,169color: textColor,170background: "transparent",171172"&:focus": {173background: colors.base1,174boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,175border: `1px solid ${colors.focusColor}`176}177},178Input: {179color: textColor180}181},