UI components
Pre-built chat UI with typing indicators and read receipts
Render the TalkJS Inbox and your users get a conversation list and a chat window, with typing indicators, read receipts, unread badges and online status already on. On small screens it switches to a mobile layout. You can change most of the chat UI’s defaults in the dashboard, so turning one off doesn’t need a new release.
import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
import { getTalkSession } from '@talkjs/core';
import { useEffect } from 'react';
function Chat() {
const appId = '<APP_ID>';
const userId = 'frank';
const otherUserId = 'nina';
const conversationId = 'new_conversation';
const session = getTalkSession({ appId, userId });
useEffect(() => {
session.currentUser.createIfNotExists({ name: 'Frank' });
session.user(otherUserId).createIfNotExists({ name: 'Nina' });
const conversation = session.conversation(conversationId);
conversation.createIfNotExists();
conversation.participant(otherUserId).createIfNotExists();
}, [session, conversationId, otherUserId]);
return (
<div style={{ width: '400px', height: '800px' }}>
<Chatbox
appId={appId}
userId={userId}
conversationId={conversationId}
/>
</div>
);
}
Which chat UIs come ready-made?
Three in the current SDK: an Inbox, a Chatbox and a Conversation list. The Inbox is the other two side by side, so you can also use the Chatbox or the Conversation list on its own. The cards below show the Inbox, the Chatbox and a popup.
The TalkJS Inbox shows the chat history on the left, selected conversation on the right. It’s designed to act as the messaging center of your app, usually living on its own page.
The TalkJS Chatbox is just the right half of the Inbox UI mode. It takes up less space and is designed to be embedded in your app near an order confirmation, a booking, or user profile.
A popup opens a conversation in the bottom right of your page when a user clicks a button. The Classic SDK has a ready-made Popup. With the current SDK, you open a Chatbox from your own button.
What’s on by default?
Here’s what your users see as soon as the chat renders, with no setting changed, plus the two that need a step from you (dark mode and notifications):
| Feature | Default | Where you change it |
|---|---|---|
| Typing indicatorsAnimated dots while the other person types | DefaultOn | Where you change itRole setting “Show typing indicators” in the dashboard |
| Delivery and read receiptsA tick when a message is sent, two ticks when it’s read | DefaultOn | Where you change itYour theme’s message status |
| Unread badgesThe number of unread messages on each unread conversation in the list | DefaultOn | Where you change itYour theme’s conversation list item |
| Online statusA green dot when the other person is online | DefaultOn | Where you change itRole setting in the dashboard |
| Reactions and repliesEmoji reactions, and replies that quote the message they answer | DefaultOn | Where you change itThe role’s message actions in the dashboard |
| Editing and deletingUsers edit or delete their own messages | DefaultOn | Where you change itThe role’s message actions in the dashboard |
| Files, images and locationsA paperclip in the message field; images and files show in the chat | DefaultOnOn every plan | Where you change itRole settings in the dashboard |
| Voice messagesRecord, play back and send a voice message | DefaultOn | Where you change itRole setting “Allow recording voice messages” |
| Emoji pickerPick an emoji, or type a colon and its name | DefaultOn | Where you change itYour theme |
| Mobile layoutThe Inbox shows the list or the chat, one at a time, on small screens | DefaultOn | Where you change itA prop on the Inbox |
| LanguagesThe chat UI in 39 languages | DefaultAmerican English | Where you change itThe default language in the dashboard, or each user’s locale |
| Dark modeA dark chat UI | DefaultOff | Where you change itOne prop: colorScheme="dark" |
| Email, SMS and push notificationsUsers who are offline hear about new messages | DefaultNeeds setup; push needs Apple or Firebase credentials, and SMS is charged separately | Where you change itThe dashboard’s Notifications page |
These are the defaults for a new app. Most are role settings, so moderators, buyers and sellers can each get their own. See all features in the docs.
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.
How much code does a pre-built chat UI take?
A few lines. Install @talkjs/react-components and @talkjs/core, then render a Chatbox with your app ID, a user ID and a conversation ID. In test mode, sample users and a sample conversation let you send messages before you write any backend code.
To go live, create your users and conversations, and sign a token on your server. For a deeper integration, the REST API and webhooks connect the chat to your own systems.
import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
<Chatbox
appId="<APP_ID>"
userId="sample_user_alice"
conversationId="sample_conversation"
/>
Can I change how the chat looks?
Themes give you full control over the styling, layout, and structure of the TalkJS chat UI. You can customize:
- Fonts, colors, and spacing
- Layouts for inbox, chatbox, and popup
- Message bubbles and system messages
- Markup and document structure
- Use cases like live comments next to video
Themes go beyond appearance—they shape functionality too. Build a theme that fits your product, whether it’s a team chat app, a mobile messenger, or a live comments section next to a video stream.
What else comes with the chat?
Build an in-app messaging experience your users actually love. Everything you need to drive engagement and retention, powered by a fast, reliable messaging infrastructure.
We needed chat and didn’t want to build it ourselves because it needs to be really great. The TalkJS team is laser-focused on chat, and we’re focused on building a great auction marketplace.