TalkJS lets you change the look and feel of its user interfaces to match your site or app's style.

Examples of some Version 2 Themes

There are currently 2 options for creating themes:

  • Custom Themes give you full control over the HTML and CSS of chat messages, with more themeable components to come.
  • Legacy Themes let you customize certain aspects of the TalkJS UI using a predefined list of CSS properties. If you've previously customized TalkJS, this is probably what you're familiar with. Even if we recommend Custom Themes for new projects, legacy themes will always keep working.

Activating a theme

Which theme is used when displaying the TalkJS UI depends on the current user's role. When a user has no role set, the TalkJS default theme will be used.

To configure a theme for a role, go to the dashboard, and click "Roles". Then, create or select a role, and scroll down to the "UI Theme" section:

Screenshot of the roles editor themes section


We have various tutorials showcasing how you can use the Theme Editor to achieve the look of various chat/messaging apps: