How do you customize the colors on the flex webchat widget when consumed through CDN?

Question

I am trying to solely change the color scheme of the widget that customers will use. We are bringing in the widget using the CDN. I have only found documentation for changing color scheme for flex UI that our agents will see. How can I change the colors on the widget?

Answer 1

Follow the theming guidelines as described in the Twilio documentation here.

Then when initializing the WebChat via CDN pass in your branding like this:

<script>
  const appConfig = {
    accountSid: "AC...",
    flexFlowSid: "FO...",
    colorTheme: {
      overrides: brandedColors
    }
  };
  Twilio.FlexWebChat.renderWebChat(appConfig);
</script>