Skip to contentSkip to navigationSkip to topbar
Twilio Docs
Rate this page:
On this page

Localization and UI templating (Webchat 2.0)

(information)

Info

This guide is for Flex UI 1.x.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x.x or you are starting out, we recommend that you build with Webchat 3.0.

Any string in Flex WebChat 2.0 UI can be changed. Within 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:

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


_12
FlexWebChat.Manager.create(configuration)
_12
.then(manager => {
_12
_12
manager.strings.WelcomeMessage = "I am a new Welcome Message";
_12
_12
ReactDOM.render(
_12
<FlexWebChat.ContextProvider manager={manager}>
_12
<Flex.RootContainer />
_12
</FlexWebChat.ContextProvider>,
_12
document.getElementById("root")
_12
);
_12
});

List of templated strings in WebChat

list-of-templated-strings-in-webchat page anchor
  • 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-engagement message displayed in the tray of the webchat
  • MessageCanvasTrayButton - button caption to start a new chat

Default string values

default-string-values page anchor

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

Rate this page: