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.
Avatar
Rupert
1 min ago
Late in commenting, but as long as this meets our accessibility standards, this looks excellent and good to ship IMO.
We should be good to go!
Avatar
Izabella
Right folks, where are we going for climbing trip this spring?
7m ago
Avatar
Jakob
I was thinking Brione in Switzerland or Alberaccin in Spain.
6m ago
Avatar
Louis
Swizzy for me. What month?
5m ago
Avatar
Callum
Yes, Brione looks epic. How's May?
1m ago
Let's do it!
Fire
Right fist
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