# Localization and UI templating (Webchat 2.0)

> \[!WARNING]
>
> Webchat 2.0 is no longer supported. It uses Flex UI 1.x.x's [legacy messaging](/docs/flex/developer/messaging), which has reached end-of-life.
>
> If you are using Webchat 2.0, [migrate to Webchat 3.x.x](/docs/flex/developer/conversations/webchat/migrate).
>
> If you are starting out with Webchat, build with [Webchat 3.x.x](/docs/flex/developer/conversations/webchat) instead.

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](https://handlebarsjs.com/)

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

```javascript
FlexWebChat.Manager.create(configuration)
    .then(manager => {

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

        ReactDOM.render(
            <FlexWebChat.ContextProvider manager={manager}>
                <Flex.RootContainer />
            </FlexWebChat.ContextProvider>,
            document.getElementById("root")
        );
    });
```

## 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

```bash
    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"
```