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:

Use Mustache style template variables for dynamic content
Register and use Handlebars helper functions

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

1FlexWebChat.Manager.create(configuration)
2    .then(manager => {
3
4        manager.strings.WelcomeMessage = "I am a new Welcome Message";
5
6        ReactDOM.render(
7            <FlexWebChat.ContextProvider manager={manager}>
8                <Flex.RootContainer />
9            </FlexWebChat.ContextProvider>,
10            document.getElementById("root")
11        );
12    });

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

Default string values

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