UI components
Pre-built chat UI components you can make your own
Save months of design and development work with a ready-to-use chat UI. Add it to your website or app and customize it to fit your brand.
import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
import { TalkSession } 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>
);
}
Ready-made chat UI you can customize
The chat UI comes with three different layouts—that are highly customizable—which you can mix and match to suit your needs. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.
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.
You can also show a conversation in a popup that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page.
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.
Integrate chat with a few lines of code
You just need to tell us which conversation to display, who’s chatting, and where to show it on the page. We take care of the rest! And if you want a deeper integration, we have all the APIs you’ll need to add functionality or integrate into your own systems.
<Session appId="9352938974" userId={me.id}>
<Chatbox conversationId={conversation.id}/>
</Session>
Customize everything and anything
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.
Complete messaging feature set
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.