Customize your chat UI with TalkJS Themes
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
The flexibility lets us implement as we wish—starting simple and adding custom functionality as we go.
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.
1.inner {2 flex-grow: 1;3 flex-basis: 0;4 display: flex;5 align-items: center;6 padding-left: 1rem;7 padding-right: 1rem;8 min-width: 0;9}10.content {11 flex-grow: 1;12 display: flex;13 align-items: center;14 min-width: 0;15}16.image {17 width: 45px;18 text-align: center;19 margin-right: 0.75rem;20 flex-shrink: 0;21}22.info {23 flex-grow: 1;24 flex-basis: 0;25 min-width: 0;26}
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.
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.
1<template>2<t:set showAvatars="{{true}}"/>3<div class="message-row {{ sender.isMe | then: 'by-me' | else: 'by-other' }} {{ body.type }}">4 <Avatar photoUrl="{{ sender.photoUrl }}" />5 <ActionMenu class="action-menu"><Icon type="horizontalDots" /></ActionMenu>6 <div class="message {{ body.hasThumbnail | then: 'has-thumbnail' }}">7 <div class="message-meta">8 <div class="message-author" style="color: {{ sender.id | random_color }}">9 {{ sender.name }}10 </div>11 <div class="message-time">12 <TimeAgo timestamp="{{ timestamp }}"/>13 </div>14 </div>15 <MessageBody16 body="{{ body }}"17 timestamp="{{ timestamp }}"18 isLongEmailMessage="{{isLongEmailMessage}}"19 hasReferencedMessage="{{ hasReferencedMessage }}"20 />21 </div>22</div>23</template>
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}
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.
