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;
}
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.
Build, design, and edit themes directly in your code editor for complete control over layout, markup, and styling.
Define how messages and chat elements are structured and rendered using customizable templates for full layout control.
Display additional message details or structured content using the TalkJS REST API, making it easy to enrich conversations with context.
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.
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.