How to style your chat with CSS
You can style nearly any aspect of your chat with CSS to match your own brand’s look and feel.
To customize your chat UI, go to the Themes page on your TalkJS dashboard. You can either select one of the preset themes to edit, or create your own custom theme by choosing the Create new theme option.
This article covers how to customize your chat’s style using layout, theme components, and global CSS overrides in the theme editor, as well as styling aspects of the Popup UI directly in your own site or app’s CSS.
Layout
The Layout section of the theme editor allows you to tailor settings of your chat UI layout that are used globally, by multiple components of a theme. Aspects of your chat UI that you can style directly in this section include:
- font, including font family, size and color
- chat panel width, margins and borders
- conversation list width, height, margins and borders
- action menu for a message
- day marker
- offline indicator
Values that you specify in the layout section are used as CSS values, unless otherwise noted. That means that you can use any familiar CSS syntax to customize the layout properties.
Components
You can directly customize the style of any part of the chat UI that has been exposed as a theme component.
A theme component consists of a <template> tag that contains the HTML markup for the component, and a <style> tag that contains CSS that applies to that markup. You can edit the CSS directly in the component itself from the theme editor.
The <style> element of a component is scoped to apply only to the HTML of the component that you’re editing. This gives you the security that whatever edits you make won’t interfere with anything outside of that specific component.
You’d want to ensure that all your customized CSS keeps working properly, also with future TalkJS updates. For that reason we recommend using classes rather than element selectors or ID selectors to apply styling.
You can find an overview of all currently available theme components in the Components section of the theme editor. For more details on the individual theme components, see: Components.
Global CSS overrides
The Global CSS overrides section of the theme editor allows you to style those parts of the chat UI that aren’t currently exposed as theme components. Any styles that you add to the <style> tag within global CSS overrides gets applied globally to the entire TalkJS UI.
Note that when TalkJS updates, internal CSS class names and DOM structure may change without prior warning. Such changes could cause any styles you add to the global CSS overrides to stop working, or to behave unexpectedly. For this reason, use global CSS overrides with caution, and only for styling those parts of your chat that you can’t otherwise edit in the layout or an individual theme component.
Style the popup
Because the Popup UI’s chat panel and launcher icon aren’t in an iframe, you can’t style these directly with CSS inside your theme editor. Instead, to customize the size of the Popup chat panel or to style the popup open and close button (the launcher icon) with CSS, add your styles directly to your site or app's CSS.
For more information on customizing your Popup, see:
Do you have any further questions about styling your chat with CSS? We’re happy to help. Get in touch.