Menu

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 (beta).

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:

  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: {
            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
            }
        },
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 by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif