Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Webchat Theming, styling and branding

Overview

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

Find out more about it in Flex UI theming, styling and branding

Styling WebChat on brand

By default, WebChat has a neutral look and feel. To style it to you brand, you will 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

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: {
            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

Full list of components you can find 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
            }
        },
Rate this page:

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 browsing the Twilio tag on Stack Overflow.