Themes
Customize your chat UI with TalkJS Themes
Themes give you full control over the styling, layout, and document structure of the TalkJS pre-built UI, from quick tweaks to fonts and colors to complete markup customization within components.
.message {
white-space: normal;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-style: solid;
word-wrap: break-word;
position: relative;
display: inline-block;
max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
border-color: #F2F2F2;
background-color: #F2F2F2;
color: #171717;
}
.has-avatar-spacer .message {
max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}
.by-me .message {
border-color: #EC4899;
background-color: #EC4899;
color: #fff;
margin-right: 0.50rem;
}
Hey, I’m having trouble accessing my account. It says my password is incorrect.
5m ago
No problem, let’s get that sorted. Have you tried resetting your password using the “Forgot password?” link?
4m ago
This **** reset link is useless. My email is [email hidden].
3m ago
Please keep the conversation respectful. We automatically mask contact details for safety.
2m ago
I’ve sent a new reset link. Check your inbox and spam folder. If it doesn’t arrive in 5 minutes, I’ll verify your account manually.
1m ago
Sorry about that. I’ll check now.
just now
Got it — checking my inbox now!
Hey, have you heard about these micro communities people are joining?
8m ago
Yeah, I have! They seem like a great alternative to big social media platforms.
7m ago
Definitely. I joined one for local gardening enthusiasts. It's so much more engaging.
6m ago
That's cool. I've been looking to cut down my social media time. How do you like it?
2m ago
I love it. More meaningful interactions.
just now
I'll start looking into it!
Define the look and feel of your chat
A theme in TalkJS defines the appearance and structure of your chat UI. It controls everything from layout and typography to colors, message bubbles, and reactions, making it easy to align the chat experience with your product’s brand and design system.
Editable in code
Build, design, and edit themes directly in your code editor for complete control over layout, markup, and styling.
Templates
Define how messages and chat elements are structured and rendered using customizable templates for full layout control.
Custom data
Display additional message details or structured content using the TalkJS REST API, making it easy to enrich conversations with context.
Case study
Hotplate empowers home chefs with TalkJS
Hotplate used TalkJS to connect home chefs and diners in one seamless messaging experience. By starting with TalkJS Themes, the team quickly launched a branded chat that fit their product’s design while keeping flexibility to add custom functionality as they grew.
Read the full case study
Build themes directly in your code editor
TalkJS provides prebuilt themes you can use right away or customize to match your brand’s design and user experience.
Themes give you complete control over how your chat looks and feels—from overall layout and message styling to fonts, colors, and interactive elements. You can fine-tune every visual detail, extend functionality, or design a fully bespoke chat interface.
Whether you start from a default themes or build your own, TalkJS provides a flexible foundation to create a consistent and responsive chat experience within your product.
Customize chat layouts with templates
Templates define how messages and other chat elements are structured and rendered. They give you full control over the markup, allowing you to decide exactly how messages, metadata, and UI components appear within your theme.
Using template directives, you can include dynamic data, apply conditional logic, or transform content with filters—making your chat UI both expressive and adaptable. Templates support standard HTML and CSS, so you can refine your design without learning a new syntax.
<template>
<t:set showAvatars="{{true}}"/>
<div class="message-row {{ sender.isMe | then: 'by-me' | else: 'by-other' }} {{ body.type }}">
<Avatar photoUrl="{{ sender.photoUrl }}" />
<ActionMenu class="action-menu"><Icon type="horizontalDots" /></ActionMenu>
<div class="message {{ body.hasThumbnail | then: 'has-thumbnail' }}">
<div class="message-meta">
<div class="message-author" style="color: {{ sender.id | random_color }}">
{{ sender.name }}
</div>
<div class="message-time">
<TimeAgo timestamp="{{ timestamp }}"/>
</div>
</div>
<MessageBody
body="{{ body }}"
timestamp="{{ timestamp }}"
isLongEmailMessage="{{isLongEmailMessage}}"
hasReferencedMessage="{{ hasReferencedMessage }}"
/>
</div>
</div>
</template>
We’re thrilled to have a seamless chat experience in our marketplace. TalkJS was incredibly easy to set up, and the result both looks and performs beautifully.
Shayne Kasai
Engineer, Retreat Guru
Use custom data to enrich your chat
Attach custom data to any conversation message through the TalkJS REST API. You can display dynamic details such as product information, order updates, or system notifications directly within the chat interface.
By combining custom data with templates, you can decide exactly how this information appears—creating richer, more contextual chat experiences that go beyond text messages.
The power of TalkJS is its high customisability and ease of use. We can offer our customers a plug-and-play solution while giving them the flexibility to adjust the chat widget to their needs.
Paul Van Den Broek
Product Manager, Coosto