I’m working on migrating from LiveChat to Messaging for In-App and Web and need to apply custom CSS to the Einstein Bot within the customer chat window. Specifically, I want to:
- Increase the font size for better readability
- Make focus states clearly visible for accessibility
- Avoid keyboard traps to ensure smooth tab navigation
While inspecting the implementation, I looked into the minified .js asset files to find styling hooks or class names, but modifying those directly doesn’t seem safe or maintainable.
I’m looking for guidance or examples on how to safely apply these styles, ideally without breaking Salesforce updates. What’s the recommended approach for customizing the chat window UI in this context? Is there official support or documentation for this kind of styling?
@Enhanced Chat (Messaging In-App/Web) #Service Cloud #Salesforce Developer #Omni Channel #Messaging Session
Faced similar limitation when migrating, unfortunately, the customizations are pretty limited. Here is some documentation to modify the styling for CSS of the text message bubble - https://developer.salesforce.com/docs/service/messaging-web/guide/customize-text-message-bubble.html?_ga=2.187649192.100907895.1738079703-1605979368.1737756652
Modifying the css classes that you see when inspecting the UI on the browser is not recommended as those can change over time. The CSS/styling is primarily controlled using the branding section in the embedded service deployment.
