Themes

Customize your chat UI with TalkJS Themes

Themes give you complete control over the styling, layout, and document structure of the TalkJS pre-built UI. From quick tweaks to fonts and colors, to completely changing the markup in certain areas.
Avatar
Andrea
1 day ago
This looks beautiful. How far away are we from shipping this?
Avatar
Robbie
6 hours ago
I think we're pretty much there. Just some final stage testing.
Avatar
Nikki
5 hours ago
That's right. We'll be good to ship this within the next 48 hours. Any delays, I'll let you know by tomorrow.
Avatar
Ivan
4 hours ago
Thanks for the feedback folks. Really happy with how this one turned out.
We should be good to go!
Avatar
Sara
10m ago
Hey team, I'm reviewing the budget for the next quarter and we have some available for training. You got any in mind?
Avatar
Franco
8m ago
Nice! Yeah, there were a couple of React courses I wanted to do online.
Avatar
Carli
7m ago
I wanted to find an interative design course. I'll do some research!
Avatar
Denzel
2m ago
Cool. I'll also give it some thought.
Say something...
A theme is a specific look and feel for your chat

You could have a light or dark theme and UI elements only displayed to a particular subsection of users. And it's not all about styling — it's about functionality too. You can create a theme that works great for a team chat app, mobile messenger, and even a live comments section next to a video livestream.

Theme editor

Complete control over styling, layout, and document structure

HTML templates

Entirely change the way messages are rendered with markup control

Metadata

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
Start 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 customization.

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 customization 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
Extensive theme customization

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 customize 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 customization 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.

1{
2 "id": "msg_7bUdcZEoCUiDOcbcSh3Sdj",
3 "type": "SystemMessage",
4 "text": "New Bid",
5 "conversationId": "myConversation",
6 "custom":{
7 "bid": "40",
8 "bidder": "Jennifer Pritchard",
9 "itemDescription": "The Worm",
10 "itemImage": "https://example.com/nasa-worm.jpg",
11 }
12 ...
13}
Theme metadata example
The power of TalkJS is that it's highly customizable 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