> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Translate Webchat UI

If your bot is having conversations in a language other than English, you can translate its [Webchat](https://botpress.com/docs/webchat/) UI to match. This includes the bot's greeting, buttons, and any other text that appears in the Webchat window.

> [!NOTE]
>
> You will need:
>
> * A [published bot](https://botpress.com/docs/get-started/quick-start.md)
> * Knowledge of CSS
>
> For the purposes of this guide, we'll translate the bot's Webchat UI to French. However, you can use the same steps to translate your bot's Webchat UI into any language.

> [!TIP]
>
> Visual learner? Check out our [YouTube guide](https://www.youtube.com/watch?v=afZCpkWHZsI) on translating your bot.

## Step 1: Translate elements from Webchat settings

You can translate some elements of the Webchat UI directly from your bot's [Webchat settings](https://botpress.com/docs/webchat/get-started/configure-your-webchat.md):

### Name and description

To translate the name and description of your bot, modify the **Bot Name** and **Description** fields:

![Translate name and description](https://mintcdn.com/botpress/RWKQxTh1qL1DGc-R/studio/guides/how-to/assets/name-and-description.png?fit=max\&auto=format\&n=RWKQxTh1qL1DGc-R\&q=85\&s=679adeb58f0ccd374b13ced92e21e84b)

### Composer placeholder

To translate the placeholder text in the Composer, modify the **Composer placeholder** field:

![Translate composer placeholder](https://mintcdn.com/botpress/RWKQxTh1qL1DGc-R/studio/guides/how-to/assets/translate-composer.png?fit=max\&auto=format\&n=RWKQxTh1qL1DGc-R\&q=85\&s=d0a1d367a15762595cb0a30033be1ca2)

## Step 2: Translate elements with CSS

Other elements of the Webchat UI need to be translated using CSS. To modify Webchat's built-in CSS classes:

1. Open your bot's [Webchat settings](https://botpress.com/docs/webchat/get-started/configure-your-webchat.md).
2. Go to **Bot Appearance**, then scroll to the **Styles** section.
3. Copy and paste the CSS snippets below into the **Styles** section, then modify the highlighted lines as needed.

> [!TIP]
>
> For a full list of Webchat CSS classes, check out our [guide on styling Webchat](https://botpress.com/docs/webchat/get-started/configure-your-webchat.md#use-custom-styles).

### New conversation modal

You can translate the modal that appears when a user restarts a conversation:

![New conversation modal](https://mintcdn.com/botpress/RWKQxTh1qL1DGc-R/studio/guides/how-to/assets/new-convo-modal.png?fit=max\&auto=format\&n=RWKQxTh1qL1DGc-R\&q=85\&s=d999c5d7b491177b0aa3730a186f3751)

Just copy and paste the following CSS to the **Styles** section of your bot's Webchat settings, then modify the highlighted lines as needed:

```css [expandable] {9, 24, 38} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
/* Change the modal's title */
.bpModalTitle {
    visibility: hidden;
    position: relative;
}
.bpModalTitle:after {
    visibility: visible;
    position: absolute;
    content: "Créer une nouvelle conversation"; /* Replace this with your own translation*/
}

/* Change "New Conversation" */
.bpModalButtonConfirm {
  position: relative;
  color: transparent;
}
.bpModalButtonConfirm:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--message-text);
  white-space: nowrap;
  content: "Nouvelle conversation"; /* Replace this with your own translation*/
}

.bpModalButtonCancel {
    visibility: hidden;
    position: relative;
}

.bpModalButtonCancel:after {
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "Annuler"; /* Replace this with your own translation*/
}
```

### "Today" label

You can translate the "Today" label that appears in a Webchat conversation:

![Today label](https://mintcdn.com/botpress/RWKQxTh1qL1DGc-R/studio/guides/how-to/assets/today-label.png?fit=max\&auto=format\&n=RWKQxTh1qL1DGc-R\&q=85\&s=6e901a2fcd433042d54426362d908fb8)

Just copy and paste the following CSS to the **Styles** section of your bot's Webchat settings, then modify the highlighted lines as needed:

```css [expandable] {8} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
/* Change the "Today" label text */
div.bpMessageContainer[data-direction="system"] > p.bpMessageBlocksTextText {
  visibility: hidden !important;
  position: relative !important;
}

div.bpMessageContainer[data-direction="system"] > p.bpMessageBlocksTextText::before {
  content: "Aujourd'hui" !important; /* Replace this with your own translation*/
  visibility: visible !important;
  position: absolute !important;
  top: 0;
  left: 0;
  white-space: nowrap;
}
```

> [!TIP]
>
> Your bot's Webchat UI is now translated!

### Delivery status

You can change the "Delivered" label that appears after a user message is received:

![Delivery status](https://mintcdn.com/botpress/IST0VdWnOjhTHPbj/studio/guides/how-to/assets/delivery-status.png?fit=max\&auto=format\&n=IST0VdWnOjhTHPbj\&q=85\&s=5d6df28b6597922f2a7881088f4239cc)

Just copy and paste the following CSS to the **Styles** section of your bot's Webchat settings, then modify the highlighted lines as needed:

```css highlight={2} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
.bpReset .bpMessageDeliveryStatus::after {
    content: "Envoyé"; /* Replace this with your own translation*/
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.