Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Changing the Theme, Style and Brand of Flex WebChat 2.0


(information)

Info

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:

  • Use preconfigured themes
  • Define your own theme
  • Override theming of UI components to style the UI on brand

Learn more in Flex UI theming, styling and branding.


Styling WebChat on brand

styling-webchat-on-brand page anchor

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:

  1. Define branding configuration for components you want to change
  2. Override the colorTheme object with your branding configuration in appConfig

Defining branding configuration in webchat-branding.js

defining-branding-configuration-in-webchat-brandingjs page anchor

_83
const brandColor1 = "#1976d2";
_83
const brandColor2 = "#233659";
_83
const brandTextColor = "#ffffff";
_83
_83
_83
const 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
_83
const 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
_83
const 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
};

Configuring WebChat to use webchat-branding

configuring-webchat-to-use-webchat-branding page anchor

Add the following config to appConfig file


_10
var appConfig = {
_10
colorTheme: {
_10
overrides: brandedColors
_10
}
_10
}


WebChat UI components and themable objects

webchat-ui-components-and-themable-objects page anchor

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
},


Rate this page: