> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-update-integrations.mintlify.site/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](/webchat/) UI to match. This includes the bot's greeting, buttons, and any other text that appears in the Webchat window.

<Info>
  You will need:

  * A [published bot](/get-started/quick-start)
  * 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.
</Info>

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

## Step 1: Translate elements from Webchat settings

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

### Name and description

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

<Frame>
  <img src="https://mintcdn.com/botpress-update-integrations/3RVCqhUeh85dbpTj/studio/guides/how-to/assets/name-and-description.png?fit=max&auto=format&n=3RVCqhUeh85dbpTj&q=85&s=667d3dff9e6862a468ab824fe9cdb1d5" alt="Translate name and description" width="1446" height="646" data-path="studio/guides/how-to/assets/name-and-description.png" />
</Frame>

### Composer placeholder

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

<Frame>
  <img src="https://mintcdn.com/botpress-update-integrations/3RVCqhUeh85dbpTj/studio/guides/how-to/assets/translate-composer.png?fit=max&auto=format&n=3RVCqhUeh85dbpTj&q=85&s=fd4a891933b9bfcc50abc0da0d20ab98" alt="Translate composer placeholder" width="1446" height="154" data-path="studio/guides/how-to/assets/translate-composer.png" />
</Frame>

## 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](/webchat/get-started/configure-your-webchat).
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](/webchat/get-started/configure-your-webchat#use-custom-styles).
</Tip>

### New conversation modal

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

<Frame>
  <img src="https://mintcdn.com/botpress-update-integrations/3RVCqhUeh85dbpTj/studio/guides/how-to/assets/new-convo-modal.png?fit=max&auto=format&n=3RVCqhUeh85dbpTj&q=85&s=a945e3f62715fdf7c12d19ce09fadff7" alt="New conversation modal" width="860" height="288" data-path="studio/guides/how-to/assets/new-convo-modal.png" />
</Frame>

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:

<Frame>
  <img src="https://mintcdn.com/botpress-update-integrations/3RVCqhUeh85dbpTj/studio/guides/how-to/assets/today-label.png?fit=max&auto=format&n=3RVCqhUeh85dbpTj&q=85&s=344726705aa9721006a39eff389a09b6" alt="Today label" width="1446" height="476" data-path="studio/guides/how-to/assets/today-label.png" />
</Frame>

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;
}
```

<Check>
  Your bot's Webchat UI is now translated!
</Check>

### Delivery status

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

<Frame>
  <img alt="Delivery status" className="block dark:hidden" src="https://mintcdn.com/botpress-update-integrations/ZSPBASzrwuu4LF9q/studio/guides/how-to/assets/delivery-status.png?fit=max&auto=format&n=ZSPBASzrwuu4LF9q&q=85&s=654f083e594bc27dfe1fb879e6311f0e" width="1010" height="180" data-path="studio/guides/how-to/assets/delivery-status.png" />

  <img alt="Delivery status" className="hidden dark:block" src="https://mintcdn.com/botpress-update-integrations/ZSPBASzrwuu4LF9q/studio/guides/how-to/assets/delivery-status-dark.png?fit=max&auto=format&n=ZSPBASzrwuu4LF9q&q=85&s=69f83cfa67ab6ebc993fe64479db57d7" width="1010" height="180" data-path="studio/guides/how-to/assets/delivery-status-dark.png" />
</Frame>

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*/
}
```