Localization and UI templating

Any string in Flex WebChat UI can be changed. Withing the context of FlexWebChat.manager you can specify any string you want to change to override its default value.

With templated strings you can also:

Read more about it in Flex UI localization and templating

This example shows how to override WelcomeMessage shown to user in the chat

    .then(manager => {

        manager.strings.WelcomeMessage = "I am a new Welcome Message";

            <FlexWebChat.ContextProvider manager={manager}>
                <Flex.RootContainer />

List of templated strings in WebChat

  • EntryPointTagLine - Text show on the WebChat entry point
  • InvalidPreEngagementMessage - Text shown if the Pre engagement form is turned on ( startEngagementOnInit=true ), but no Pre engagement form is specified
  • PredefinedChatMessageAuthorName - Author of the predefined message

  • PredefinedChatMessageBody - Body of the predefined message

  • FieldValidationRequiredField - Text shown, if required field in the pre engagement form is not filled
  • FieldValidationInvalidEmail - Text shown, if validation for email type field in pre engagement for is not passed
  • InputPlaceHolder - Text shown in the edit box when no content has been entered
  • TypingIndicator - Text used for typing indicator, user name is denoted by {{name}}. For example "{{name}} is typing"
  • Read - Text below last message that has been read by other party
  • MessageSendingDisabled - Text shown if sending messages has been disabled
  • Today - Text shown in message list to group messages from today's date
  • Yesterday - Text shown in message list to group messages from yesterday's date
  • WelcomeMessage - welcome message shown to customers who enter chat in Webchat UI
  • NotificationMessage - text shown in notification message. Custom error message denoted by {{message}}
  • MessageCanvasTrayContent - a post-endgagement message displayed in the tray of the webchat
  • MessageCanvasTrayButton - button caption to start a new chat

    EntryPointTagline: "Chat with us",
    MessageCanvasTrayContent: `
        <h6>Thanks for chatting with us!</h6>
        <p>If you have any more questions please reach out to us again.</p>`,
    MessageCanvasTrayButton: "START NEW CHAT",
    InvalidPreEngagementMessage: "Pre-engagement forms have not been set and are required to initiate the web-chat. " + "Please configure these now in setup.",
    InvalidPreEngagementButton: "Learn more",
    PredefinedChatMessageAuthorName: "Bot",
    PredefinedChatMessageBody: "Hi there! How can we help you today?",    
    InputPlaceHolder: "Type message",
    TypingIndicator: "{{name}} is typing ... ",
    Read: "Read",
    MessageSendingDisabled: "Message sending has been disabled",
    Today: "TODAY",
    Yesterday: "YESTERDAY",
    MessageCanvasTrayButton: "START NEW CHAT",
    WelcomeMessage: "Welcome to customer service",
    Save: "SAVE",
    Reset: "RESET",
    MessageCharacterCountStatus: "{{currentCharCount}} / {{maxCharCount}}",
    SendMessageTooltip: "Send Message",
    FieldValidationRequiredField: "Field required",
    FieldValidationInvalidEmail: "Please provide a valid email address"
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?

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.