JavaScript chat UI components

Prebuilt chat UIs for any web app, with or without a framework.

TalkJS has four prebuilt JavaScript chat UIs: a chatbox for one conversation, a conversation list, an inbox that combines the two, and a popup. They work in plain JavaScript and HTML or in any web framework. They connect to our servers, which store and deliver the messages, so there's no chat server for you to build. Paste two snippets of HTML into a page and you have a working chat.

You can mix and match them to suit your needs across your site or app.

How do I add a chat UI to a JavaScript page?

Load the TalkJS web components in the <head> of your page. You don't need npm or a build tool:


1<link
2  rel="stylesheet"
3  href="https://cdn.jsdelivr.net/npm/@talkjs/[email protected]/default.css"
4/>
5<script type="importmap">
6  {
7    "imports": {
8      "@talkjs/web-components": "https://cdn.jsdelivr.net/npm/@talkjs/[email protected]",
9      "@talkjs/core": "https://cdn.jsdelivr.net/npm/@talkjs/[email protected]"
10    }
11  }
12</script>
13<script type="module" async>
14  import "@talkjs/web-components";
15</script>

Then add a chatbox where you want the chat to appear:


1<t-chatbox
2  style="width: 400px; height: 600px;"
3  app-id="<APP_ID>"
4  user-id="sample_user_alice"
5  conversation-id="sample_conversation"
6></t-chatbox>

Set app-id to your test mode app ID, from the Settings page of your TalkJS dashboard. If you're logged in, the code above already has it. Test mode comes with sample users and conversations, so the chatbox opens on sample_user_alice's sample conversation. Try sending a message!

To go live, you create your own users and conversations with the JavaScript Data API and turn on authentication, which needs a backend server that generates tokens. The JavaScript getting started guide covers each step.

Chatbox

A chatbox for a single conversation. Use <t-chatbox> as a web component, or Chatbox in React.

Conversation list

A list of a user's conversations. Combine the conversation list with a Chatbox, or use an Inbox, to access the listed conversations. The web component is <t-conversation-list>, and the React component is ConversationList.

Inbox

A full-fledged message center with conversation history: the conversation list next to the selected conversation, in one responsive UI. Add it with <t-inbox>, or with Inbox in React.

A pop-up overlay for a single conversation. Try out the TalkJS support chat for an example.

On the Components SDK (the SDK with web and React components, explained below), you can build your own pop-up by combining the Chatbox component with a pop-up launcher button.

Which chat UIs does each SDK include?

Our getting started guides use the Components SDK, which comes as web components and React components. If you signed up before October 2025, you're probably on one of the Classic SDKs, which run the chat inside an iframe. They're fully supported.

Chat UI	Components SDK	Classic SDKs
Chatbox	Yes	Yes
Conversation list	Yes	No
Inbox	Yes	Yes
Popup	Build one from a Chatbox	Yes

Use the web components with plain JavaScript, Vue, Angular or Svelte, and the React components with React or Next.js. For mobile apps, we also have React Native and Flutter SDKs.

How do I customize the chat UI?

You can directly use any of the prebuilt chat UIs for a beautiful, professional-looking chat, or fully customize them with chat UI themes to match your own style.

On the Components SDK, you can pass props and event handlers to a component, override its styles with CSS, change a single theme component, or write your own theme. Customization helps you pick the simplest approach for your change.

Can I build my own chat UI instead?

Yes. You can build your own custom chat UI from scratch using the JavaScript Data API.