Themes

Customise your chat UI with TalkJS Themes

Themes give you complete control over the styling, layout, and document structure of the TalkJS pre-built UI.
Themes illustration
What is a TalkJS Theme?
A specific look and feel for your chat

TalkJS Themes allow you to customise the TalkJS user interface. From quick tweaks to fonts and colours, to completely changing the markup in certain areas.

You could have a light theme, a dark theme, but you might also have themes with UI elements that you only show to a particular subsection of your users.

And it's not all about styling — it's about functionality as well. You can create a Theme that works great for your Slack-style app, mobile messenger, and even a live comment section next to a video livestream.

Complete control over styling, layout, and document structure.

Entirely change the way messages are rendered with markup control.

Display more information in your messages by using our REST API.

How TalkJS helped Audry connect their podcasting community
TalkJS has been an integral part of our user experience since the beginning, allowing us to bring a fully fledged in-app chat solution in our first version of the platform.
Eugenio Warglien
Co-founder, Audry
How to get started?
By using the Theme Editor

TalkJS provides a pre-built UI with a Default Theme you can use right off the bat or as a starting point for customisation.

To get started, you'll use the Theme Editor, which gives you complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.

The great thing about the Theme Editor is that it's really easy to create any style of chat UI. You have to adjust the default TalkJS chat UI by changing a couple of lines of CSS. This way of doing things keeps the frontend work at a minimum so you can ship faster.

Theme customisation example
We're so pleased to finally have a chat solution on our marketplace and it was incredibly easy to setup and looks and functions fantastic.
Shayne Kasai
Engineer, Retreat Guru
How deeply can you customise?

Enough to fit your product and use case perfectly

You can create the perfect chat UI for your use case and make it fit your website or app. Use the Theme Editor, HTML templates, and metadata to deeply customise the chat UI.

Theme Editor

Create HTML templates

HTML templates give you flexibility. You can entirely change the way messages are rendered. Meaning you have complete control of the markup of messages and all of the styles.

You can write and edit HTML templates in the components section of the TalkJS Editor.

Theme customisation example

Use metadata in your chat

You can attach custom data to a conversation message. It can be almost anything you make available by using our REST API.

Use it to display more information in your messages or change how they are displayed in a specific context to your application and more.

Theme metadata example code snippet
Theme metadata example
The power of TalkJS is that it's highly customisable and user-friendly. We can offer our customers a plug and play solution and give them the possibility to adjust the chat widget to their needs.
Paul Van Den Broek
Product Manager, Coosto
Ready to get started?
Whether you're building a marketplace, healthcare app, education platform, or something else, TalkJS is the chat API for you.