Changing the Theme, Style and Brand of Flex WebChat
This guide is for Flex UI 1.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x or you are starting out, we recommend that you build with Flex Conversations.
Flex WebChat 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
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:
- Define branding configuration for components you want to change
- Override the
colorThemeobject with your branding configuration in appConfig
Defining branding configuration in webchat-branding.js
const brandColor1 = "#1976d2";
const brandColor2 = "#233659";
const brandTextColor = "#ffffff";
const personalizedColors = {
darkBlueBackground: "#3C425C",
whiteText: "#FFFFFF",
entryPointBackground: "#3C425C",
lighterBackground: "#ecedf1",
primaryButtonBackground: "#1976d2",
primaryButtonColor: "#FFFFFF",
secondaryButtonBackground: "#6e7180",
secondaryButtonColor: "#FFFFFF"
};
// assign
const brandMessageBubbleColors = (bgColor) => ({
Bubble: {
background: bgColor,
color: brandTextColor
},
Avatar: {
background: bgColor,
color: brandTextColor
},
Header: {
color: brandTextColor
}
});
const brandedColors = {
Chat: {
MessageListItem: {
FromOthers: brandMessageBubbleColors(brandColor2),
FromMe: brandMessageBubbleColors(brandColor1),
},
MessageInput: {
Container:{
Button: {
background: brandColor1,
color: brandTextColor
}
}
},
MessageCanvasTray: {
Container: {
background: personalizedColors.darkBlueBackground,
color: personalizedColors.whiteText
}
},
},
MainHeader: {
Container: {
background: personalizedColors.darkBlueBackground,
color: personalizedColors.whiteText
},
Logo: {
fill: brandTextColor
}
},
EntryPoint: {
Container: {
background: personalizedColors.entryPointBackground,
color: personalizedColors.whiteText
}
},
PreEngagementCanvas: {
Container: {
background: personalizedColors.lighterBackground
},
Form: {
SubmitButton: {
background: personalizedColors.primaryButtonBackground,
color: personalizedColors.whiteText
}
}
}
};Configuring WebChat to use webchat-branding
Add the following config to appConfig file
var appConfig = {
colorTheme: {
overrides: brandedColors
}
}WebChat UI components and themable objects
You can find a full list of themable components here. Below is the list of those WebChat components that can be themed.
MainContainer: {
background: colors.base1
},
EntryPoint: {
Container: {
backgroundImage: `linear-gradient(to top, ${colors.defaultButtonColor}, ${colors.defaultButtonColor})`,
backgroundColor: "rgba(0,0,0,0)",
color: "#ffffff",
"&:hover": {
backgroundColor: colors.buttonHoverColor,
backgroundBlendMode: "color",
}
}
},
MainHeader: {
Container: {
color: textColor
},
Logo: {
fill: lightTheme ? "#000000" : "#ffffff"
}
},
PreEngagementCanvas: {
Container: {
color: textColor
},
Footer: {
color: textColor
},
Form: {
SubmitButton: {
"background-image":
`linear-gradient(to top,${colors.defaultButtonColor},${colors.defaultButtonColor})`,
color: "#ffffff"
},
Label: {}
}
},
InvalidPreEngagementCanvas: {
Container: {
color: textColor
},
Button: {
background: colors.defaultButtonColor,
color: colors.lightTextColor
}
},
Modal: {
Container: {
background: colors.base2,
color: textColor,
},
Title: {
color: textColor
},
PrimaryButton: {
background: colors.base2,
color: textColor,
},
SecondaryButton: {
background: colors.base2,
color: textColor,
}
},
Chat: {
MessagingCanvas: {
Container: {
background: colors.base1
}
},
MessageList: {
DateSeparatorLine: {
borderColor: colors.base4
},
DateSeparatorText: {
color: textColor
},
TypingIndicator: {
color: textColor
}
},
MessageInput: {
Container: {
background: colors.base2,
color: textColor,
"::placeholder": {
color: textColor
},
Button: {
color: "#ffffff",
background: "#1976D2"
}
}
},
MessageListItem: {
FromMe: {
Avatar: {
color: "#ffffff",
background: "#1976D2"
},
Bubble: {
color: "#ffffff",
background: "#1976D2"
},
Header: {
color: "#ffffff",
}
},
FromOthers: {
Avatar: {
color: colors.base11,
background: colors.base2
},
Bubble: {
color: textColor,
background: colors.base2
},
Header: {
color: textColor
}
},
ReadStatus: {
color: textColor
}
},
MessageCanvasTray: {
Container: {
background: colors.base2,
color: textColor
},
Button: {
color: colors.lightTextColor,
background: colors.defaultButtonColor,
lightHover: false,
}
},
WelcomeMessage: {
Container: {
color: textColor
},
Icon: {
color: colors.base11
}
}
},
Progress: {
Circular: {
staticBackgroundBorderColor: colors.lightTextColor,
animatingBackgroundBorderColor: colors.base4,
animatingForegroundBorderColor: colors.defaultButtonColor,
}
},
FormComponents: {
TextArea: {
borderColor: colors.base4,
color: textColor,
background: "transparent",
"&:focus": {
background: colors.base1,
boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,
border: `1px solid ${colors.focusColor}`
}
},
Input: {
color: textColor
}
},Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
