Changing the Theme, Style and Brand of Flex WebChat 2.0

(warning)

Warning

Webchat 2.0 is no longer supported. It uses Flex UI 1.x.x's legacy messaging, which has reached end-of-life.

If you are using Webchat 2.0, migrate to Webchat 3.x.x.

If you are starting out with Webchat, build with Webchat 3.x.x instead.

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

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 colorTheme object with your branding configuration in appConfig

Defining branding configuration in webchat-branding.js

1const brandColor1 = "#1976d2";
2const brandColor2 = "#233659";
3const brandTextColor = "#ffffff";
4
5
6const personalizedColors = {
7   darkBlueBackground: "#3C425C",
8   whiteText: "#FFFFFF",
9   entryPointBackground: "#3C425C",
10   lighterBackground: "#ecedf1",
11   primaryButtonBackground: "#1976d2",
12   primaryButtonColor: "#FFFFFF",
13   secondaryButtonBackground: "#6e7180",
14   secondaryButtonColor: "#FFFFFF"
15};
16
17// assign 
18const brandMessageBubbleColors = (bgColor) => ({
19    Bubble: {
20        background: bgColor,
21        color: brandTextColor
22    },
23    Avatar: {
24        background: bgColor,
25        color: brandTextColor
26    },
27    Header: {
28        color: brandTextColor
29    }
30});
31
32const brandedColors = {
33    Chat: {
34        MessageListItem: {
35            FromOthers: brandMessageBubbleColors(brandColor2),
36            FromMe: brandMessageBubbleColors(brandColor1),
37        },
38        MessageInput: {
39            Container:{
40                Button: {
41                    background: brandColor1,
42                    color: brandTextColor
43                }
44            }
45        },
46        MessageCanvasTray: {
47            Container: {
48                background: personalizedColors.darkBlueBackground,
49                color: personalizedColors.whiteText
50            }
51        },
52    },
53
54    MainHeader: {
55        Container: {
56            background: personalizedColors.darkBlueBackground,
57            color: personalizedColors.whiteText
58        },
59        Logo: {
60            fill: brandTextColor
61        }
62    },
63
64    EntryPoint: {
65        Container: {
66            background: personalizedColors.entryPointBackground,
67            color: personalizedColors.whiteText
68        }
69    },
70
71    PreEngagementCanvas: {
72        Container: {
73            background: personalizedColors.lighterBackground
74        },
75
76        Form: {
77            SubmitButton: {
78                background: personalizedColors.primaryButtonBackground,
79                color: personalizedColors.whiteText
80            }
81        }
82    }
83};

Configuring WebChat to use webchat-branding

Add the following config to appConfig file

1var appConfig = {
2    colorTheme: {
3        overrides: brandedColors
4    }
5}

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.

1        MainContainer: {
2            background: colors.base1
3        },
4
5        EntryPoint: {
6            Container: {
7                backgroundImage: `linear-gradient(to top, ${colors.defaultButtonColor}, ${colors.defaultButtonColor})`,
8                backgroundColor: "rgba(0,0,0,0)",
9                color: "#ffffff",
10                "&:hover": {
11                    backgroundColor: colors.buttonHoverColor,
12                    backgroundBlendMode: "color",
13                }
14            }
15        },
16
17        MainHeader: {
18            Container: {
19                color: textColor
20            },
21            Logo: {
22                fill: lightTheme ? "#000000" : "#ffffff"
23            }
24        },
25
26        PreEngagementCanvas: {
27            Container: {
28                color: textColor
29            },
30            Footer: {
31                color: textColor
32            },
33            Form: {
34                SubmitButton: {
35                    "background-image":
36                        `linear-gradient(to top,${colors.defaultButtonColor},${colors.defaultButtonColor})`,
37                    color: "#ffffff"
38                },
39                Label: {}
40            }
41        },
42
43        InvalidPreEngagementCanvas: {
44            Container: {
45                color: textColor
46            },
47            Button: {
48                background: colors.defaultButtonColor,
49                color: colors.lightTextColor
50            }
51        },
52
53        Modal: {
54            Container: {
55                background: colors.base2,
56                color: textColor,
57            },
58            Title: {
59                color: textColor
60            },
61            PrimaryButton: {
62                background: colors.base2,
63                color: textColor,
64            },
65            SecondaryButton: {
66                background: colors.base2,
67                color: textColor,
68            }
69        },
70
71        Chat: {
72            MessagingCanvas: {
73                Container: {
74                    background: colors.base1
75                }
76            },
77
78            MessageList: {
79                DateSeparatorLine: {
80                    borderColor: colors.base4
81                },
82                DateSeparatorText: {
83                    color: textColor
84                },
85                TypingIndicator: {
86                    color: textColor
87                }
88            },
89
90            MessageInput: {
91                Container: {
92                    background: colors.base2,
93                    color: textColor,
94                    "::placeholder": {
95                        color: textColor
96                    },
97                    Button: {
98                        color: "#ffffff",
99                        background: "#1976D2"
100                    }
101                }
102            },
103
104            MessageListItem: {
105                FromMe: {
106                    Avatar: {
107                        color: "#ffffff",
108                        background: "#1976D2"
109                    },
110                    Bubble: {
111                        color: "#ffffff",
112                        background: "#1976D2"
113                    },
114                    Header: {
115                        color: "#ffffff",
116                    }
117                },
118                FromOthers: {
119                    Avatar: {
120                        color: colors.base11,
121                        background: colors.base2
122                    },
123                    Bubble: {
124                        color: textColor,
125                        background: colors.base2
126                    },
127                    Header: {
128                        color: textColor
129                    }
130                },
131                ReadStatus: {
132                    color: textColor
133                }
134            },
135
136            MessageCanvasTray: {
137                Container: {
138                    background: colors.base2,
139                    color: textColor
140                },
141                Button: {
142                    color: colors.lightTextColor,
143                    background: colors.defaultButtonColor,
144                    lightHover: false,
145                }
146            },
147
148            WelcomeMessage: {
149                Container: {
150                    color: textColor
151                },
152                Icon: {
153                    color: colors.base11
154                }
155            }
156        },
157
158        Progress: {
159            Circular: {
160                staticBackgroundBorderColor: colors.lightTextColor,
161                animatingBackgroundBorderColor: colors.base4,
162                animatingForegroundBorderColor: colors.defaultButtonColor,
163            }
164        },
165
166        FormComponents: {
167            TextArea: {
168                borderColor: colors.base4,
169                color: textColor,
170                background: "transparent",
171
172                "&:focus": {
173                    background: colors.base1,
174                    boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,
175                    border: `1px solid ${colors.focusColor}`
176                }
177            },
178            Input: {
179                color: textColor
180            }
181        },