The Theme Editor lets you customize the look and feel of the TalkJS user interface. When you open the Theme Editor, you'll see that a default theme already exists. You can change the default theme to your liking, or create your own. Using the menu on the left, you can navigate between the different parts of your theme. Changes are automatically saved.

Structure of a theme

Each theme contains a layout configuration and a set of components.

Layout

In the layout editor, you can configure various aspects of TalkJS's layout, and the styling of parts of the interface that don't (yet) have their own individual components. Unless otherwise noted, all properties shown in the layout editor are CSS properties, and thus can use any value that'd be valid in CSS.

Components

Components let you completely change the HTML markup and styling of a part of the interface. When you click on one of the components on the left, you'll see the component's template. A component template always contains a <template> and a <style> tag.

  • <template> contains the HTML markup for the component.
  • <style> tag contains CSS that applies to that markup.

You might also see some special HTML attributes such as t:if="{{something}}. These are part of the TalkJS template language, an easy way to put data and logic in your templates.

Test and Live Templates

Your TalkJS account has 2 environments; a Live and a Test environment. Themes can only be edited in your test environment. When you want to use a theme with your live app, you have to Publish it using the "publish" button in the Theme Editor. When you publish a theme, it is copied from your test environment to your live environment. This way, you can keep making changes to your theme in the test environment without worrying about breaking your app in production and disrupting your customers' experience.

Limitations

We're working hard to make the Theme Editor as powerful as it can be, but for the time being, only messages and avatars can be customized as components. Many other aspects of the UI can still be tweaked using the layout editor, but we plan to expand the use of components in the near future. Also, Theme Editor themes don't apply to emails yet. If a user's role has a Theme Editor theme applied, their email will use the default theme.