How to Translate Your Botpress Webchat UI
# 📖tutorials
p
You can localize both bot messages and the Webchat interface. Here’s how: 🤖 Bot Messages 1. Enable the Translation Agent from the Hub. 2. Turn it on in each Autonomous Node.
 ✅ Bot messages will automatically translate based on the user's language. 🖼️ Webchat UI CSS VS JavaScript CSS can change static UI labels and placeholders. These are usually text elements that are not dynamically injected by JavaScript. Examples: * Modal titles, button text, input placeholders * Fixed labels within the chat interface (like the "Start new conversation" dialog)
 Some dynamic elements and text strings are not directly customizable via CSS and require changes through the Webchat configuration or JavaScript. Examples: * Custom input placeholder (configured through WebChat > General)
 ✅ Steps to Customize your Webchat UI: 1. Modify the composer placeholder in Dashboard > WebChat > General 2. Select the CSS classes you want to translate from the Botpress docs 3. Add the code to the WebChat > Theme > Style section ⚠️ Important Notes: * Always test your changes to ensure they are correctly applied. * For any dynamic text elements or non-static labels, you may need to use JavaScript instead of CSS. 📚 Learn More: *https://botpress.com/docs/guides/studio/interface/agents/translator-agent#translator-agent * https://botpress.com/docs/webchat/styling-your-webchat#use-custom-styles https://cdn.discordapp.com/attachments/1371600423676284958/1371600423949041684/Screenshot_2025-05-12_at_5.29.24_PM.png?ex=6823b9f0&is=68226870&hm=77fb69ef76911eae803c94623473d8f42c710ecf0dd2e269e686e3595fde779f&
💡 Example: Translating UI Elements to Swedish Here’s a sample CSS snippet to translate key UI elements:
Copy code
css
/* Change the title */
.bpModalDialogTitleText {
    visibility: hidden;
    position: relative;
}
.bpModalDialogTitleText:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Starta ny konversation";
}

/* Change "Start a new conversation?" */
.bpModalDialogNewConversationText {
    visibility: hidden;
    position: relative;
}
.bpModalDialogNewConversationText:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Är du säker på att du vill starta en ny konversation?";
}

/* Change the button text */
.bpModalDialogNewConversationButton {
    color: transparent;
    position: relative;
}
.bpModalDialogNewConversationButton:after {
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "Starta om";
    color: initial;
    white-space: nowrap;
}


/* Change the today text */
div.bpMessageContainer[data-direction="system"] > p.bpMessageBlocksTextText {
  visibility: hidden !important;
  position: relative !important;
}

div.bpMessageContainer[data-direction="system"] > p.bpMessageBlocksTextText::before {
  content: "Idag" !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0;
  left: 0;
  white-space: nowrap;
}
w
Thanks @prehistoric-airplane-85682 . Discord has markdown for multi-line block code with syntax highlighting: * wrap your text in (```) * specify the language right after the first three backticks: css, js, html, ts (typescript) * Insert your code in a new line
6 Views