How do I change the text "Chat with us" in the Twilio Flex webchat client?

Question

I'm trying to change the text in the header pane and chat icon callout which both says "Chat with us" by default. How do I do that? I found two ways in the documentation and none of them work.

Answer 1

Twilio developer evangelist here.

You need to set the componentProps for the component you are trying to update.

In this case, you are altering the titleText of the MainHeader component so you need to format that as an object.

var appConfig = {
  // other config
  componentProps: {
    MainHeader: {
      titleText: 'Chat with us now!'
    }
  }
}

This may overwrite all the default componentProps though, unless you copy and merge the existing object. To avoid this, you can also use the React default props API in Flex. To change the MainHeader titleText that would look like this:

FlexWebChat.MainHeader.defaultProps.titleText = 'Chat with us now by default!';

You can use this in the component in which you set up the FlexWebChat object.

All the components and props available to change can be seen in the Flex web chat documentation here.

Let me know if that helps at all.