Built from the ground up for maximum flexibility, TalkJS’ new set of chat UI components gives you full control over chat design and behavior, while keeping setup as simple as ever.
For years, developers worldwide have been using TalkJS to add a custom chat quickly. And it works great! But if we’re honest … there were still limits to how deeply you could really, really customize the chat. Some things needed workarounds. Or piles of CSS overrides.
That’s why TalkJS devs have gone back to the foundations, and rebuilt chat to give you complete control over your chat interface. Yes, complete control.
Whether you’re building a marketplace, social platform, or SaaS product, TalkJS’ new prebuilt chat UI components make it simpler than ever to deliver a fully-featured, completely customizable chat experience. They work with every major web framework (or no framework at all), including React, Next.js, Angular, Vue, Svelte, and SolidJS.
A note for existing users: If you’re already using TalkJS’ React or JavaScript SDKs, don’t worry, these are now called Classic SDKs. They’re fully supported and continue to work exactly as before. Nothing in your current setup needs to change.
Why you’ll love TalkJS Components
- Customize anything: Control every detail of your chat’s appearance and behavior. Your chat, your way.
- Get started fast: Add chat in minutes with just a few lines of code.
- Rich chat out of the box: 1-on-1 and group chats, mentions, media attachments, notifications, and more.
Developers worldwide use TalkJS to power chat in their apps. Now it’s even easier.
A working chat in under 5 minutes
You can have a working chat in your app in under five minutes. Just make sure you have a TalkJS account and a website or app ready to add chat to.
Get started with React Components
If you’re using React, you can take the following steps.
Installation
Install the @talkjs/react-components package:
npm install @talkjs/react-componentsAdd a chatbox
Import the Chatbox component and its default styling into the component where you want to have your chat UI:
import { Chatbox } from "@talkjs/react-components";
import "@talkjs/react-components/default.css";Then add the Chatbox to your component:
<Chatbox
appId="<APP_ID>"
userId="sample_user_alice"
conversationId="sample_conversation"
/>Replace <APP_ID> with your own TalkJS app ID, which you can find on the Settings page of your TalkJS dashboard.
Run your app, and you’ll have a working chat UI instantly.
Get started with Web Components
If you’re using Angular, Vue, Svelte, or any other web framework (or just plain JavaScript and HTML), you can add chat directly with web components.
Installation
Add the following to the <head> of the page where you’d like your chat to appear (or use npm):
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@talkjs/web-components@0.0.27/default.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/@talkjs/web-components@0.0.27"
async
></script>Add a chatbox
Add the t-chatbox web component to the page on which you'd like to have chat:
<t-chatbox
app-id="<APP_ID>"
user-id="sample_user_alice"
conversation-id="sample_conversation"
></t-chatbox>Replace <APP_ID> with your own TalkJS app ID, which you can find on the Settings page of your TalkJS dashboard.
Open your page and start chatting.
Customize anything
The new TalkJS chat components are built for maximum flexibility, from subtle style tweaks to complete design overhauls. You can fully customize your chat experience:
- Style and shape your chat using props, events, and CSS.
- Modify parts of a theme with HTML and JavaScript to fine-tune your interface.
- Fork the default theme to take full control of design and behavior.
Framework-specific guides
Keep building with one of the framework-specific guides:
Need help?
Ready to give TalkJS’ chat components a try? Our expert support team of engineers is here to help you get started fast. Start a chat anytime.
